HTML5+NodeJs实现WebSocket即时通讯

产品网站中很多地方需要用到实时交互,web端的实时交互。

具体为活动抽奖案例:

  现场一个大屏,显示中奖人列表相关信息;

  主持人一个pad控制开始抽奖结束抽奖;

  每个活动现场的观众的手机。用来摇动手机进行抽奖

毫无疑问用websocket,WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量。所以WebSocket暂时来说是实时通讯的最佳协议了

至于服务器语言选择nodeJs,是因为NodeJs本身事件驱动的方式很擅长与大量客户端保持高并发的连接。所以就选择NodeJs了。

安装nodejs,然后再安装一个nodejs-websocket的模块。然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了

服务器代码:

 1 var ws = require("nodejs-websocket")
 2 var net = require('net')
 3 
 4 var clients_luck_show= new Array();
 5 var clients_luck_control= new Array();
 6 var clients_luck_client= new Array();
 7 var datas= new Array();
 8 
 9 
10 // Scream server example: "hi" . "HI!!!"
11 var server = ws.createServer(function (conn) {
12     conn.on("text", function (str) {
13         onData(str,conn);
14     })
15     conn.on("close", function (code, reason) {
16         onDisconnect();
17     })
18 })
19 server.listen(8000)
20 
21 
22 function onDisconnect(){
23     console.log("connect close");
24     clients_luck_show.length=0;
25     clients_luck_control.length=0;
26     clients_luck_client.length=0;
27 }
28 
29 function onData(data,conn){
30     console.log("data="+data);
31 
32         //conn.sendText(str);
33     var json = JSON.parse(data);       
34         switch (json.action){
35             case "reg":
36                 regClient(JSON.parse(data),conn);
37                 break;
38             case "luckcontrol":
39              sendtoclient(clients_luck_show,json,data);
40                 sendtoclient(clients_luck_client,json,data);
41                 break;
42             case "luckok":
43                 sendtoclient(clients_luck_show,json,data);
44                 break;
45             case "luckend":
46                 sendtoclient(clients_luck_show,json,data);
47                 sendtoclient(clients_luck_control,json,data);
48                 sendtoclient(clients_luck_client,json,data);
49                 break;
50             
51         }
52 }
53 
54 function regClient(json , conn){
55     var id = conn.key;
56     datas[id] = json.showid;
57     switch (json.type){
58         case "luck_show":
59             clients_luck_show[conn.key]=conn;
60             break;
61         case "luck_client":
62             clients_luck_client[conn.key]=conn;
63             break;
64         case "luck_control":
65             clients_luck_control[conn.key]=conn;
66             break;
67     }
68     
69     conn.sendText(json.type+",注册成功");
70 
71 }
72 
73 
74 
75 function sendtoclient(clients,json,data) {
76     console.log("---------------------------------------------------------");
77      for(var key in clients){
78         var id = clients[key].key;
79         if(datas[id] == json.showid){
80             clients[key].sendText(data);
81             console.log("sendText="+data);
82         }
83         }   
84 
85     
86 }
View Code