Websockets+ один экземпляр + кросс-таблица связи лучший способ?

Question

Я использую веб-сокеты для передачи сообщений JSON, но я не хочу, чтобы несколько ws-соединений были открыты, если открыто несколько вкладок.

Чтобы уменьшить количество подключений, я хочу реализовать один объект подключения ws, который может отправлять / получать сообщения со всех вкладок на моем веб-сайте. Объект должен переслать json на все вкладки, и каждая вкладка будет обрабатывать сообщение.

Я смотрел на веб / общих / сервисных работников, и я не уверен, что путь 2018 года для решения проблемы, и поддержка браузера, кажется, также вызывает беспокойство.

Похоже, общие работники не поддерживаются в Safari для поддержки сервисных работников. Похоже, что Chrome / FF / Opera поддерживает общих работников.

Короче говоря, это немного сбивает с толку, немного путаницы, и я хочу знать лучший путь вперед с лучшей поддержкой.

Если вы знаете хороший ресурс, пример кода для реализации ws с вашим предложенным методом, пожалуйста, предоставьте его.

Answer 1

После дальнейших исследований я решил внедрить веб-работников.

На данный момент у меня есть успех, и я хотел добавить важную часть, которую я застрял для будущих читателей.

В моем файле worker.js я поместил это в начало, чтобы все началось. Функция importScripts выдала ошибку, если я не сделал этого иначе.

Также ради справки, это мой скелетный код в моем файле worker.js, который работает. Обработка сообщений со страниц html отделена от сообщений ws, полученных с сервера. Вы можете начать, остановить работника со страницы HTML.

Все вкладки будут получать сообщения от работника, каждая страница должна обрабатывать сообщения по мере необходимости.

Я также использую надежные веб-сокеты, чтобы он автоматически переподключался с этого github, так как этот код работает с веб-работниками и поддерживается. Есть еще один проект с таким же именем, который не был обновлен ко времени публикации. Переподключение-websockets не поддерживает веб-работников, и вы получите ошибку. - https://github.com/nathanboktae/robust-websocket

HTML

<script>
document.addEventListener('DOMContentLoaded', init);

function init(){
    worker = new Worker('js/ws_worker.js');
    worker.addEventListener('message', workerMessaged);

    worker.postMessage({ "args": '<username_admin>', "cmd": 'start', "url": '127.0.0.1:8000' });
    worker.postMessage({ "message": 'Initialize new worker'});
    console.log('Message posted to worker, start');
}

// Received a json message from the Worker, process it.
function workerMessaged(ev){
    console.log('Message received from worker');
    console.log(ev.data);
    worker.postMessage({ "cmd": 'message', "message": 'Sending reply over ws'});
}

worker.js

// proper initialization
if( 'function' === typeof importScripts) {
importScripts('robust-websocket.js');

var WebSocket;


self.addEventListener("message", function(e) {
    var args = e.data.args;
    var cmd = e.data.cmd;
    var roomName = e.data.args;
    var url = e.data.url;
    var message = e.data;
    // Code to process ws messages from the server
    WebSocket.onmessage = function(event) {
        console.log(" WebSocket message received: " + event.data, event);
        self.postMessage(event.data);
    };

    WebSocket.onerror = function(event) {
        console.log(" WebSocket message received: " + event.data, event);
        self.postMessage(event.data);
    };

    if (cmd === 'start') {
        WebSocket = new RobustWebSocket(
        'ws://' + url +
        '/ws/' + roomName + '/');

        console.log('Connected via websockets');

        /* Send initial message to open the connection and finalize the ws object*/
        WebSocket.onopen = function() {
            var obj = { "message": "hello" };
            var json = JSON.stringify(obj);
            WebSocket.send(json);
        };

    } else if (cmd === 'stop') {
        WebSocket.onclose = function() {
            console.log('Closing WebSocket');
            WebSocket.close();
            console.log('Closed WebSocket');
            console.log('Terminating Worker');
            self.close(); // Terminates the worker.
        };

    } else if (cmd === 'message') {
        WebSocket.onopen = function() {
            var json = JSON.stringify(message);
            WebSocket.send(json);
        };
        console.log('message sent over websocket');
        console.log('message');

    } else {
        console.log('logging error ' + e.data);
        console.log(e.data);
        self.postMessage('Unknown command: ');
    }

}, false);

};