一.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的技术应用。所以要注意兼容性。在合适的场景选择合适的技术。

BS一机双屏的解决方式的更多相关文章

  1. 使用Reveal来查看别人的APP界面+白苹果不刷机解决方式

    Reveal这个强大的界面调试工具.能够实时查看.改动view的属性,大体上实现了iOS程序猿梦寐以求的功能.比方,有时候我们加入了一个view,可是那个view死活不显示出来,这时候祭出Reveal ...

  2. Mac OS X 10.10, Eclipse+ADT真机调试代码时,Device Chooser中不显示真机的解决方式

    Mac OS X 10.10的环境下.Eclipse+ADT,进行真机调试时,会出现一个问题. Device Chooser对话框里不显示真机设备,仅仅有又一次插拔数据线才干够. 经过測试.有两个暂时 ...

  3. 批处理安装Windows服务,提示"InstallUtil.exe"不是内部命令也不是外部命令解决方式

    今天在测试一个C#写的windows服务的时候,在用bat进行调用cmd安装的时候, cd C:\Windows\Microsoft.NET\Framework\v2.0.50727 InstallU ...

  4. 浏览器关闭使session失效的问题多种解决方式

    直接关闭浏览器(或者强制关闭浏览器进程.死机等),服务器无法处理用户退出网站的请求,此举将会导致session失效,下面整理了一些解决方法,感兴趣的朋友可以参考下哈   如果用户不点击网站的“退出”链 ...

  5. NAT的全然分析及其UDP穿透的全然解决方式

    NAT的全然分析及其UDP穿透的全然解决方式   一:基本术语 防火墙 防火墙限制了私网与公网的通信,它主要是将(防火墙)觉得未经授权的的包丢弃,防火墙仅仅是检验包的数据,并不改动数据包中的IP地址和 ...

  6. Linux转发性能评估与优化-转发瓶颈分析与解决方式(补遗)

    补遗 关于网络接收的软中断负载均衡,已经有了成熟的方案,可是该方案并不特别适合数据包转发,它对server的小包处理非常好.这就是RPS.我针对RPS做了一个patch.提升了其转发效率. 下面是我转 ...

  7. ssh远程登录报错REMOTE HOST IDENTIFICATION HAS CHANGED!解决方式及原因

    注意,文档中的ip和指纹已经替换为了ip.ip.ip.ip 和aa:... ,以免引起不必要的误会. icode@test:~/lab/dir/sadf$ ssh remote_name@ip.ip. ...

  8. Linux转发性能评估与优化(转发瓶颈分析与解决方式)

    线速问题 非常多人对这个线速概念存在误解. 觉得所谓线速能力就是路由器/交换机就像一根网线一样. 而这,是不可能的.应该考虑到的一个概念就是延迟. 数据包进入路由器或者交换机,存在一个核心延迟操作,这 ...

  9. Uiautomator--出现报错“urllib3.exceptions.ProtocolError:<'Connection aborted.',error<10054,''>>”的解决方式!

    在运行uiautomator时,出现报错"urllib3.exceptions.ProtocolError:<'Connection aborted.',error<10054, ...

随机推荐

  1. senfile函数实例的运行过程截图

    //要传输的文件内容如下所示: 启动服务器,等待客户端连接(在同一台主机上模拟的) 客户端远程登录,这里是在本地登录 这个要注意一点就是远程登陆的时候一定要带上端口号不然连接失败!!

  2. 使用Navicat连接阿里云服务器上的MySQL数据库=======Linux 开放 /etc/hosts.allow

    使用Navicat连接阿里云服务器上的MySQL数据库   1.首先打开Navicat,文件>新建连接> 2,两张连接方法 1>常规中输入数据库的主机名,端口,用户名,密码 这种直接 ...

  3. 让浏览器下载文件http头部

    网站提供下载服务时经常需要实现一个强制下载功能(即强制弹出下载对话框),并且文件名保持和用户之前上传时相同. 效果如下图:  Content-Disposition 使用 HTTP Header 的 ...

  4. eclipse 编译tomcat8.0.26的源码

    第一次写东西, 如果有不对的地方,请大神指正,我会尽快修正…… 参考:http://www.cnblogs.com/lanxuezaipiao/p/3640923.html 1.从tomcat官网(h ...

  5. 面向对象分析和设计(OOA/D)

    UML不是OOA/D,也不是方法,它仅仅是一种图形表示法(表示的是OOA/D的想法),我们将在OOA/D中应用UML:分析,就是理解客户脑子中的概念,跟客户来沟通,分析出专业术语:设计,对分析出来的专 ...

  6. 工业级别sd卡存贮slc mlc tlc

    slc mlc tlc SLC = Single-Level Cell ,即1bit/cell,速度快寿命长,价格超贵(约MLC 3倍以上的价格),约10万次擦写寿命 MLC = Multi-Leve ...

  7. VBS 移除excel数据公式,只保留值

    如果将excel数据公式移除,只保留计算之后的值,将大大减少excel文件. 因为有上篇移除excel外部数据链接的经验,进行excel数据公式移除将快的多,方法如下. 首先我们得明白怎么手动移除ex ...

  8. ubuntu16.04 安装 eclipse

    1. 下载jdk , jdk-8u77-Linux-x64.tar.gz 2.下载 eclipse  , eclipse-jee-mars-2-linux-gtk-x86_64.tar.gz 注:我下 ...

  9. MongoDB基本用法

    MongoDB基本用法(增删改高级查询.mapreduce) 分享一下我经常用到的自己写的mongo用法示例 该示例基于当前最新的mongo驱动,版本为mongo-2.10.1.jar,用junit写 ...

  10. php7 宏杂记

    php.h                                 zend_api.h ZEND_FN(name) ---> zif_##name PHP_FUNCTION(name) ...