如何在多个浏览器选项卡之间共享单个 WebSocket 连接?
我知道有多个建议 SharedWorker 的问题/帖子。然而,由于 SharedWorker 的采用率很低(根据Can I use在撰写本文时的数据,全球范围内只有 35%),这并不是一个可行的解决方案,更不用说它已经在 Safari 中被删除了。
我已经使用 SerivceWorker 实现了一个工作版本,它具有一些 SharedWorker 的功能,可以跨选项卡共享单个连接。不幸的是,在测试过程中,我意识到 ServiceWorker 可以被浏览器杀死/停止,特别是当开发工具未打开时。我还知道一些解决方法可以防止这种行为,例如定期 ping ServiceWorker。我想请问是否有适当的方法来处理这个问题。
在我看过的所有例子中,它们与此类似
onconnect = function(e) {
var port = e.ports[0];
port.onmessage = function(e) {
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
port.postMessage(workerResult);
}
port.start();
}
Run Code Online (Sandbox Code Playgroud)
是否存在ports数组将具有多个元素的实例?使用chrome://在SharedWorker上检查并打印出来e,我明白了
无论生成多少个共享SharedWorker的实例,其长度始终为1.为什么它不仅仅是MessageEvent而不是数组?它是一个数组的用例是什么?
我有一个服务器发送事件(SSE)实现,几乎没有任何问题。我遇到的唯一问题是“一个用户可以与服务器建立多个连接”。基本上,如果用户打开多个 Web 浏览器选项卡,每个选项卡都会创建一个全新的服务器发送事件请求到服务器,这会导致单个用户运行许多请求。
为了解决这个问题,我想在 Javascript 的SharedWorker中运行 SSE 。
这意味着我只有一个 SSE 与 SharedWorker 进行通信。然后,每个页面/网络浏览器都会与 SharedWorker 进行通信。这给了我只允许每个用户一个 SSE 的优势。
这就是我的 SSE 目前在没有任何类型的工作人员的情况下的工作方式。
$(function(){
//connect to the server to read messages
$(window).load(function(){
startPolling( new EventSource("poll.php") );
});
//function to listen for new messages from the server
function startPolling(evtSource){
evtSource.addEventListener("getMessagingQueue", function(e) {
var data = JSON.parse(e.data);
//handle recieved messages
processServerData(data);
}, false);
evtSource.onerror = function(e) {
evtSource.close();
};
}
});
Run Code Online (Sandbox Code Playgroud)
我希望运行相同的设置。然而,我想在 javascript 的 SharedWorker 中运行它,以消除每个用户拥有多个 SSE。
我正在努力实施 SharedWorker。这是我到目前为止所尝试的
我创建了一个名为的文件worker.js …
javascript jquery addeventlistener server-sent-events shared-worker
我想要在后台上传文件,一旦开始处理文件上传,就不会影响页面的主要使用。
除此之外,我们希望能够在不中断上传的情况下从执行上传的页面导航到应用程序中的其他页面。
我已经使用 Web worker/SharedWorker 实现了它,以在后台使用 XMLHTTPRequest post 请求将文件对象发送到服务器。在启动上传并且没有导航到其他页面时它工作正常。但是在从 page1.html 开始上传后导航到 page2.html 时, request.getPart() 在服务器端返回 null 并且上传失败。
使用sharedWorker提交的任务在导航到同一域中的其他页面时是否停止/暂停?
为什么 request.getPart() 在导航到其他页面时返回 null,因为在导航到同一域中的其他页面时,sharedWorker 仍必须运行?
我的应用程序的结构是:
我们如何实现以下功能:
任何链接/建议都将非常感激。
谢谢,曼普雷特
SharedWorker向@angular/cli >1.2生成的项目中添加的具体步骤是什么。我希望在TypeScript中定义SharedWorker(具有完整/正确的类型定义编辑器支持),与主项目共享接口,并与主项目一起进行连续编译和测试。
我还没有发现描述如何修改cli生成的项目以包含a Worker或a 的示例或博客文章SharedWorker。但是,有几篇文章(例如这篇文章)显示了如何转换整个cli生成的项目以将其作为Web worker运行。但这不是我的用例。
我想将与Lovefield数据库的交互限制SharedWorker在与主应用程序分开的进程中运行的。
尽管我做了一些尝试来弄清楚这一点,但并没有取得太大进展。希望有人可以节省我很多时间(以及将来的读者)。
是否可以从Web Worker调用共享工作者?
能不能给我举个例子.
在我的情况下,我有一些网络工作者,我需要在他们之间共享一个单独的服务.
互联网和 StackOverflow 上已经有很多关于 SharedWorker 的讨论和教程,但没有一个真正实现了最基本的目标——直接在两个共享 worker 之间传递数据。
对我来说,SharedWorker 相对于专用 Web Worker 的优势在于前者允许通过不同的选项卡、iframe 和线程进行直接通信。我尝试了以下方法:
(shared.html:)
<!DOCTYPE html><html><head></head><body>
<button onclick="init('a')">Initiate A</button>
<button onclick="init('b')">Initiate B</button>
<script>
var a,b;
function init(v) {
if (v=='a'){
a = (new SharedWorker('./shared.js')).port;
a.start();
a.postMessage({type:'start', port:b})
} else {
b = (new SharedWorker('./shared.js')).port;
b.start();
b.postMessage({type:'start', port:a}); // <== error here
}
}
</script></body></html>
Run Code Online (Sandbox Code Playgroud)
(共享.js)
let peer = null;
onconnect = function (ev) {
let port = ev.ports[0];
port.onmessage = (e) => {
if (e.data.type=='start' && e.data.port){
peer=e.data.port;
} else …Run Code Online (Sandbox Code Playgroud) 使用给定的 tsconfig.json,
{
"compilerOptions": {
"lib": ["es2015", "dom"]
},
"files": [
"./1_webworker/tstut.ts",
"./1_webworker/worker.ts"
]
}
Run Code Online (Sandbox Code Playgroud)
然npm install --save @types/sharedworker。
在下面的代码中(来自./1_webworker/tstut.ts),
let worker: Worker = new Worker('worker.js');
使用sharedworker语法,声明:
let worker: SharedWorker.SharedWorker = new SharedWorker('worker.js');
但下面是错误。
worker.postMessage('do some work'); // Property 'postMessage' does not exist on type 'SharedWorker'
worker.addEventListener('message', (e) => {
console.log(e.data); // Property 'data' does not exist on type 'Event'
});
Run Code Online (Sandbox Code Playgroud)
如何向sharedworker发送消息字符串?
javascript ×7
web-worker ×5
angular ×1
angular-cli ×1
java ×1
jquery ×1
lovefield ×1
typescript ×1
web ×1
webapi ×1
websocket ×1
worker ×1