背景
        这次想开发一个双屏互动的案例，考虑到数据实时性及ajax轮询对服务器的压力，尝试用websocket来实现。
        自行搭建websocket服务，时间成本和技术成本较高，故寻找第三方服务。经检索，发现goeasy、LeanCloud、野狗云，三家“实时通信引擎”服务商，分析文档考虑价格、便捷性，决定用野狗。

项目分析
        “我和女神的故事”H5的玩法逻辑是：
        第一步，用户A进入链接显示二维码“页面一”；
        第二步，用户B扫描二维码配对成功显示“页面三”，用户A则显示“页面二”；
        第三步，用户B点击送花按钮，鲜花由“页面三”飞入“页面二”，实现屌丝给女神送花互动。


        开发思路（二维码->配对成功->开始互动）：
        第一部手机，随机生成roomID（创建房间）；
        第二部手机，通过roomID（扫描二维码）进行匹配；
        第二部手机，点击交互，两部手机分别播放相应动画。

        数据库结构：
        一级：room
        二级：         roomID（唯一性）
        三级：                        pairState（配对状态 false/true）  
                                         emitState（发射状态 false/true）
        数据在野狗里显示为下图：
        

实现
        按照野狗的文档，先初始化实例，分为三步，第一步创建应用，第二步安装SDK（cocos要导为插件，如果是html直接引入javascript即可），第三步创建Sync实例。
        用户A代码部分，
        写入数据，set() 方法用于向指定节点写入数据，
        // 用户A，创建房间
        var roomID = this.getRandChar(3); // 房间ID,时间戳+随机数
        ref.child("rooms/" + roomID).set({
            "pairState": false, // 初始化配对状态
            "emitState": false  // 初始化发射状态 
        }, function(error) {
            if (error == null){
                // 数据同步到野狗云端成功完成
                // 显示出二维码“页面一”
            }
        });
（生成二维码的方法见《html5网页及Cocos中生成二维码》）
        监听数据，on() 或 once() 方法用于监听节点的数据，update() 方法用于更新指定子节点，
        // 用户A，监测配对状态
        ref.child("rooms/" + roomID + "/pairState").on('value', function(data) { 
            if(data.val()){
                // 配对成功，显示“页面二”
            }
        }, function(error) {
        });
        // 用户A，监测发射状态
        ref.child("rooms/" + roomID + "/emitState").on('value', function(data) { 
            if(data.val()){
                // 监测到发射状态为true，播放“收到鲜花”的动效

                // 恢复发射状态为false
                ref.child("rooms/" + roomID).update({
                    "emitState": false
                }, function(error) {
                    if (error == null){
                        // 数据同步到野狗云端成功完成
                    }
                });
            }
        }, function(error) {
        });

        用户B代码部分，
        // 用户B，更新配对状态
        this.roomID = this.getUrlParam("roomID"); // 通过扫描二维码打开带有房间ID参数的链接，获取房间ID
        
        this.ref.child("rooms/" + this.roomID).update({
            "pairState": true
        }, function(error) {
            if (error == null){
                // 数据同步到野狗云端成功完成
                // 配对成功，显示“页面三”
            }
        });
        点击送花按钮，
        // 用户B，更新发射状态
        this.ref.child("rooms/" + this.roomID).update({
            "emitState": true
        }, function(error) {
            if (error == null){
                // 数据同步到野狗云端成功完成
                // 播放“送出鲜花”的动效
            }
        });
        要注意一点，在写代码时一定要把访问数据的路径写对。
        在cocos里鲜花用到了对象池和动画，没有什么难点。以上就完成了项目。

Demo二维码
        

BTW
        1、通过这次Demo发现，这是个纯前端的开发，根本没涉及到接口和数据库。这种“无后端开发”对于轻量级的H5开发来说确实便捷，接口数据库这些都不需要自行开发，会节省大量的开发时间。
        2、野狗是分服务等级的，对日活跃设备数有限制。正式项目的开发，要考虑流量及成本来决定是否采用此服务。
        3、分析几个“双屏互动H5案例”（链接在底部），案例2奔驰采用的websocket、案例3杜蕾斯用的ajax，所以双屏互动开发websocket并不是唯一的选择。后续分享一篇使用阿里云（ECS+RDS）实现交互的博文。

