Question

我试图在每个使用Laravel Echo使用Pusher的应用程序中打开多个选项卡的用户中，仅保持一个连接处于活动状态，通过遵循以下文章和示例项目，我能够使其在测试项目中正常工作。

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");

如何将Pusher Laravel Echo与SharedWorkers结合使用？

1 个答案: