如何将 Pusher Laravel Echo 与 SharedWorkers 一起使用？答案

【问题标题】：How can I use Pusher Laravel Echo with SharedWorkers?如何将 Pusher Laravel Echo 与 SharedWorkers 一起使用？
【发布时间】：2019-04-08 07:52:34
【问题描述】：

我试图让每个在我的应用程序上使用 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();
});

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

【问题讨论】：

任何控制台错误？
@Aaron3219，完全没有错误。
你还跑了npm install和npm run dev？我只是想确保设置了这些基础知识。
我只是不知道如何使用 Laravel 方法达到相同的结果。
是的，我总是在编辑我的 bootstrap.js 之后这样做。

标签： php laravel websocket echo pusher

【解决方案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");

【讨论】：