2014-09-02 133 views
0

一直在尝试使用node.js和socket.io创建一个聊天应用程序,但已经停留了一段时间,继承人为什么我成功实现了发送私人消息通过点击你想要私密聊天的人的用户名之间的连接用户之间,但我现在面临的问题是,例如,假设有3个连接的用户在聊天应用程序(说喜悦,恩典,shanel)时欢乐决定与恩典聊天,聊天应用程序处理得很好,但如果喜欢在首次与恩典聊天后决定与夏纳尔聊天,那么喜欢用于夏娜尔的私人消息最终会被送到恩典(即恩典和夏纳尔接收者这个私人信息的恩典),这是一直面临的问题。我的代码如下所示,比较遗憾的是作文,我想任何人都试图帮助理解我的处境:)使用socket.io发送消息给非预期用户

server.js代码

var express = require('express'); 
var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
var usernames={}; 
var sockets = {}; 
var names= {}; 


app.use(express.static(__dirname + '/public')); 
app.get('/', function(req, res){ 
    res.sendfile('index.html'); 
}); 

io.on('connection', function(socket){ 
    socket.on('send_msg', function(msg){ 
    console.log('a user connected'); 
    io.emit('chat message', msg); 
    //console.log(msg); 

    }); 

    socket.on('new_user',function(user){ 
    console.log('new user:'+user); 
     names[socket.id] = user; 
     socket.nickname= user; 
     usernames[socket.nickname] = socket; 
     sockets[user]=socket.id; 
     socket.emit('update_personal', "you are now online"); 
     io.emit('update_users',names); 

    }); 

    socket.on('disconnect', function(){ 
     io.emit('update_personal', usernames[socket.id]+' is now offline'); 
     //delete usernames[socket.id]; 
     delete names[socket.id]; 
     delete usernames[socket.nickname]; 
     // io.emit('update_users',usernames,usernames[socket.id]); 
      io.emit('update_users',names); 
      //console.log(usernames+'specific user id'+usernames[user]); 
    }); 

    socket.on('private_msg', function(msg,recipient,sender){ 

     console.log('you are trying to send '+msg+' to '+recipient+ ' from '+sender); 


     var id = sockets[recipient]; 

     console.log(sockets[recipient]); 
     io.to(id).emit('received_p_msg', msg,sender,recipient); 

     recipient = ''; 
     console.log('value in recipient:'+recipient); 


    }); 
}); 

http.listen(3000, function(){ 
    console.log('listening on *:3000'); 

}); 

client.html

<!doctype html> 
<html> 
    <head> 

    <title>my chat app</title> 
    <!------------------ 
    <style> 
    <!----------- 
     * { margin: 0; padding: 0; box-sizing: border-box; } 
     body { font: 13px Helvetica, Arial; } 
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 
     #messages { list-style-type: none; margin: 0; padding: 0; } 
     #messages li { padding: 5px 10px; } 
     #messages li:nth-child(odd) { background: #eee; } 
     #chat_msg{ 

     } 
    </style><!-------!> 

    </head> 
    <body> 
    <!---username login here-----> 
    <div id="login"> 
    <form id="chat_msg"> 
    <label>Enter Username:</label> 
    <input type="text" id="username"/> 
    <input type="button" id="join" value="Create Username"/> 
    </form> 

    </div> 
    <div> 
    <div id="online_users"><li>List of online users:</li></div> 
    </div> 

    <!---public room chat begins here-----> 
    <div id="chat" style="display: none;"> 

    <ul id="messages"></ul> 
    <form action=""> 
     <input id="msg" autocomplete="off" /> 
     <button id="send" >Send</button> 
    </form> 
    </div> 

    <!---private chat begins here-----> 
    <div id="private_chat" style="display: none;"> 
    <p id="private_user">Private chat with: </p> 
    <div id="private_msg"></div> 

    <form action=""> 

     <input id="p_msg" autocomplete="off" /> 
     <button id="p_send" >Send private msg</button> 
    </form> 
    </div> 
    <script src="/socket.io/socket.io.js"></script> 
    <script src="jquery-2.1.0.js"></script> 
    <script> 
    $(document).ready(function(){ 

     var socket = io('http://192.168.173.1:3000/'); 

     $('#chat').hide(); 
     $('#username').focus(); 


     $('form').submit(function(e){ 
     e.preventDefault(); 
     }); 

     var username = $('#username').val(); 


     $('#join').click(function(){ 
      var username = $('#username').val(); 
      console.log('entered username '+username); 
      if(username !=''){ 
      socket.emit('new_user', username); 
      $('#login').detach(); 
      $('#chat').show(); 
      $('#msg').focus(); 
      } 
     }); 

     $('#send').click(function(){ 
      socket.emit('send_msg', $('#msg').val()); 
     $('#msg').val(''); 

     }); 


     socket.on('chat message', function(msg){ 
     $('#messages').append($('<li>').text(msg)); 
     }); 

     socket.on('update_personal', function(status){ 
     $('#messages').append($('<li>').text(status)); 
     }); 

     socket.on('update_users', function(names){ 
     console.log(names); 


     if(true) { 

           $("#online_users").empty(); 
       $.each(names, function(clientid, name) { 
        $('#online_users').append("<li><a href='#' id='"+name+"' name='"+name+"' class='private'> " + name + "</a></li>"); 
       }); 
        // $('#online_users').html("<li><a href='#' id='"+name+"' name='"+name+"' class='private'> " + name + "</a></li><br/>"); 


     $('a.private').click(function(){ 
     $('#private_chat').hide(); 

     $('#private_chat').show(); 
     var sender = username; 


    var recipient = $(this).attr('name'); 


     console.log('name gotten is:'+recipient); 
     $('p#private_user').html('private chat with :'+ recipient); 

     $('#p_send').click(function(){ 
      msg = $('#p_msg').val(); 
      if(msg!=''){ 
       recipient=recipient; 
      socket.emit('private_msg', msg,recipient,sender); // msg from sender, username of the sender, username of recipient 
     $('#p_msg').val(''); 
     }else{$('#p_msg').val('please enter a valid msg');} 
     }); 
     }); 

        } 
     }); 
     socket.on('received_p_msg', function(msg,sender,recipient){ 
     $('#private_chat').show(); 

     console.log('received privatemsg: '+msg); 
     $('#private_user').html('privatE chat with : '+ sender); 
     $('#private_msg').append($('<div>').html(msg+'</div>')); 

     //to continue chat after receiving initial private msg 
     $('#p_send').click(function(){ 
      msg = $('#p_msg').val(); 
       if(msg!=''){ 
      socket.emit('private_msg', msg,sender,recipient); // msg from sender, username of the sender, username of recipient 
     $('#p_msg').val(''); 
     }else{$('#p_msg').val('please enter a valid msg');} 

     $('#p_msg').val(''); 

     }); 

     }); 

     socket.on("disconnect", function(){ 
      $("#msgs").append("The server is not available"); 

     }); 



     }); 
    </script> 
    </body> 
