Несколько способов реализации связи между несколькими вкладками

внешний интерфейс JavaScript браузер WebSocket

效果图.gif
Примеры адреса

prologue

  • Я уже видел в Интернете вопрос из интервью: Как реализовать связь между несколькими вкладками в браузере. В настоящее время я думаю о трех методах: с использованием протокола websocket, через локальное хранилище и с помощью SharedWorker, новой функции браузера html5.
  • Веб-сокет здесь не будет. Полнодуплексная связь может естественным образом реализовать связь между несколькими вкладками. Я считаю, что в Интернете есть много руководств по реализации чатов через веб-сокет. Я также написал его с помощью socket.io Oneонлайн чат
  • Далее будут представлены два других метода: прослушивание локального хранилища и использование SharedWorker.

localstorage

  • Localstorage — это пространство для хранения, совместно используемое несколькими вкладками браузера, поэтому его можно использовать для реализации связи между несколькими вкладками (ps: сеанс — это пространство хранения на уровне сеанса, и каждая вкладка является отдельной).
  • Просто добавьте прослушиватель непосредственно к объекту окна:
window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))
  • Последние события и хранения, для обоихнетекущая страницаОн будет запущен только при изменении localStorage, а текущая модификация страницы localStorage не вызовет функцию прослушивателя. Затем он будет срабатывать при изменении значения исходных данных.Например, уже есть localStorage со значением ключа b, и вы можете выполнить:localStorage.setItem('a', 'b')Код также не запускает функцию прослушивателя.

webworker

  • Все мы знаем, что JavaScriptодин потокДа, но в браузере есть несколько потоков, например: поток рендеринга GUI, поток JS-движка, поток триггера события, поток асинхронного HTTP-запроса.
  • В качестве новой функции браузеров webworker может предоставитьдополнительная нитьвыполнить некоторый код js, не затрагивая пользовательский интерфейс браузера.
  • Сценарий приложения: например, если страница содержит трудоемкий код алгоритма, это заблокирует поток и повлияет на отрисовку браузера и т. д. В это время трудоемкий код можно поместить в веб-воркер (другой поток) для выполнения.
  • Обратите внимание, что эта возможность многопоточности не является родной для языка JavaScript, а предоставляется средой размещения браузера.
  • Обычный веб-воркер использует напрямуюnew Worker()может быть создан, этот веб-воркерТекущая страницасобственность. Затем есть общий рабочий (SharedWorker), который может использоваться несколькими вкладками и фреймами.Далее мы расскажем, как использовать SharedWorker для связи между вкладками.

SharedWorker

  • SharedWorker может использоваться несколькими окнами, но эти вкладки должны иметь одно и то же происхождение (один и тот же протокол, хост и номер порта).
  • Сначала создайте новый файл jsworker.js, конкретный код выглядит следующим образом:
// sharedWorker所要用到的js文件，不必打包到项目中，直接放到服务器即可
let data = ''
onconnect = function (e) {
  let port = e.ports[0]

  port.onmessage = function (e) {
    if (e.data === 'get') {
      port.postMessage(data)
    } else {
      data = e.data
    }
  }
}

  • Код на стороне веб-воркера (на данный момент) такой же, как и выше, просто зарегистрируйте событие onmessage для прослушивания информации, и оно будет запущено, когда клиент (то есть с помощью вкладки sharedWorker) отправит сообщение.

  • Обратите внимание, что webworker нельзя использовать локально из-за механизма безопасности самого браузера, поэтому мой пример на этот раз также размещен на сервере,worker.jsа такжеindex.htmlв том же каталоге.

    image

  • Поскольку связь между клиентом и веб-воркером не является полнодуплексной, как веб-сокет, клиент отправляет и получает данные в два этапа. Кнопок в примере будет две, соответствующих запросу на отправку данных в sharedWorker и запросу на получение данных, но по сути это одно и то же событие — отправить сообщение.

  • Решение принимает сторона веб-воркера. Когда переданные данные «получаются», он возвращает значение переменной data клиенту. В других случаях данные, переданные клиентом, будут храниться в переменной данных. Вот код клиента:

// 这段代码是必须的，打开页面后注册SharedWorker，显示指定worker.port.start()方法建立与worker间的连接
    if (typeof Worker === "undefined") {
      alert('当前浏览器不支持webworker')
    } else {
      let worker = new SharedWorker('worker.js')
      worker.port.addEventListener('message', (e) => {
        console.log('来自worker的数据：', e.data)
      }, false)
      worker.port.start()
      window.worker = worker
    }
// 获取和发送消息都是调用postMessage方法，我这里约定的是传递'get'表示获取数据。
window.worker.port.postMessage('get')
window.worker.port.postMessage('发送信息给worker')
  • Страница А отправляет данные работнику, затем открывает страницу Б и вызываетwindow.worker.port.postMessage('get'), вы можете получить данные, отправленные страницей А в воркер.
  • Ссылаться на:developer.Mozilla.org/this-cn/docs/…
Категории