WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室

转载请标明出处：http://blog.csdn.net/u010136741/article/details/51612594， 本文出自: 柳木木_kylin

【总目录】

WebSocket入门教程--大纲

【实例简介】

    本文，我们通过nodejs和javascript实现一个网页聊天室的demo。主要包括，聊天，改用户名，查看其他用户在线状态的功能。大致流程为，用户访问网页，即进入聊天状态，成为新游客，通过底部的输入框，可以输入自己想说的话，点击发布，信息呈现给所有在聊天的人的页面。用户可以实时修改自己的昵称，用户离线上线都会实时广播给其他用户！

【效果图】

【客户端】

    web页面主要呈现在线人数，聊天信息，一个输入框和发送按钮，上代码:

	
	
	
	
	
	
	
	
	


    

    

        
多人在线聊天DEMO
	

	
当前在线人数：0
 	


    	
    	

   	

        	

        		
        	
       		发送!
    
    
    

    

    javascript 部分，连接websocket成功之后，主要是监听数据返回，和发送数据。

    当用户编辑好内容，点击发送按钮是调用sendMessage方法，发送数据，如果需要修改昵称，则发送数据格式为"/nick 昵称"。

   当服务器返回数据到客户端，我们通过appendLog方法对数据做处理，根据type字段，判断是显示用户离线在线信息，还是显示聊天信息。最后更新在线人数。

【服务器端】

    服务器端主要是接收信息，判断是聊天信息还是重命名信息，然后发送广播。同时，当用户连接上服务器端或者关闭连接时，服务器也会发送广播通知其他用户。

var WebSocket = require('ws');
var WebSocketServer = WebSocket.Server,
    wss = new WebSocketServer({port: 8180});
var uuid = require('node-uuid');

var clients = [];

function wsSend(type, client_uuid, nickname, message,clientcount) {
  for(var i=0; i= 2) {
        var old_nickname = nickname;
        nickname = nickname_array[1];
        var nickname_message = "用户 " + old_nickname + " 改名为： " + nickname;
        wsSend("nick_update", client_uuid, nickname, nickname_message,clients.length);
      }
    } else {
      wsSend("message", client_uuid, nickname, message,clients.length);
    }
  });

  var closeSocket = function(customMessage) {
    for(var i=0; i


    我们定义了wsSend函数用来处理消息的广播。 对每个连接的用户，我们默认给他分配为游客。 为了实现广播，我们用clients数组来保存连接的用户。

【演示地址】

电脑访问：

http://www.liumumu.top/?m=Home&c=websocket&a=demo4

手机浏览器、微信访问：

【源码下载】

gitlib:https://github.com/kylinLiu/WebSocket/tree/master/demo/chatroom

csdn:http://download.csdn.net/detail/u010136741/9544613

【结束语】

    对比前面的demo，本文的demo增加了客户端与服务器的互动，同时也实现了客户端之间的联系。不管是功能还是代码，都有很多可以完善的地方，广大读者可以在此基础上，添加更多的功能。