一.WebSocket通讯
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与server全双工通信。
为保证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 = "连接server成功" + "<br/>"; } ws.onclose = function () { // document.getElementById("message_output").innerHTML = "与server断开连接" + "<br/>"; } ws.onerror = function () { //document.getElementById("message_output").innerHTML = "通信错误发生" + "<br/>"; } 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.应用场景
这样的方式能够做多台client的同步、前台与后台的同步,比方第一台client编辑的内容实时同步到第二台client。这时候就能够用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的技术应用。所以要注意兼容性。在合适的场景选择合适的技术。