Как я могу использовать Pusher Laravel Echo с SharedWorkers? - PullRequest
Новая
       59

Как я могу использовать Pusher Laravel Echo с SharedWorkers?

3 голосов
/ 08 апреля 2019

Я пытаюсь сохранить только одно активное соединение для пользователя, который открывает несколько вкладок в моем приложении, которое использует 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();
});

Он работает, но не так, как я хочу, он создает новое соединение для каждой открытой вкладки.

1 Ответ

2 голосов
/ 16 апреля 2019

Как указано в ссылке, которую вы указали сами: https://blog.pusher.com/reduce-websocket-connections-with-shared-workers/, вам необходимо импортировать определенную версию pusher для использования работника: 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");
...