HTML5神器Canvas vs WebSocket：双屏互动游戏真相揭秘

WebSocket与实时通讯

最近学了下HTML5，觉得自己超牛的！HTML5里头有个神器Canvas，能做出超炫的游戏！但你知道吗？它不是唯一的法宝，还有个更厉害的家伙——WebSocket。这个东西可以帮我们玩双屏互动游戏！

什么是双屏互动游戏

看来，这个双屏互动游戏就是用手机等移动设备来玩电脑上的网页游戏哟~简而言之，就是咱们通过手机来遥控电脑上玩儿的游戏。不过，别小看它，它可是需要实时通信才能实现。说到这里，那WebSocket肯定就是最好的搭档！

WebSocket与HTTP的区别

说起WebSocket跟HTTP，那可真的有讲头在里面！WebSocket比HTTP强太多。最关键的差别在于怎么建连！HTTP老是要反复从头建起，累死人！但是WebSocket就不同了，只需搭好一个TCP的桥梁就能搞定所有事情，还能随时主动给客户端发料！而且它的协议头部轻巧得很，数据传输速度飞快！

NodeJs为何是首选

嘿，选服务器语言当然选NodeJs！首先，我就是干前端这块儿的，JavaScript这东西我再熟悉不过了！而跟别的后端语言比，我就觉得NodeJs更亲近些。再者，NodeJs是事件驱动的，处理大批量客户端高并发链接特别牛逼，别纠结，赶紧用它！

简单搭建NodeJs服务器

想要设置 NodeJs 服务器是很轻松的事儿~首先安装一个名为”nodejs-websocket”的模块！在 NodeJs 的指令控制台输入 npm install nodejs-websocket再点击确定就能搞定！然后照着手册上的步骤开始建站！借助这个插件，大部分工作都能直接套用其他人做好的代码，咱们根本不需要操心！

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或者game2），然后把连接对象保存好。

    
    
    
        .kuang{text-align: center;margin-top:200px;}
        #mess{text-align: center}
        .value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;}
    
    
正在连接...
    

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

    
        var mess = document.getElementById("mess");        
        if(window.WebSocket){            
        var ws = new WebSocket('ws://192.168.17.80:8001');
            ws.onopen = function(e){
                console.log("连接服务器成功");
                ws.send("game1");
            }
            ws.onclose = function(e){
                console.log("服务器关闭");
            }
            ws.onerror = function(){
                console.log("连接出错");
            }
            ws.onmessage = function(e){
                mess.innerHTML = "连接成功"
                document.querySelector(".kuang").onclick = function(e){                    
                var time = new Date();
                    ws.send(time + "  game1点击了“" + e.target.innerHTML+"”");
                }
            }
        }    

game1代码

看着这个游戏的第一关代码，可得小心点操作！你只需要轻轻一点就能获取到三个方块里的信息，然后上传给服务器去处理就行了。

game2代码

    
    
    
        .kuang{text-align: center;margin-top:200px;}
        #mess{text-align: center}
    
    

    
        var mess = document.getElementById("mess");        
        if(window.WebSocket){            
        var ws = new WebSocket('ws://192.168.17.80:8001');
            ws.onopen = function(e){
                console.log("连接服务器成功");
                ws.send("game2");
            }
            ws.onclose = function(e){
                console.log("服务器关闭");
            }
            ws.onerror = function(){
                console.log("连接出错");
            }
            ws.onmessage = function(e){                
            var time = new Date();
                mess.innerHTML+=time+"的消息："+e.data+"
"
            }
        }    

瞧瞧这个Game 2的编码！就是用来接收服务器发来的信息，然后呈现给大家。

HTML5中的WebSocket实时通讯真的牛到家，双屏互动游戏肯定用得上。别等啦赶紧学！