与node.js中的特定在线用户聊天

时间:2014-12-27 05:21:17

标签: javascript jquery html node.js socket.io

我希望与特定的在线用户聊天,比如facebook或gmail ..使用node.js和socket.io请帮帮我..谢谢提前..

Client.html

<html>
<head>
<title>my chat app</title>
<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>
     <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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var username = null;
      var socket = io();
     $('#chat').hide();
$('#username').focus();
      $('form').submit(function(e){
   e.preventDefault();
});


    $('#join').click(function(){
        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('<b>'+ username + ':</b> ' + msg + '<br>');
      $('#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>");

            });


     $('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('privat 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>

server.js

  var fs = require('fs'),
    http = require('http'),

    sio = require('socket.io');

var usernames={};
var sockets = {};
var names= {};


var server = http.createServer(function(req, res) {
  res.writeHead(200, { 'Content-type': 'text/html'});
  res.end(fs.readFileSync('./index.html'));
});
server.listen(8000, function() {
  console.log('Server listening');
});
io = sio.listen(server)
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', socket.nickname+' is now offline');
         delete names[socket.id];
         delete usernames[socket.nickname];
            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);


    });
});

此代码工作完美但私密聊天无法正常工作当我点击在线用户只打开一个私人聊天文本框我想打开多个聊天框,如facebook或gmail ..

1 个答案:

答案 0 :(得分:0)

向特定用户发送消息的想法修改了客户端的代码 这将帮助您发送用户私信

$('#send').click(function(){
  var recieverName = ''// ANY unique name or userId 
   socket.emit(recieverName, $('#msg').val());
   $('#msg').val('');
});

//// username is connected user unique name or userId (will get on #join click)
socket.on(username, function(msg){
  //$('#messages').append('<b>'+ username + ':</b> ' + msg + '<br>');
  $('#messages').append($('<li>').text(msg));
});