参考链接
        野狗说明文档：https://docs.wilddog.com/sync/Web/index.html
        goeasy说明文档：http://goeasy.io/resources/www/docs/goeasy-reference-0.1.18-cn.pdf
        LeanCloud说明文档 ：https://leancloud.cn/docs/js_realtime.html
        高大上的双屏互动，你玩过了吗？【双屏互动H5欣赏】：https://www.iguoguo.net/2015/58411.html
        WebSocket实现多屏互动的分析及方案：https://blog.csdn.net/u012889638/article/details/50586783
        简单理解Socket：http://www.cnblogs.com/dolphinX/p/3460545.html
        leancloud和野狗有什么区别，优势在哪？：https://www.zhihu.com/question/37301314

       为什么创业公司不再需要后端工程师？：
https://cn.technode.com/post/2015-03-16/do-not-need-backend-engineer/

// NetWebSocket.js

const msgpack = require("msgpack-lite");

var NetWebSocket = cc.Class({
    
    extends: cc.Component,
    
    properties: {
        wServersURL: null, //连接的服务器地址
        wSocket: null,
        netType: null
    },
    statics: {
        createWebSocket:function(_netType) {
            var self = new NetWebSocket();
            self.netType = _netType;
            return self;
        }
    },
    
    connectServer:function(wUrl) {
        this.wServersURL = wUrl;
        this.wSocket = new WebSocket(wUrl);  //  "ws://192.168.8.110:1234"
        // 为这个 WebSocket 对象制定对应的回调函数
        this.wSocket.onopen = this.onopen.bind(this);
        this.wSocket.onmessage = this.onmessage.bind(this);
        this.wSocket.onclose = this.onclose.bind(this);
        this.wSocket.onerror = this.onerror.bind(this);
    },

    onopen:function(evt){
        console.log("连接服务器成功");
    },

    onclose:function(evt){
        console.log("与服务器断开");
        this.close();
    },
       
    onerror:function(evt){
        console.log("连接服务器失败");
        this.close();
    },
    close:function() {
        if (this.wSocket) {
            this.wSocket.close();
        }
        this.wSocket = null;
    },

    isConnectServer:function(){
        //readyState属性返回实例对象的当前状态，共有四种。
        //CONNECTING：值为0，表示正在连接。
        //OPEN：值为1，表示连接成功，可以通信了。
        //CLOSING：值为2，表示连接正在关闭。
        //CLOSED：值为3，表示连接已经关闭，或者打开连接失败

        if (!this.wSocket) { return false; }
        if (this.wSocket.readyState !== WebSocket.OPEN) { return false; }
        return true;
    },
    //接收服务器数据

    onmessage:function(evt) {

        if (evt.data instanceof ArrayBuffer !== true) {

                 console.error("msg type is wrong: " + typeof evt.data);

                  return;

        }

         let array = new Uint8Array(evt.data);

        if (array instanceof Uint8Array !== true) {

                 console.error("msg context type is wrong: " + typeof evt.data);

                  return;

        }

        let msgUint8 = this.analysis(array);

        const backMsg = msgpack.decode(msgUint8);

        if (typeof backMsg !== "object") {

                 console.error("backMsg decode type is wrong: " + typeof backMsg);

                  return;

        }

        console.log("正常接收数据：" + JSON.stringify(backMsg));

    },

    analysis: function(tmpUint8) {

       if(!tmpUint8) { //解析对象为空

             return;

        }

        if(tmpUint8.length < 12) { //头信息长度不够

             return;

        }

        let n0 = tmpUint8[0];

        let n1 = tmpUint8[1];

        let n2 = n0 + 256*n2 + 12;

        if (n2 > tmpUint8.length) {  //数据长度不够

                return;

        }

        let msgUint8 = tmpUint8.slice(12, n2);//正常解析

        return msgUint8;

    },



    //发送数据

    sendData:function(data){

        console.log("发送数据：" + JSON.stringify(data));

        const buffer = msgpack.encode(data);

        let msgLength = buffer.length;

        let len = this.jsToCByShort(msgLength);

        let curTime = parseInt(Date.now() / 1000);

        let time = this.jsToCByInt(curTime);

        let msgId = this.jsToCByInt(data.msgId * ((curTime % 10000) + 1));

        let checksum = this.getCheckSum(time + msgId, msgLength, buffer);

        let msgToSend = len + checksum + time + msgId;

        let msg = this.stringToUint8Array(msgToSend);

        let array1 = Array.prototype.slice.call(msg);

        let array2 = Array.prototype.slice.call(buffer);

        let array = array1.concat(array2);

        let msg_ = new Uint8Array(array);

        this.wSocket.send(msg);

    },

    jsToCByShort:function(value) {

       return String.fromCharCode(value % 256) + String.fromCharCode(Math.floor(value /             256));

    },

    jsToCByInt:function(value) {

       const lowByte1 = String.fromCharCode(Math.floor(value / (256 * 256 * 256)));

       const lowByte2 = String.fromCharCode(Math.floor(value / (256 * 256)) % 256);

       const lowByte3 = String.fromCharCode(Math.floor(value / 256) % 256);

       const lowByte4 = String.fromCharCode(value % 256);

       return lowByte4 + lowByte3 + lowByte2 + lowByte1;

    },

    getCheckSum:function(time, msglength, msgPackData) {

       let crc = "";

       let len = time.length + msglength;

       if (len < 8) {

            crc = this.CRC(time + msgPackData, len);

      } else {

            crc = this.CRC(time + msgPackData, 8);

      }

      return this.jsToCByShort(crc);

    },

    CRC:function(data, length) {

       let sum = 65535;

       for (let i = 0; i < length; i++) {

              let d = data[i].charCodeAt();

              sum = this.ByteCRC(sum, d);

       }

       return sum;

    },

    ByteCRC:function(sum, data) {

        sum = sum ^ data;

        for (let i = 0; i < 3; i++) {

               if (sum & 1 === 0) {

                       sum = sum / 2;

               } else {

                        sum = (sum / 2) ^ 0x70B1;

               }

        }

        return sum;

    },

    stringToUint8Array:function(str) {

       let arr = [];

       for (let i = 0, j = str.length; i < j; i++) {

               arr.push(str.charCodeAt(i));

       }

       let tmpUint8Array = new Uint8Array(arr);

       return tmpUint8Array;

    },

});   


