I am new to Node.js and facing problem using socket.id to identify logged in users on the client side using email id and password which is verified from a table on server side and if verified, user socket.id is used to send a username to that client.
When two users login, they can chat with unique usernames, but when the chat page is refreshed both usernames get changed to the username of the second login (i.e. the user who logged in later). Please help.
Here is my code:
server.js
var express = require('express')
, app = express()
, http = require('http')
, server = http.createServer(app)
, Twit = require('twit')
, io = require('socket.io').listen(server)
, os = require('os')
, open = require('open')
, bodyParser = require('body-parser')
, connect = require('connect')
, mysql = require("mysql");
var clients = {};
server.listen(9383,'192.168.1.3');
app.get('/loginstyle.css', function (req, res) {
res.sendfile(__dirname + '/loginstyle.css');
});
app.get('/loginme', function (req, res) {
res.sendfile(__dirname + '/loginmysql.html');
});
app.get('/option', function (req, res) {
res.sendfile(__dirname + '/option.html');
});
app.get('/chat', function (req, res) {
res.sendfile(__dirname + '/chat.html');
});
app.post('/valid', function (req, res) {
var username=req.body.email;
var password=req.body.pass;
var connection = mysql.createConnection({
"hostname": "localhost",
"user": "root",
"password": "vk123",
"database": "login"
});
connection.connect();
connection.query('SELECT * FROM id WHERE email=? AND password=?', [username,password], function(err, rows){
if (err){
throw err;
}else{
var name1=rows[0].name;
io.sockets.on('connection', function(socket){
clients[socket.id] = socket;
clients[socket.id].emit('name', name1); // username is sent to client
});
res.redirect('http://192.168.1.3:9383/chat');
}
});
connection.end();
});
io.sockets.on('connection', function(socket){
socket.on('chat message', function(name,msg){
console.log(msg);
io.emit('chatmessage',name,msg);
});
});
client.html
<!DOCTYPE html>
<html>
<head>
</head>
<body background="/bgimage.jpg">
<div class="chat"></div>
<form style="bottom:10px; position:fixed; padding-left: 100px">
<input type="text" class="msg" style="width:1000px; height:30px"></input>
<button type="submit" class="enter" style="padding-left:0px; height:35px; background-color:skyblue">Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var socket = io.connect('http://192.168.1.3:9383');
var username;
var chatmsg=[];
socket.on('name', function(name){
username=name;
console.log(username);
});
$('.enter').bind("click",function(){
chatmsg.push({chatname:username, msgtext:($('.msg').val())});
socket.emit('chat message',username,$('.msg').val() );
$('.msg').val('');
return false;
});
socket.on('chatmessage', function(name,msg){
var block= $("<div class='message'> </div>");
if(msg.length){
var messenger= $("<div style='color:green;font-weight:bold;background-color:floralwhite'> </div>");
messenger.append(name);
block.append(messenger);
var text=$("<div style='padding:3px;background-color:floralwhite'></div>");
text.append(msg);
block.append(text);
block.append($("<div style='padding:10px;background-color:transparent'></div>"));
$('.chat').append(block);
}
});
});
</script>
</body>
</html>