</html> 
+0

检查室和socket.io文档中的命名空间,这应该解决您的问题的回复 – matteospampani 2014-09-02 20:10:13

+0

谢谢,但我觉得你的回复有点含糊,因为对socket.io和node还是有点新鲜的,我真的很感激它,如果你能解释一下,非常感谢!:) – 2014-09-03 09:18:35

+0

对不起,但现在我不能,我会解释它稍后会更好。以下是[在线演示](http://socket.io/demos/chat/)的[源代码](https://github.com/Automattic/socket.io/tree/master/examples/chat) 。希望它有帮助 – matteospampani 2014-09-03 09:31:08

回答

0

关于你的问题,我注意到如果你想打开多个私人聊天,你不能,因为只有一个username,所以不可能选择多个客户端找到聊天消息。例如,您需要将username变量扩展为usernames的数组。

我发现你client.html文件中的可能的错误,其中username$("#username").val()拍摄,但它是undefined。我建议你此修复程序,如果我理解正确的代码(3条不同的线路):

// the line below differs 
var username = null; 
var socket = io('http://192.168.173.1:3000/'); 

$('#chat').hide(); 
$('#username').focus(); 

$('form').submit(function(e){ 
    e.preventDefault(); 
}); 

// the line below differs 
//var username = $('#username').val(); 

$('#join').click(function{ 
    // the line below differs 
    username = $('#username').val(); 
    console.log('entered username '+username); 
    if(username !=''){ 
     socket.emit('new_user', username); 
     $('#login').detach(); 
     $('#chat').show(); 
     $('#msg').focus(); 
    } 
}); 
+0

感谢您的快速响应,我修正了客户端指出的错误,前面的代码无论如何正在工作,因为我重新声明了用户名变量(糟糕的编码伦理)。关于私人聊天问题,如果你将我上面从“update_users”事件发送来的代码与我发送的服务器端代码进行比较后看到的话,你会发现可用的用户名列表不是一个,它是一个对象包含连接的用户名和socket.id,这是我发送到服务器端。请再次检查,感谢您的帮助 – 2014-09-03 21:00:25

+0

非常感谢您的帮助!你是一个救星,当你指出你发现的错误后,我决定再看看我的代码,我发现3个人就像你发现的其他人一样,显然,不是全局的收件人变量在每个点都被重新声明,我的聊天软件现在可以正常工作!,我真的很感谢你的帮助 – 2014-09-04 00:14:21

+0

很高兴帮助你! ;) – matteospampani 2014-09-04 06:10:18