module.exports = NetWebSocket;








msgpack-lite 添加方式： https://blog.csdn.net/themagickeyjianan/article/details/90711087

下载地址：https://www.bootcdn.cn/msgpack-lite/

下载地址：https://github.com/kawanet/msgpack-lite

前言
相信大家在做web项目的时候可能都会遇到某些信息弹窗，提醒之类的功能，最简单粗暴的方式就是轮询，比如每秒浏览器从服务器发起http请求，然后服务器返回最新的结果过来。所以这种一直循环方式有很大的缺陷，浪费带宽资源、被动、单向。因为HTML5定义了WebSocket协议，WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，简单来说能够达到客户端与服务端的双向，更多的介绍大家可以去网上搜搜，就不多说了，下面开始做一个.net的WebSocket的服务端。
开始写服务端
为了简单的实现我们的效果，这里我是建一个WinForm项目作为我们的服务端
（一）新建一个.net framework4.5的WinForm项目

（二）选择一个适合自己的第三方websocket库
打开万能的开源项目网站https://github.com选择下载一款自己喜欢的websocket开源库，这里我用的是WebSocket-Sharp（里面也有相关的使用说明文档），看个人喜好，至于每种库的好坏对比，就不评论了。



将https://github.com/sta/websocket-sharp下载下来，打开项目，生成编译，然后将生成的dll引用到我们项目里面来。

这里要特别说明下websocket-sharp的核心WebSocketBehavior，他包含了OnOpen,OnMessage，OnClose,OnError四个方法以及一个Sessions对象。熟悉websocket的都知道前四个方法是用来处理客户端链接、发送消息、链接关闭以及出错。sessions就是用来管理所有的回话连接。每产生一个连接，都会有一个新Id，sessions中会新增一个IWebSocketSession对象。当页面关闭或者刷新都会触发OnClose，继而sessions中会移除对应的IwebSocketSession对象。


