BS一机双屏的解决方案

一.WebSocket通讯

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

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

1.初始化Socket

[javascript]   view plain  copy   在CODE上查看代码片 派生到我的代码片
  1. loadSocket = function () {  
  2.  try {  
  3.         if ("WebSocket" in window) {  
  4.             ws = new ReconnectingWebSocket(url, null, { debug: true, maxReconnectAttempts: 10 });  
  5.         }  
  6.         else if ("MozWebSocket" in window) {  
  7.             ws = new MozWebSocket(url);  
  8.         } else {  
  9.             // document.getElementById("message_output").innerHTML = "浏览器不支持WebSocket";  
  10.         }  
  11.         ws.onopen = function ()   
  12.             //document.getElementById("message_output").innerHTML = "连接服务器成功" + "<br/>";  
  13.         }  
  14.         ws.onclose = function () {  
  15.             // document.getElementById("message_output").innerHTML = "与服务器断开连接" + "<br/>";  
  16.         }  
  17.         ws.onerror = function () {  
  18.             //document.getElementById("message_output").innerHTML = "通信发生错误" + "<br/>";  
  19.         }  
  20.         ws.onmessage = function (msg) {//接收到消息  
  21.             receiveSocketMessage(msg);  
  22.         }  
  23.     } catch (ex)  
  24.     { }  
  25. };  
2.接收Socket消息

[javascript]   view plain  copy   在CODE上查看代码片 派生到我的代码片
  1. receiveSocketMessage = function (msg) {  
  2.         var msgObj = JSON.parse(msg.data);  
  3.         var type = msgObj.type;  
  4.         var content = msgObj.content;  
  5.         console.log(msgObj);  
  6. };  

3.发送Socket消息

[javascript]   view plain  copy   在CODE上查看代码片 派生到我的代码片
  1. sendSocketMessage = function (msg) {//发送消息  
  2.         if (ws) {  
  3.             ws.send(msg);  
  4.         }  
  5. };  
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的技术应用,所以要注意兼容性。在合适的场景选择合适的技术。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值