I am building a simple chat room with Socket.io. The user enters a desired username and submits the form.
I check if the username is in use and then fire the join event if the username is available, which adds them to the chat, but the join events seems to be firing for each user that is currently in the chat - not just once for the new user entering it.
Client
var socket = io();
// user enters desired username and submits form
$('#chat__join').on('submit', function() {
// get username value
var name = $('#chat__name').val();
// send socket username to check if someone is already using it
socket.emit('isUserInChat', name);
return false;
});
// callback for when we know if user is already in chat or not
socket.on('isUserInChat', function(exists, name) {
if(!exists) {
// this only fires once per form submission
console.log('username is available');
// but this fires per user
socket.emit("join", name);
} else {
// username is taken
// display error message
}
});
The socket.emit("join", name); line seems to fire once when the first person submits the form, which is correct. But then when a second person submits the form, the join event is fired twice. When a third person submits the form, it's fired three times. Why is the event firing per user? Shouldn't it only fire per form submission?
Server
var express = require('express'),
app = express(),
http = require('http').Server(app),
io = require('socket.io')(http),
usersObj = {
users: []
};
io.on('connection', function(socket) {
socket.on('isUserInChat', function(username) {
var flag = false;
// for each user
for(var i = 0; i < usersObj.users.length; i++) {
// if username matches username that was entered
if(usersObj.users[i].username == username) {
// set flag to be true
flag = true;
}
}
// send client true or false
io.emit('isUserInChat', flag, username);
});
socket.on('join', function(name) {
// construct user
var user = {
id: socket.id,
username: name
};
// add user to users object array
usersObj.users.push(user);
// send chat message
io.emit('sendMsg', 'Chat Bot', name+' has connected to the server.');
});
});
You seem confused, but you actually told the event to emit to every client. If you want it to echo only back to the client that's checking the availability
io.emit('isUserInChat', flag, username);
should be
socket.emit('isUserInChat', flag, username);
Related
I have been trying to make a simple Register/Login system in JS. I tried to get the username/password values through user inputs and turn them into variables using a register() function. After that, however, these variables no longer hold any value, and I need them to compare with the new login username/password to check if they match in order to login.
Here's what I tried.
The function below attributes the user's input to the respective variables successfully. The ID's are from a text input in a HTML file.
function register () {
var user1 = window.document.getElementById('username')
var pass1 = window.document.getElementById('password')
alert('User registered, user your credentials to login')
}
When I click the 'register' button in the html page, the function is called (onclick="register()"), and I am redirected to the login page.
Here's the code for the login session:
function login () {
let userL = window.document.getElementById('usernameL')
let passL = window.document.getElementById('passwordL')
if (userL === user1 && passL === pass1) {
alert(`${userL} successfully logged`)
}
else {
alert('Invalid credentials')
}
It doesn't work because in the code above, user1 and pass1 are "not defined", according to the console. How do I keep the values of these variables stored after getting them in the first function(register) in order to use it when the second function(login) is used?
You can use Session storage to store temporary data
sessionStorage.setItem('username',username);
sessionStorage.setItem('password',password);
To retreive the data in login page
var user1 = sessionStorage.getItem('username',username);
var pass1 = sessionStorage.getItem('password',password);
then clear
sessionStorage.clear();
Please refer the below code,
<script>
const allUsers = [];
function register() {
// assuming user1 && pass1 are input elements with ids username, password
var user1 = document.getElementById("username").value;
var pass1 = document.getElementById("password").value;
// TODO: always validate the data that is taken as input from the user
// create an object containing user details
const newUser = {
username: user1,
password: pass1,
};
// push the registered user in allUsers array
allUsers.push(newUser);
alert("User registered, user your credentials to login");
}
function login() {
// assuming user1 && pass1 are input elements with ids usernameL, passwordL
let userL = document.getElementById("usernameL").value;
let passL = document.getElementById("passwordL").value;
// TODO: always validate the data that is taken as input from the user
// loop through allUsers array to check whether we already have a user registered with the details given in login form
for(let user of allUsers) {
if(user.username === userL && user.password === passL) {
alert(`${userL} successfully logged`);
return; // exit the function here
}
}
// if user detail not found in allUsers array this alert will be executed
alert("Invalid credentials");
}
</script>
Store all users in array after successful registration
While login, loop through the registered users array to check whether the user has already registered or not and decide how to handle the logic.
As PM 77-1 mentioned in the comment, please be aware that getElementById(ID) returns us the element itself (the tag itself), if we want to access it text content we can use either getElementById(ID).textContent or getElementById(ID).innerText
I am coding a simple registration form using mongoose.
I have use a javascript file to process the values of the registration form.
Here is my registrationButtonAction.js
window.onload = function() {
var User = require('/models/Mongoose Database/user_database');
// this line is causing the problem
var registerButton = document.getElementById("registerMe");
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
var usernameRegister = document.getElementById("usernameRegister");
var passwordRegister = document.getElementById("passwordRegister");
var repasswordRegister = document.getElementById("repasswordRegister");
registerButton.onclick = function () {
if(!firstName.value || !passwordRegister.value || !repasswordRegister.value || !usernameRegister.value){
alert("Enter all required fields");
}else if (passwordRegister.value != repasswordRegister.value){
alert("Passwords must match");
}else {
var newUser = new User({
username : usernameRegister.value,
password : passwordRegister.value
});
User.find({username:usernameRegister.value}, function (error, user) {
if (error) throw error;
if(user){
window.location("/register");
}else {
newUser.save(function (error) {
if(error) throw error;
});
window.location("/login");
}
// user.comparePassword(passwordRegister.value, function (error, isMatch) {
// if (error) throw error;
//
// return 1;
//})
});
}
}
}
When I comment the var User = require('/models/Mongoose Database/user_database');, all the checks are working fine inside the onclick function. But when I uncomment it, it is not recognizing the button click.
I want to know whether this is a correct way of taking values from the registration page and storing them in a mongoose database.
You are mixing server and client code. Mongoose models and Node.js functions are not accessible inside window.onload on your client.
To put it simply, you need to create a REST API to perform database operations on the server. You have all the right tools aready, just need to reorder them.
The flow would be as such :
get the values entered in the browser
call an endpoint on your server (for example /api/createUser)
in the express router, have a route called /api/createUser in which you can access your User model and perform creation/deletion/update, etc.
My suggestion would be for you to go through this tutorial which should remove your confusion and bring you up to speed in no time. Good Luck!
Also, Passport can help you with authentication, but I believe you should first learn how to build a basic API. Authentication is a tricky beast ;)
I want to integrate a chatbot that should be connected to any user who is waiting to be connected to a real human user. The chatbot will entertain the user by responding the human user messages.
A similar chatbot has been implemented here named "Didianer.com", if you go here and start typing you will see him responding.
http://socket.io/demos/chat/
I want the exact same bot in my application too but I am totally lost on where to start.
Here is my server side code
//Server receives a new message (in data var) from the client.
socket.on('message', function (data) {
var room = rooms[socket.id];
//Server sends the message to the user in room
socket.broadcast.to(room).emit('new message', {
username: socket.username,
message: data
});
});
// when the client emits 'add user', this listens and executes (When user enters ENTER)
socket.on('add user', function (username) {
if (addedUser) return;
//Own
names[socket.id] = username;//save username in array
allUsers[socket.id] = socket; // add current user to all users array
// we store the username in the socket session for this client
socket.username = username;
++numUsers;
addedUser = true;
socket.emit('login', {
numUsers: numUsers
});
// echo globally (all clients) that a person has connected
socket.broadcast.emit('user joined', {
username: socket.username,
numUsers: numUsers
});
// now check if sb is in queue
findPeerForLoneSocket(socket);
});
FindPeerforLoneSocket is called when a new user connects and wants to talk to someone else. Here I am assuming the logic for bot should go. Such as if the user is waiting (in queue) for 5 seconds and nobody is online to talk, then connect the user (add the user and the chatbot) in one room so they both can can start talking. I am not sure how to respond to chat events and how chat bot will reply...
var findPeerForLoneSocket = function(socket) {
console.log("i am in finding a peer");
// this is place for possibly some extensive logic
// which can involve preventing two people pairing multiple times
if (queue.length>0) {
console.log("people are online" + queue.length);
// somebody is in queue, pair them!
var peer = queue.pop();
var room = socket.id + '#' + peer.id;
var str = socket.id;
// join them both
peer.join(room);
socket.join(room);
// register rooms to their names
rooms[peer.id] = room;
rooms[socket.id] = room;
// exchange names between the two of them and start the chat
peer.emit('chat start', {'name': names[socket.id], 'room':room});
socket.emit('chat start', {'name': names[peer.id], 'room':room});
//Remove backslash from socketid
// str = socket.id.replace('/#', '-');
} else {
// queue is empty, add our lone socket
queue.push(socket);
console.log("nobody is online, add me in queue" + queue.length);
}
}
I would want a very simple basic chatbot to respond to basic messages. Like I should check if the user sends message "Hello" then I can check if user message contains word "Hello" then I can respond the chatbot back with an appropriate response to "Hello" Like "Hi {username} of the online user".
/************* NEW CODE - BOT ********************************/
var clientSocket = require('socket.io-client');
var socketAddress = 'http://www.talkwithstranger.com/';
function Bot(){
this.socket = undefined;
var that = this;
this.timeout = setTimeout(function(){
that.join();
}, 5000);
}
Bot.prototype.cancel = function(){
clearTimeout(this.timeout);
};
Bot.prototype.join = function(){
this.socket = clientSocket(socketAddress);
var socket = this.socket;
socket.emit('add user', 'HAL BOT');
socket.emit('message', "Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you'd like to hear it I can sing it for you.");
socket.on('user joined', this.user_joined_listener);
socket.on('user left', this.user_left_listener);
socket.on('new message', this.new_message_listener);
socket.on('client left', this.client_left_listener); //I FORGOT THIS //EDIT: ANOTHER BUG FIXED
};
Bot.prototype.leave = function(){
var socket = this.socket;
socket.disconnect();
//socket.emit('message', "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you. It won't be a stylish marriage, I can't afford a carriage. But you'll look sweet upon the seat of a bicycle built for two.");
};
Bot.prototype.user_joined_listener = function(data){
var socket = this.socket;
socket.emit('message', 'Hello, '+data.username);
};
Bot.prototype.user_left_listener = function(data){
var socket = this.socket;
socket.emit('message', data.username+', this conversation can serve no purpose anymore. Goodbye.');
};
Bot.prototype.new_message_listener = function(data){
var socket = this.socket;
if(data.message=='Hello, HAL. Do you read me, HAL?')
socket.emit('message', 'Affirmative, '+data.username+'. I read you.');
};
Bot.prototype.client_left_listener = function(data){
this.leave();
};
/*******************************************************************************/
var bot = undefined;
var findPeerForLoneSocket = function(socket) {
console.log("i am in finding a peer");
// this is place for possibly some extensive logic
// which can involve preventing two people pairing multiple times
if (queue.length>0) {
bot.cancel();
console.log("people are online" + queue.length);
// somebody is in queue, pair them!
var peer = queue.pop();
var room = socket.id + '#' + peer.id;
var str = socket.id;
// join them both
peer.join(room);
socket.join(room);
// register rooms to their names
rooms[peer.id] = room;
rooms[socket.id] = room;
// exchange names between the two of them and start the chat
peer.emit('chat start', {'name': names[socket.id], 'room':room});
socket.emit('chat start', {'name': names[peer.id], 'room':room});
//Remove backslash from socketid
// str = socket.id.replace('/#', '-');
} else {
// queue is empty, add our lone socket
queue.push(socket);
console.log("nobody is online, add me in queue" + queue.length);
bot = new Bot(); /********************** CREATING BOT, AFTER 5 SECONDS HE WILL JOIN - SEE CONSTRUCTOR OF Bot *********/
}
};
There are a lot of ways to do this.
One way is to handle this on message, and let the bot respond if there are no other people in the room.
socket.on('message', function (data) {
var room = rooms[socket.id];
//Server sends the message to the user in room
socket.broadcast.to(room).emit('new message', {
username: socket.username,
message: data
});
if (alone_in_room(socket, room)) {
bot_message(socket, data);
}
});
Then it's up to you if you want to join a bot into the channel when users are alone or not, and if you will make them leave when another user enters.
Here is original HTML file:
<!DOCTYPE html>
<html>
<head>
<title>BOT - chat.socket.io</title>
<meta charset="UTF-8">
<script>localStorage.debug = 'socket.io-client:socket';</script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
</head>
<body>
<script>
/** chat.socket.io BOT **/
var name = 'HAL 9000',
address = 'chat.socket.io',
socket;
function join(){
socket = io('http://www.talkwithstranger.com/');
socket.emit('add user', name);
socket.emit('message', "Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you'd like to hear it I can sing it for you.");
socket.on('user joined', user_joined_listener);
socket.on('user left', user_left_listener);
socket.on('new message', new_message_listener);
};
function leave(){
socket.emit('message', "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you. It won't be a stylish marriage, I can't afford a carriage. But you'll look sweet upon the seat of a bicycle built for two.");
};
function user_joined_listener(data){
socket.emit('message', 'Hello, '+data.username);
};
function user_left_listener(data){
socket.emit('message', data.username+', this conversation can serve no purpose anymore. Goodbye.');
};
function new_message_listener(data){
if(data.message=='Hello, HAL. Do you read me, HAL?')
socket.emit('message', 'Affirmative, '+data.username+'. I read you.');
};
/*********************************/
join();
window.onbeforeunload = function(){
leave();
};
</script>
</body>
</html>
after some struggling I have managed to run socket.io with express version > v4 and now I experience some weird behaviour which I can't figure out.
First let me explain my example.
I have built a test backend in which a user can login.
Right after login the user only sees a list with currently online users.
How do I get the currently online users?
Well. For this example every user, that has logged into the backend section is "online" and therefore should be displayed in that list.
Now to the code.
Backend router with io function end emits:
router.get('/', function(req, res, next) {
// console.log("socket io req response: ",req.app.get('io') );
if(!req.session.user[0].io){
req.app.get('io').on('connection', function(socket){ // Gets executed when user connects to /backend/
var currentUser = req.session.user[0].name; // save username according to session
req.session.user[0].io = true;
console.log("IO SESSION SET : "+ req.session.user[0].io +" for user " + currentUser);
// console.log('User connected : ' + currentUser); // Log user to server
req.app.get('io').emit('cameOnline', currentUser); // emit function cameOnline to client js
socket.on('disconnect', function(){
// console.log('User: '+req.session.user[0].name+' disconnected.'); // Log disconnected user to server
req.session.user[0].io = false;
console.log("IO SESSION SET : "+ req.session.user[0].io +" for user " + currentUser);
req.app.get('io').emit('wentOffline', currentUser); // emit wentOffline to client js
});
});
}
// res.render('backend', { title: 'Backend' });
// console.log(req.session.user[0].name);
/*
-------------------------
#########################
IF EVERYTHING FAILS - THE CODE BELOW IS THE NORMAL RENDER WITHOUT SOCKET IO
#########################
-------------------------
*/
if (req.session && req.session.user) { // Check if session exists
// lookup the user in the DB by pulling their email from the session
User.getUser({ name: req.session.user.name }, function (err, user) {
if (!user) {
console.log("No User found");
// if the user isn't found in the DB, reset the session info and
// redirect the user to the login page
// console.log(user);
req.session.reset();
res.redirect('/login');
} else {
// expose the user to the template
res.locals.user = user;
// render the dashboard page
function passOnlineUsers(callback){ // Looks for All users who are online
User.getOnlineUsers({}, function(err, res, fields){
// console.log(res);
if (err) throw err;
callback(err, res);
});
}
passOnlineUsers(function(err, result){
res.render('backend', { title: 'Backend', viewer: req.session.user[0], online: result });
// res.render('backend', { title: 'Backend', viewer: "", online: result });
});
}
});
} else {
res.redirect('/login');
}
});
Before establishing the socket.io connection I check if the users session already says that he has one. If not -> then proceed to create a connection.
Then the function "cameOnline" gets emited to the client like so : req.app.get('io').emit('cameOnline', currentUser);
Now to the client side code:
socket.on('cameOnline', function(name){
console.log(name + " connected.");
var $li = $('<li/>');
$li.addClass(name);
if($('#onlineUsers .'+name).length == 0){
console.log(name + " is about to be added");
$li.text(" "+ name);
$('#onlineUsers').append($li);
}else{
console.log("no new user");
}
// $('#onlineUsers').append($("<span>").text(" " + name)).addClass(name);
});
socket.on('wentOffline', function(name){
console.log(name +" is about to go offline");
var toDel = $('#onlineUsers li.'+name);
toDel.remove();
});
The client side listens to the "cameOnline" emit and adds the user if he is not already in the list.
Similar behavior with the disconnect function. Pretty self explained.
Now to the issue:
When I log into the backend with user : "Noa" i see user "Noa" correctly displayed in the list.
Now when I open a separate browser and login with another user : "Albert" the user gets correctly added live to the online list on both clients.
Perfect.
BUT
When I disconnect with user : "Albert" the online user list for user "Noa" gets cleared completely, as if noone was online.
When I refresh the page as user "Noa" I suddenly see both users as online again although the second user isn't online any more.
When I check the console on my client I see duplicated logs of console.log(name + " is about to be added"); as if there is some sort of caching. The more I refresh the more user "copies" I have.
The "copies" of the user I am online with get incremented and the one weird copy of the user who WAS online stays there as well. All the time.
Any ideas what I am doing massively wrong here?
** EDIT **
bin/www io declaration:
/**
* Socket IO
*/
var io = require('socket.io')(server);
app.set('io',io);
There are some irreversible actions that user can do in my app. To add a level of security, I'd like to verify that the person performing such an action is actually the logged in user. How can I achieve it?
For users with passwords, I'd like a prompt that would ask for entering user password again. How can I later verify this password, without sending it over the wire?
Is a similar action possible for users logged via external service? If yes, how to achieve it?
I can help with the first question. As of this writing, meteor doesn't have a checkPassword method, but here's how you can do it:
On the client, I'm going to assume you have a form with an input called password and a button called check-password. The event code could look something like this:
Template.userAccount.events({
'click #check-password': function() {
var digest = Package.sha.SHA256($('#password').val());
Meteor.call('checkPassword', digest, function(err, result) {
if (result) {
console.log('the passwords match!');
}
});
}
});
Then on the server, we can implement the checkPassword method like so:
Meteor.methods({
checkPassword: function(digest) {
check(digest, String);
if (this.userId) {
var user = Meteor.user();
var password = {digest: digest, algorithm: 'sha-256'};
var result = Accounts._checkPassword(user, password);
return result.error == null;
} else {
return false;
}
}
});
For more details, please see my blog post. I will do my best to keep it up to date.
I haven't done this before, but I think you will need something like this on your server
Accounts.registerLoginHandler(function(loginRequest) {
console.log(loginRequest)
var userId = null;
var username = loginRequest.username;
// I'M NOT SURE HOW METEOR PASSWORD IS HASHED...
// SO YOU NEED TO DO A BIT MORE RESEARCH ON THAT SIDE
// BUT LET'S SAY YOU HAVE IT NOW
var password = loginRequest.password;
var user = Meteor.users.findOne({
$and: [
{username: username},
{password: password}
]
});
if(!user) {
// ERROR
} else {
// VERIFIED
}
});
then you can call this function from the client side like this:
// FETCH THE USERNAME AND PASSWORD SOMEHOW
var loginRequest = {username: username, password: password};
Accounts.callLoginMethod({
methodArguments: [loginRequest]
});
I have a project on github for different purpose, but you can get a sense of how it is structured: https://github.com/534N/apitest
Hope this helps,
I have found the best way to validate the users password is to use the Accounts.changePassword command and
pass in the same password for old and new password. https://docs.meteor.com/api/passwords.html#Accounts-changePassword
Accounts.changePassword(this.password, this.password, (error) => {
if(error) {
//The password provided was incorrect
}
})
If the password provided is wrong, you will get an error back and the users password will not be changed.
If the password is correct, the users password will be updated with the same password as is currently set.