（三）自定义新增一个继承WebSocketBehavior的处理类
新增一个TestHandler类，继承WebSocketBehavior，TestHandler相当于是一个websocket的服务，你可以创建多个websocketBehavior的实例然后在挂载在websocketServer上。
    public class TestHandler : WebSocketBehavior
    {
        public Label lbUserCount;
        public TextBox showText;
        private Dictionary<string, string> nameList = new Dictionary<string, string>();
        protected override void OnOpen()
        {
            base.OnOpen();
            AppendValue("建立连接" + this.ID + "\r\n");
            nameList.Add(this.ID, "游客" + Sessions.Count);
            Broadcast(string.Format("{0}上线了，共有{1}人在线", nameList[this.ID], Sessions.Count), "3");
            ShowCount();

        }
        protected override void OnMessage(MessageEventArgs e)
        {
            base.OnMessage(e);
            string strMsg = e.Data;
            
            try
            {
                var obj = JsonConvert.DeserializeObject<ReceiveMsg>(strMsg);
                AppendValue("收到消息：" + obj.Message + " 类型：" + obj.MsgType + "id:" + this.ID + "\r\n");
                switch (obj.MsgType)
                {
                    //正常聊天
                    case "1":
                        obj.UserName = nameList[this.ID];
                        Sessions.Broadcast(JsonConvert.SerializeObject(obj));
                        break;
                    //修改名称
                    case "2":
                        AppendValue(string.Format("{0}修改名称{1} \r\n", nameList[this.ID], obj.Message));
                        Broadcast(string.Format("{0}修改名称{1}", nameList[this.ID], obj.Message), "3");
                        nameList[this.ID] = obj.Message;
                        break;
                    default:
                        Sessions.Broadcast(strMsg);
                        break;

                }
            }
            catch (Exception exception)
            {
                Console.WriteLine(exception);
            }
        }
        protected override void OnClose(CloseEventArgs e)
        {
            base.OnClose(e);
            AppendValue("连接关闭" + this.ID + "\r\n");
            Broadcast(string.Format("{0}下线，共有{1}人在线", nameList[this.ID], Sessions.Count), "3");
            nameList.Remove(this.ID);
            ShowCount();
        }


        /// <summary>
        /// 广播（群发）
        /// </summary>
        /// <param name="msg"></param>
        /// <param name="type"></param>
        private void Broadcast(string msg, string type = "1")
        {
            var data = new ReceiveMsg() { Message = msg, MsgType = type, UserName = nameList[this.ID] };
            Sessions.Broadcast(JsonConvert.SerializeObject(data));
        }
        /// <summary>
        /// 在线人数
        /// </summary>
        private void ShowCount()
        {
            //this.lbUserCount.Text = Sessions.Count.ToString();
            // 无返回值无参数用MethodInvoker委托，无返回值可有参数用Action委托，有返回值可有参数用Func委托
            lbUserCount.BeginInvoke(new Action<string>(msg => lbUserCount.Text = msg),
                new object[] { Sessions.Count.ToString() });
        }
        public void AppendValue(string strValue)
        {
            // 无返回值无参数用MethodInvoker委托，无返回值可有参数用Action委托，有返回值可有参数用Func委托
            showText.BeginInvoke(new Action<string>(msg => showText.Text += msg+DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")),
                new object[] { strValue });
        }


    }

From窗体代码
    public partial class Form1 : Form
    {
        private WebSocketServer wssv;
        private bool isStart = false;
        public Form1()
        {
            InitializeComponent();
            this.ShowListenStatus();
        }
        /// <summary>
        /// 启动
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void button1_Click(object sender, EventArgs e)
        {
            try
            {
                wssv = new WebSocketServer(Convert.ToInt32(textBox1.Text));
                wssv.AddWebSocketService<TestHandler>("/Test/", p =>
                {
                    p.lbUserCount = this.lbUserCount;
                    p.showText = this.showText;
                });
                wssv.Start();
                isStart = true;
                this.showText.Text += "连接成功！" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "\r\n";
                this.ShowListenStatus();
            }
            catch (Exception ee)
            {
                MessageBox.Show(ee.Message);
            }
        }

        /// <summary>
        /// 停止
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void button2_Click(object sender, EventArgs e)
        {
            wssv.Stop();
            isStart = false;
            this.lbUserCount.Text = "0";//重置为0
            this.showText.Text = "";//清空
            this.showText.Text += "连接断开！"+DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") +"\r\n";
            
            ShowListenStatus();
        }
        private void ShowListenStatus()
        {
            this.button2.Enabled = isStart ? true : false;
            this.button1.Enabled = isStart ? false : true;
        }
    }

运行测试效果


（四）写一个html5的聊天页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="scripts/jquery.js"></script>
<title>测试在线聊天</title>
</head>
 
<body>
 <div id="messages">
    </div>
	   <div>昵称：<input type="text" id="nickName"  /> <button id="changebt">修改</button> 
   </div>
   <div>消息内容：<input type="text" id="content" value=""/>
   <button id="sendbt">发送</button>
   </div>
</body>
<script type="text/javascript">
    function initWS() {
        ws = new WebSocket("ws://localhost:9600/Test");
        ws.onopen = function (e) {
            console.log("Openened connection to websocket");
            console.log(e);
        };

        ws.onmessage = function (e) {
            console.log("收到",e.data)
            var div=$("<div>");
            var data=JSON.parse(e.data);
            switch(data.MsgType){
                case "1":
             div.html(data.UserName+":"+data.Message);
            break;
                case "2":
                div.addClass("gray");
                div.html("修改名称"+data.Message)
                break;
                case "3":
                div.addClass("gray");
                div.html(data.Message)
                break;
            }
            $("#messages").append(div);
        };
		ws.onerror = function (msg) {

                console.log("socket error!");
        };
    }
    
    initWS();
    function sendMsg(msg,type){
        ws.send(JSON.stringify({Message:msg,MsgType:type}));
    }
    $("#sendbt").click(function(){
       var text=$("#content").val();
       sendMsg(text,"1")
       $("#content").val("");
    })
    $("#changebt").click(function(){
        var text=$("#nickName").val();
        sendMsg(text,"2")
    })
</script> 
</html>

测试截图


下面提供本项目相关的下载地址

websocket-sharp.dll：https://download.csdn.net/download/shaojiayong/12903143

项目完全源码（包含页面）：https://download.csdn.net/download/shaojiayong/12903215

1、WebSocket 机制 

    以下简要介绍一下 WebSocket 的原理及运行机制。 

WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯，它建立在 TCP 之上，同 HTTP 一样通过 TCP 来传输数据，但是它和 HTTP 最大不同是： 

WebSocket 是一种双向通信协议，在建立连接后，WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据，就像 Socket 一样； 

WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接，连接成功后才能相互通信。

WebSocket 是类似 Socket 的 TCP 长连接的通讯模式，一旦 WebSocket 连接建立后，后续数据都以帧序列的形式传输。在客户端断开 WebSocket 连接或 Server 端断掉连接前，不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。 

2、WebSocket在iOS中的具体实现（俩种：一种是直接下载托进项目，另一种是借助cocopod安装 pod ‘SocketRocket’） 

安装完成之后 我们只需要在需要用的地方调用SocketRocket代理方法即可： 

@interface ViewController () 

//初始化 

- (void)Reconnect 

{

self.webSocket.delegate = nil;
[self.webSocket close];
self.webSocket = [[SRWebSocket alloc] initWithURLRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"此处为服务器域名和端口号"]]];
self.webSocket.delegate = self;
self.title = @"连接服务器成功";
[self.webSocket open];


}

