多个tab页如何共享websocket

假设你正在做一个在线的IM系统，如何在多个tab页之间，共享一个websocket实例呢？

sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。

当时遇到这个问题，第一感觉是懵逼。我的知识储备告诉我，多个tab页面之间，是不能共享websocket实例的。挠破头皮想到了两个方案

在用户打开多个tab页面时，新的页面中，不建立websocket连接。然后多tab页之间进行消息通讯。这个方案会带来这么几个问题
- 多tab之间如何通讯
- 怎么判断打开的是不是第一个需要建立连接的页面
- 如果关闭了第一个页面，那么之后的消息怎么处理
在两个页面都能访问到的地方，维持一个websocket连接，然后这个websocket连接接收到消息后，向两个页面发送消息。

所以，现在的问题就是，在什么地方维持websocket连接。

难受的时，当时完全没有一点想法。只好灰溜溜的过了这个题。

面试完，百度一下答案，发现了一丝端倪，共享线程SharedWorker。

这个玩意儿，可以发起网络请求，并且可以在多个页面之间共享。

具体代码如下

// index.html
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head>
<body>
<button id="btn"> CLICK ME</button>
<script>var worker = new SharedWorker('worker.js');
worker.port.onmessage = function (e) {console.log(e);
};
document.getElementById('btn').addEventListener('click', function (e) {// 点击按钮时，通过port发送消息到shared workerworker.port.postMessage('nihao' + Math.random());
});
</script>
</body>
</html>// worker.js
var portList = [];
var ws;function getWsInstance () {var ws = new WebSocket("ws://echo.websocket.org");ws.onopen = function (evt) {};ws.onmessage = function (evt) {// 当websocket接收到消息时，通过portList中存放的port，// 将数据推送到主线程portList.forEach(port => {port.postMessage(evt.data);});};ws.onclose = function (evt) {};return ws;
}// 当主线程调用new SharedWorker时，就会触发onconnect事件
onconnect = function (e) {// 当触发了这个事件时，就建立对应的websocket连接ws = ws || getWsInstance();var port = e.ports[0];// 然后把这个连接对应的port放在portList中portList.push(port);port.addEventListener('message', function (evt) {ws.send(evt.data);});port.start();};

多个tab页如何共享websocket相关推荐

不同tab页sessionStorage共享情况
不同tab页sessionStorage共享情况先看MDN的描述: 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话. 在新标签或窗口打开一个页面时会复制顶级浏览会话的 ...
在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
Vue+Element实现tab页多页面切换
效果图GIF 源码地址 https://gitee.com/marlife/nav-tags.git 已经上传到Gitee(码云),代码拉下来之后: 1.执行安装命令:npm install 2.执行 ...
[转]sessionStorage在同一网站多个标签页内共享数据吗？这取决于标签页如何打开
文章转载自:https://github.com/lmk123/blog/issues/66 ----------------------------------------------------- ...
解决通过vue-router打开tab页，下次进入还是上次history缓存的界面状态的问题
一.问题描述: 1. 跳转模式:界面A-->界面B(界面A中通过 this.$router.push({name:'组件B名称', params: {参数}}) 通过打开新tab页的方式打开界面 ...
局部刷新时间 jsp_局部区块多个报表 TAB 页切换及局部区块的参数查询
在企业的业务系统中,如何从纷繁复杂的数据中抽丝剥茧看到关键数据信息呢?一个重要的途径就是将企业和各部门运营中关键的 KPI 集中在一起显示,同时尽量省去在企业的各个业务系统中分别查找数据. 下面是我近 ...
tab 页形式展现多张报表
业务系统中,很多报表都是沿用之前 EXCEL 的报表样式,原来以 sheet 格式显示的表,客户在 web 端展现的时候也希望也有同样的格式,润乾在实现这种效果和 EXCEL 一样简单灵活,轻松将数据 ...
js css3实现tab,div+css+js实现tab页
实现tab页并水平居中 ruby { font-size:60px; color:red; font-family:微软雅黑; } .tab { border:solid 1px; border-co ...
easyui中tab页中js脚本无法加载的问题及解决方法
我发现tab页中<script src="xxx.js">方式加载的脚本没有生效,firebug看请求也没有请求相应的脚本文件. 单独在浏览器中打开tab页中的页面js ...

多个tab页如何共享websocket

多个tab页如何共享websocket相关推荐

最新文章

热门文章