Как использовать *одно* соединение WebSocket на все вкладки?

Question

[pqgg7nwkd4]

Добрый день.

Хочу сделать так, чтобы мой сайт поддерживал web-socket соединение с сервером, но при этом только одно на все вкладки с моим сайтом.
Сразу вспомнился механизм общения между вкладками с помощью LocalStorage.
Но надежного механизма поддержания одного соединения я не придумал. Ведь пользователь может закрыть вкладку с соединением, нужно открыть новое. При этом вкладки должны как-то выбрать кто из них это сделает. И нужно чтобы сразу две не открыли.
Для моих представлений не хватает блокировок.

Подскажите, как бы вы сделали?

Comments

[RusQa24]

Добрый день, на каком решении в итоге остановились?

Answer 1

[RubaXa]

Есть js библиотека для запуска js только в одной вкладке?

Вам нужен Master/Slave, реализовать его можно использовав:
- SharedWorker + fallback в localStorage и/или LocalConnection (Flash) — это если самому
- BNC Connector — theprivateland.com/bncconnector/home.htm
- Intercom.js — https://github.com/diy/intercom.js/ (работа с сокетами из коробки)
- Wormhole.js — https://github.com/RubaXa/wormhole (в разработке, demo)

Сейчас ещё Service Worker можно добавить к этому списку.

Comments

[pqgg7nwkd4]

SharedWorker - интересно, жаль, что IE и Safari не поддерживает.
Все остальное это обертки к localStorage или костыли.
Спасибо.

[xmoonlight]

Спасибо! Отличная подборка!

[RubaXa]

pqgg7nwkd4 костыли? Что именно BNC Connector? Так это реализация TCP/IP поверх cookie, а вот localStorage как раз глючная технология и без костылей там никак.

Answer 2

[ComodoHacker]

Web Workers?

А вообще странные требования, зачем ограничивать пользователя?

Comments

[pqgg7nwkd4]

Причем здесь пользователь? Я через localStorage передам необходимую информацию на все вкладки. Держать несколько соединений малосмысленно.

Answer 3

[Atllantis]

Ну раз хотите только одно соединение на браузер, то при закрытии вкладки в которой активно соединение, открывайте новое соединение в другой вкладке. В чём проблема?
Можно сделать например так:
При установке соединения в LS указываете ID вкладки и время последнего обновления состояния.
В других вкладках проверяете время последнего обновления состояния. Если оно больше определённого промежутка - выбираем новую вкладку и открываем там соединение. Ну и всё по новой.

У меня правда было всё немного по другому...
Я делал свой "транспорт" между вкладками браузера через LS и в итоге мог свободно общаться между вкладками... И при закрытии вкладки, я отправлял сообщение другой случайной вкладке в которой и открывалось новое соединение.

Comments

[pqgg7nwkd4]

Все-равно гарантии того, что при закрытии вкладки две другие не откроют соединения нет. А как на практике оказывалось?

[pqgg7nwkd4]

Кстати, интересно на практике JS одного домена на разных вкладках может выполняться параллельно или нет?

[Atllantis]

pqgg7nwkd4: Что значит "паралельно"? JS начинает выполняться после загрузки скрипта.

[Atllantis]

pqgg7nwkd4: Так прежде чем устанавливать новое соединение проверьте, не установлено ли оно уже в другой вкладке...

[pqgg7nwkd4]

Atllantis: две вкладки могут достаточно одновременно проверить.

[Atllantis]

pqgg7nwkd4: Одна проверила - нет соединения, сразу пишет, что она установит соединение. Вторая проверяет - есть, ну и всё...

[xfg]

Вячеслав Юрьевич: Javascript в браузере работает в один поток, если поток заблокировать в одной вкладке то выполнение всех остальных подвиснет. Попробуйте, откройте две вкладки и в одной из напишите
while(true) console.log('do work');
В другой напишите любой javascript код и обратите внимание, что он не будет выполняться. Никакого состояния гонки быть не может. Поток один.

[pqgg7nwkd4]

xfg: Это гарантированное поведение?

[xfg]

pqgg7nwkd4: Да. Какой смысл при асинхронности иметь несколько потоков? Да даже если бы было несколько потоков, вы могли бы сделать простейший мьютекс на основе local storage.

Если у вас асинхронное подключение, то нужно сделать такой мьютекс, иначе с клиента может успевать уйти несколько запросов на подключение. Если подключение синхронное (блокирует поток), то никаких мьютексов не нужно.

Но вы же в курсе, что пользователь может открыть консоль браузера и вручную открыть столько соединений, сколько захочет (даже внутри одной вкладки), если этого не запрещает сервер?

[pqgg7nwkd4]

xfg: Понимаю, что пользователь может и бота написать. Задача, чтобы мой собственный сайт так не делал.

В каком стандарте написано, что "Javascript в браузере работает в один поток" для всех вкладок (пусть одного домена)?
Это важно.

[Stalker_RED]

pqgg7nwkd4: Не думаю что это есть хоть в каком-нибудь стандарте. Только что открыл два разных окна хрома, в одном написал

setInterval(function(){ console.log('test' + Math.random())}, 2000)

А в другом

setInterval(function(){ console.log('test' + Math.random())}, 2000)console.log('begin')
alert('stop')
console.log('end')

Так вот, алерт приостановил исполнение только для одной вкладки.

Answer 4

[Виктор]

Вот моя статья на эту тему https://habrahabr.ru/company/comet-server/blog/250719/

Comments

[pqgg7nwkd4]

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

[Виктор]

pqgg7nwkd4: В целом механизм работает. Возможно вместо LS можно использовать session storage.