Одно websocket соединение на несколько вкладок

На проекте возникла необходимость реализовать оповещения. Долго выбирали между реализациями и все-таки я решил остановиться на веб-сокетах, ибо они для этого и придуманы. Учитывая ограниченные ресурсы на количество соединений и огромный пул пользователей, необходимо было как-то уменьшить количество коннектов. Здесь было три варианта:

  • Хранить соединение в LocalStorage и шарить его между вкладками
  • Использовать Shared WebWorkers для хранения соединения

WebWorkers это еще новая необкатанная технология и работа с API веб-сокетов появится только в 36 версии фаерфокса при том, что текущая - 35. Посему выбор пал на LocalStorage.

Реализацию на sharedSockets можно посмотреть здесь: https://github.com/amIwho/socketsLS или более сложно: https://github.com/gonzalo123/wsww

Я выбрал пакет ws для реализации сокетов на сервере потому что она больше всего похожа на нативную работу с ними. socket.io уж очень высокий уровень абстракций.

Для начала я реализовал Socket Echo:

// server.js
  wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
      console.log('received: %s', message);
      ws.send(message, function(err) {
          if (err) {
              console.log(err);
          }
      });
    });
  });

С выводом на странице:

  $result = $('#result');
  webSocket.onmessage = function(e) {
          var msg = JSON.parse(e.data);
          $result.html('<b>' + msg.title + '</b><p>' + msg.message + "</p>");
      };

В качестве образца реализации я выбрал Atmosphere.js. Это единственная библиотека которую я знаю где это реализовано.

https://raw.githubusercontent.com/Atmosphere/atmosphere-javascript/master/modules/javascript/src/main/webapp/javascript/atmosphere.js

Яндекс.Метрика