// —–SRWebSocketDelegate 

-(void)webSocketDidOpen:(SRWebSocket *)webSocket 

  {

  NSLog(@"Websocket Connected");
  self.title = @"Connected!";


} 

  //连接失败 

-(void)webSocket:(SRWebSocket )webSocket didFailWithError:(NSError )error

NSLog(@"error --> %@", error);
self.title = @"Connection Failed! (see logs)";
self.webSocket = nil;


} 

//接收从服务器传来的消息 

-(void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message 

{

NSLog(@”message –> %@”, message);

} 

//连接关闭 

-(void)webSocket:(SRWebSocket )webSocket didCloseWithCode:(NSInteger)code reason:(NSString )reason wasClean:(BOOL)wasClean 

{

NSLog(@"Closed Reason:%@",reason);
self.title = @"Connection Closed! (see logs)";
self.webSocket = nil;


} 

- (void)webSocket:(SRWebSocket )webSocket didReceivePong:(NSData )pongPayload 

{

NSString *reply = [[NSString alloc] initWithData:pongPayload encoding:NSUTF8StringEncoding];
NSLog(@"%@",reply);


} 

当需要发送给服务器消息时候只需要调用SocketRocket方法 

- (void)sendPing:(NSData *)data; 

- (void)send:(id)data; 

前者是发送UTF8格式的字符串或数据的，后者直接发送数据，并且可以为空 

webSocket一般是配合数据库一起使用的,实现的逻辑要根据具体情况来确定的. 

以上就是webSocket SocketRocket，其中如果有什么问题还希望大家能不吝赐教，谢谢！！！