BS一机双屏的解决方案

一.WebSocket通讯

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信。

为保证socket不间断，使用以下类库进行socket通讯。https://github.com/joewalnes/reconnecting-websocket

1.初始化Socket

loadSocket = function () {
 try {
        if ("WebSocket" in window) {
            ws = new ReconnectingWebSocket(url, null, { debug: true, maxReconnectAttempts: 10 });
        }
        else if ("MozWebSocket" in window) {
            ws = new MozWebSocket(url);
        } else {
            // document.getElementById("message_output").innerHTML = "浏览器不支持WebSocket";
        }
        ws.onopen = function () 
            //document.getElementById("message_output").innerHTML = "连接服务器成功" + "
";
        }
        ws.onclose = function () {
            // document.getElementById("message_output").innerHTML = "与服务器断开连接" + "
";
        }
        ws.onerror = function () {
            //document.getElementById("message_output").innerHTML = "通信发生错误" + "
";
        }
        ws.onmessage = function (msg) {//接收到消息
            receiveSocketMessage(msg);
        }
    } catch (ex)
    { }
};

2.接收Socket消息

receiveSocketMessage = function (msg) {
        var msgObj = JSON.parse(msg.data);
        var type = msgObj.type;
        var content = msgObj.content;
        console.log(msgObj);
};

3.发送Socket消息

sendSocketMessage = function (msg) {//发送消息
        if (ws) {
            ws.send(msg);
        }
};

4.应用场景

这种方式可以做多台客户端的同步、前台与后台的同步，比如第一台客户端编辑的内容实时同步到第二台客户端。这时候就可以用socket通讯。

但是一机双屏用这种方式需要过多关注socket后台的控制。所以采用第二种方式实现

二.localStorage

通过监听localStorage的数据变化实现同一浏览器下不同页面之间的通讯，比脚本函数直接控制更加便捷。（跨域不适用，需要结合postmessage）

推荐lsbridge库直接进行应用。https://github.com/krasimir/lsbridge

1.发送消息

lsbridge.send('my-namespace', { message: 'Hello world!' });

2.监听消息

lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); })

3.应用场景

比如同时打开业务系统和地图系统，定位地图，绘图内容返回到业务平台等应用。

三.总结

两种方式都是html5的技术应用，所以要注意兼容性。在合适的场景选择合适的技术。