HTML5+NodeJs实现WebSocket即时通讯

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

具体为活动抽奖案例：

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

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

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

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

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

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

服务器代码：

var ws = require("nodejs-websocket")
var net = require('net')

var clients_luck_show= new Array();
var clients_luck_control= new Array();
var clients_luck_client= new Array();
var datas= new Array();


// Scream server example: "hi" . "HI!!!"
var server = ws.createServer(function (conn) {
    conn.on("text", function (str) {
        onData(str,conn);
    })
    conn.on("close", function (code, reason) {
        onDisconnect();
    })
})
server.listen(8000)


function onDisconnect(){
    console.log("connect close");
    clients_luck_show.length=0;
    clients_luck_control.length=0;
    clients_luck_client.length=0;
}

function onData(data,conn){
    console.log("data="+data);

        //conn.sendText(str);
    var json = JSON.parse(data);       
        switch (json.action){
            case "reg":
                regClient(JSON.parse(data),conn);
                break;
            case "luckcontrol":
             sendtoclient(clients_luck_show,json,data);
                sendtoclient(clients_luck_client,json,data);
                break;
            case "luckok":
                sendtoclient(clients_luck_show,json,data);
                break;
            case "luckend":
                sendtoclient(clients_luck_show,json,data);
                sendtoclient(clients_luck_control,json,data);
                sendtoclient(clients_luck_client,json,data);
                break;
            
        }
}

function regClient(json , conn){
    var id = conn.key;
    datas[id] = json.showid;
    switch (json.type){
        case "luck_show":
            clients_luck_show[conn.key]=conn;
            break;
        case "luck_client":
            clients_luck_client[conn.key]=conn;
            break;
        case "luck_control":
            clients_luck_control[conn.key]=conn;
            break;
    }
    
    conn.sendText(json.type+"，注册成功");

}



function sendtoclient(clients,json,data) {
    console.log("---------------------------------------------------------");
     for(var key in clients){
        var id = clients[key].key;
        if(datas[id] == json.showid){
            clients[key].sendText(data);
            console.log("sendText="+data);
        }
        }   

    
}

主持人控制端js代码

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

        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_control();

                };  

                // 定义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_control(){

            if (ws != null) {  

                var message = {action:"reg",type:"luck_control",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=="luckend"){

                init_page();

            }

        }

大屏端js代码

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

    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);

        }

    }

 

手机客户端

代码类似...