Совместное использование веб-обозревателя через вкладки браузера?

Мы хотим иметь один сокет в браузере, а не один за вкладку в браузере. Как мы можем достичь этого? Я читал об общих веб-работниках, которые были многообещающими. Ссылка на это тоже приветствуется. К сожалению, общие веб-работники пока не реализованы mozilla или Internet Explorer, насколько мне известно. Так что делать в этом случае? Мы работаем над node.js на стороне сервера.

Ответ 1

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

Проверьте выпущенную проблему на https://github.com/flowersinthesand/portal/issues/21

Выход из файла cookie

  • Установить cookie, чтобы сообщить, что есть общий сокет.
  • Когда сокет закрывается, удалите этот файл cookie, чтобы сообщить, что нет общего сокета.

См. https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L629-650

Обмен и использование общего сокета

  • Использование события хранения и localStorage - LocalStorage запускает событие хранения, когда значение установлено и удалено.
    • Проверьте, поддерживаются ли StorageEvent и localStorage.
    • Добавить обработчик событий хранения, который фильтрует событие по ключу. Я использовал сокет url как ключ
    • Добавить событие сокета, которое удаляет атрибуты хранения
    • Чтобы сигнализировать, установите данные с предыдущей клавишей в хранилище

Обмен: https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L531-568

Использование общих: https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L851-893

  • Использование метода window.open. Если мы знаем общее имя окна, мы можем получить эту ссылку на окно и получить доступ к ее свойству.
    • Каждый браузер поддерживает метод window.open, но некоторые браузеры, такие как Chrome, запрещают доступ к свойствам возвращаемого окна.
    • Получить или создать iframe, чей атрибут имени является ключевым. Я использовал сокет-url, но заметьте, что IE не позволяет использовать символы без слова в атрибуте name тега iframe.
    • Iframe contentWindow - это общая ссылка на окно. Установите переменную callbacks для хранения каждого прослушивателя окна.
    • Чтобы сигнализировать, просто вызывайте обратные вызовы с данными. Обратите внимание, что IE 8 и менее позволяют передавать только строку в другую функцию окна, а общее окно может быть уничтожено.

Обмен: https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L571-605

Использование общих: https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L894-929

Примечание

  • В приведенной выше реализации передача сигналов широковещательно, поэтому данные должны указывать на цель. Я использовал свойство target, p для родителя и c для дочернего элемента.
  • Я использовал дополнительные переменные для совместного использования сокета: открыт - открыт ли общий сокет, детский - список разделяющих. Коды и комментарии помогут вам разобраться в деталях.

Надеюсь, мой ответ был полезен.

Ответ 2

Я использовал объект localStorage для связи между вкладками в некоторых случаях. У объекта localStorage есть система событий, чтобы сообщить другой вкладке или окну того же происхождения, что некоторые данные были изменены (http://www.codediesel.com/javascript/sharing-messages-and-data-across-windows-using-localstorage/). Идея заключается в том, чтобы вкладка с сокетом записывала временную метку и полученные данные в localstorage. Если временная метка становится слишком старой - возможно, потому что вкладка с сокетом была закрыта - другая вкладка может запустить сокет-соединение и обновить данные и временную метку.

Ответ 3

Я использую localStorage в качестве общего канала связи для отправки данных между вкладками, используя интерфейс, идентичный EventEmitters. В сочетании с алгоритмом выбора лидера, который решает, какая вкладка будет той, которая подключена к серверу, я передаю все события сокета на вкладку лидеров со всех вкладок следящего устройства и наоборот. И, наконец, вкладка лидеров пересылает все события на сервер и транслирует все полученные события всем другим клиентам. Здесь код:

Ответ 4

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

Подробнее см. http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/LocalConnection.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6.

Ответ 5

Lightstreamer (http://www.lightstreamer.com) уже может совместно использовать один и тот же сокет на нескольких вкладках для потоковой передачи HTTP (Comet). Эти же механизмы будут применены к WebSockets, через несколько недель с Lightstreamer Colosseo. [Полное раскрытие: я технический директор Lightstreamer]

Дайте ему играть в то же время, чтобы увидеть, как работает автоматическое соединение. Перейдите на демонстрационную страницу (http://www.lightstreamer.com/demos.htm) и нажмите "Запустить" в демо-версии. Появится новая вкладка с демо-версией. Нажимайте "Run" несколько раз, пока не получите желаемое количество вкладок. Все вкладки будут иметь один и тот же физический сокет. Только одна вкладка будет содержать фактическую конечную точку сокета. Вы можете определить его, посмотрев на верхний левый индикатор состояния (с зеленым светодиодом). Если он овальный (и показ показывает "Мастер-страница" ), тогда мастер-вкладка содержит общее соединение.

Теперь волшебство... Что произойдет, если вы закроете вкладку "Мастер"? Ну, другие вкладки обнаружат это и сделают элекцию, чтобы выбрать нового мастера, который создаст новое соединение и восстановит состояние. Попробуй, это весело...

Ответ 7

Не думайте, что существует решение, как теперь реализуется socket.io. Посмотрите Guillermo Rauch в это видео, пятый сегмент. Он тоже считает это проблемой.

Ответ 8

См. https://github.com/nodeca/tabex

Вам нужен дополнительный уровень для межстраничного общения. У Tabex есть пример использования Faye. Аналогичным образом можно использовать другие переносы websocket (socket.io и т.д.).

Ответ 9

Я все еще теоретизирую это для дизайна, который я собираюсь начать строить. Но я собираюсь объединить

-WebSockets -Локальное хранилище а также -Cross Window Messaging

Моя теория заключается в создании механизма сокета в javascript, который выполняется на каждой загрузке страницы на каждой вкладке, но будет закрыт, если у вас уже установлено соединение.

При первом попадании на сайт я создам GUID и сохраню его в локальном хранилище, этот указатель однозначно определит, что пользователи браузера/входа на ПК.

Когда сервер сокета принимает соединение, у него будет этот guid, и любой новый запрос этого guid вернет "Соединение 999 уже установленное" или что-то в этом роде.

Как только один из них будет запущен, он запустит другие вкладки с помощью обмена сообщениями в кросс-окнах, преобразуя данные, которые я хочу разделить на вкладки с помощью вкладок JSON, и затем преобразую их обратно в объект, когда он получен на других вкладках. Таким образом, в зависимости от того, какая вкладка получит соединение, будет обрабатываться все входящие/исходящие сообщения с сервером сокета. Затем он будет получать/передавать с помощью других вкладок в режиме обмена сообщениями в кросс-окнах. И теоретически это должно работать с окнами Iframe и Popup.

Вся эта система будет автоматически обновлять данные о загруженных формах для CRM, как система, которую мы создаем, и систему чата и билетную карточку.

Сценарий моей мечты, если пользователь A смотрит на билет 1000 и билет обновлений для пользователей B 1000 Я хочу, чтобы пользователь обновлял билет, и если пользователь A сделал изменения до его обновления, я хочу, чтобы они перенаправляли данные, предотвратить сдувание пользователя B изменено

- Пользователь B создал противоречивое изменение во время редактирования этой записи "UserB: FirstName → Bob" [Take] "UserA: FirstName → Robert" [Keep]