HTML5+NodeJs实现WebSocket即时通讯

转自:https://www.cnblogs.com/axes/p/3586132.html

    最近都在学习HTML5,做canvas游戏之类的，发现HTML5中除了canvas这个强大的工具外，还有Websocket也很值得关注。可以用来做双屏互动游戏，何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏。这样的话就要用到实时通讯了，而WebSocket无疑是最合适的。WebSocket相较于HTTP来说，有很多的优点，主要表现在WebSocket只建立一个TCP连接，可以主动推送数据到客户端，而且还有更轻量级的协议头，减少数据传送量。所以WebScoket暂时来说是实时通讯的最佳协议了。

    至于服务器语言选择nodeJs，一是因为自己是做前端的，对javascript比较熟悉，相比于其他后台语言，自然会更喜欢nodeJs了，二是NodeJs本身事件驱动的方式很擅长与大量客户端保持高并发的连接。所以就选择NodeJs了。

    服务器的实现很简单，先装一个nodeJs的模块，叫nodejs-websocket,直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了(注意，如果npm安装不了的话，可以试试cnpm来安装此模块)，然后就可以开始建立服务器了，因为有了nodejs-websocket模块，所有很多工作都不用我们自己做，直接调用别人封装好的方法就好了。

    【服务端代码,可以命名为server.js】,根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象。

var ws = require("nodejs-websocket");
console.log("开始建立连接...")

var game1 = null,game2 = null , game1Ready = false , game2Ready = false;
var server = ws.createServer(function(conn){
    conn.on("text", function (str) {
        console.log("收到的信息为:"+str)
        if(str==="game1"){
            game1 = conn;
            game1Ready = true;
            conn.sendText("success");
        }
        if(str==="game2"){
            game2 = conn;
            game2Ready = true;
        }

        if(game1Ready&&game2Ready){
            game2.sendText(str);
        }

        conn.sendText(str)
    })
    conn.on("close", function (code, reason) {
        console.log("关闭连接")
    });
    conn.on("error", function (code, reason) {
        console.log("异常关闭")
    });
}).listen(8001)
console.log("WebSocket建立完毕")

如下截图:

【game1代码，命名为game1.html】：通过点击获取三个框的内容，传到服务器

    
    
    


    
正在连接...
    

        
小明小明
        
大胸大胸
        
小张小张
    

    

截图如下:

【game2代码】：获取服务推送来的消息，并且显示:

截图如下:

运行截图:

代码非常简单：很容易看懂，nodejs-WebSocket的调用也非常简洁明了，具体nodejs-websocket的API可以看https://www.npmjs.org/package/nodejs-websocket，里面都有介绍，自己测试一下，就很容易了，客户端的实现也是很简单，就通过onopen,onmessage等几个方法就可以实现了。