HTML5+NodeJs实现WebSocket即时通讯

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

具体为活动抽奖案例：

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

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

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

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

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

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

服务器代码：

/*远程控制开始----------------------------------------------*/

var ws = null;

function init_connect() {

if(ws == null){

// 取得WebSocket连接入口(WebSocket URI)

var target = "ws://"+window.location.hostname+":8000";

// 创建WebSocket

if ('WebSocket' in window) {

ws = new WebSocket(target);

} else if ('MozWebSocket' in window) {

ws = new MozWebSocket(target);

} else {

alert('本浏览器不支持远程控制功能，请使用支持HTML5的浏览器。');

return;

}

// 定义Open事件处理函数

ws.onopen = function () {

setConnected(true);

reg_luck();

select_luckstate();

};

// 定义Message事件处理函数(收取服务端消息并处理)

ws.onmessage = function (event) {

processMessage(event.data)

console.log('Received: ' + event.data);

};

// 定义Close事件处理函数

ws.onclose = function () {

ws = null;

setConnected(false);

};

}

}

// 关闭WebSocket连接

function disconnect() {

if (ws != null) {

ws.close();

ws = null;

}

setConnected(false);

}

function setConnected(connected) {

if(connected){

console.log('Info: WebSocket connection opened.');

}

else{

console.log('Info: WebSocket connection closed.');

}

}

function reg_luck(){

if (ws != null) {

var message = {action:"reg",type:"luck_show","showid":"<?php echo $configluck['LuckId']; ?>"}

// 向服务端发送消息

var msg =JSON.stringify(message);

console.log(msg);

ws.send(msg);

} else {

init_connect();

}

}

function processMessage(msg){

var data=msg;

if(typeof(msg) == "string"){

try{

data = JSON.parse(msg);

}catch(e){

console.log(msg);

return;

}

}

if(data.action=="luckcontrol"){ //来自抽奖控制页面的命令

console.log('luckcontrol: '+msg);

select_luckstate();

}

if(data.action=="luckok"){ //来自手机客户端的命令

console.log('luckok: '+msg);

update_luck_show(msg);

}

if(data.action=="luckend"){//来自手机客户端的命令

console.log('luckend: '+msg);

update_luck_show(msg);

}

}

View Code

手机客户端

代码类似...