使用共享工作线程扩展 WebSocket 连接
您可以在SharedWorker WebSocket 示例中找到本文的代码。
网络套接字
Web Sockets 允许客户端浏览器和服务器之间进行实时通信。它们与HTTP不同，因为它们不仅允许客户端向服务器请求数据，还允许服务器从服务器推送数据。…
ServiceWorker、MessageChannel 和 postMessage
ServiceWorker及其控制的网页之间共享消息。
- 客户端可能想要向a 发送消息
ServiceWorker、询问某事或通知某事– 这是“单播”（1 对 1） - A可能想要向客户端
ServiceWorker发送回复– 单播 - A
ServiceWorker可能想要向其控制下的每个客户端发送更新– 一条“广播”（一对多）消息 - A
ServiceWorker可能想要向发起请求的客户端发送更新– 单播
客户端页面和 Service Worker 之间的双向通信
Workbox 和 Preact 都与这个问题没有太大关系。Workbox 允许您在 Service Worker 中使用您想要的任何其他代码，而 Preact 也应该适用于您的客户端应用程序。）
此示例页面演示了使用 来从客户端页面向服务工作人员发送消息，然后进行响应MessageChannel。客户端页面上使用的相关帮助程序代码如下所示：
function sendMessage(message) {
return new Promise(function(resolve, reject) {
const messageChannel = new MessageChannel();
messageChannel.port1.Service worker 如何与客户端通信
问题:
我一直在尝试从服务人员向客户发送消息，但是如果我使用
self.clients.matchAll()
.then((clients) => {
clients.forEach(function(client) {
client.postMessage({msg: 'Hello from SW'})
})
})
即使我在浏览器中打开了一个选项卡，它也不会发送到任何客户端，但是如果我从客户端向服务工作者发送消息
// client
navigator.serviceWorker.controller.postMessage({title: 'Send message from client'})
并在服务人员中
self.addEventListener('message', function(event) {
self.clients.fetchAll()
.then((clients) => {
clients.forEach(function(client) {
client.postMessage({msg: 'Hello from SW'})
})
近期评论