php - 如何将 Pusher Laravel Echo 与 SharedWorkers 一起使用？

Question

我试图让每个在我的应用程序上打开多个选项卡的用户只保持一个连接事件，该应用程序使用 Pusher 和 Laravel Echo，我能够按照下面的文章和示例项目让它在测试项目上工作。

https://blog.pusher.com/reduce-websocket-connections-with-shared-workers/ https://github.com/pusher-community/pusher-with-shared-workers

但我很难尝试调整它以适应我的 Laravel 项目，我应该怎么做？

这是我添加到我的bootstrap.js 文件中的配置

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

$.getJSON( "/heartbeat", function( json ) {

    window.Echo.channel('user.' + json.user_id).listen('NotifyUser', e => {
        displayModal(e.msg);
        console.log('User with an id of ' + e.id + ' has been notified.');
        console.log(e);
        // Relay the message on to each client
        clients.forEach(function(client){
          client.postMessage(data);
        });
    });

});

self.addEventListener("connect", function(evt){

  // Add the port to the list of connected clients
  var port = evt.ports[0];
  clients.push(port);

  // Start the worker.
  port.start();
});

它正在工作，但不是我想要的方式，它正在为每个打开的选项卡创建一个新连接。

Answer 1

如您自己提供的链接中所述:https://blog.pusher.com/reduce-websocket-connections-with-shared-workers/ ，需要导入特定版本的pusher才能使用worker:pusher.worker.js。

所以，转到这里:https://github.com/pusher/pusher-js/tree/master/dist/worker

并下载 pusher.worker.min.js 。将它放在与您的 boostrap.js 相同的目录中并要求它。而不是:

window.Pusher = require('pusher-js');

使用

importScripts("pusher.worker.min.js");