2014-09-02 55 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