Добро пожаловать в серию Обязательно знать JavaScript API. Эта серия поможет вам изучить JavaScript API, чтобы вы могли более эффективно использовать его, как старший инженер. Начнем учиться вместе:

🏝 1. Быстрый старт

1.1 Введение

Channel Messaging API — это API для двунаправленной связи между окнами или вкладками браузера. Он основан на механизме обмена сообщениями, который позволяет создавать каналы связи в различных контекстах для безопасной отправки и получения сообщений. Эти контексты могут быть разными окнами, вкладками или разными фреймами на одной странице.

1.2 Пример использования

Channel Messaging API очень полезен во многих сценариях. Ниже приведены некоторые распространенные сценарии использования:

  • Межоконные коммуникации

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

  • Связь между документами

Если веб-страница содержит несколько фреймов iframe, каждый из которых представляет отдельный документ, API обмена сообщениями канала можно использовать для связи между этими фреймами для обмена данными и синхронизации операций.

  • Общение с веб-работниками

Web Workers — это механизм для запуска JavaScript в фоновом потоке, а API Channel Messaging можно использовать для эффективного взаимодействия между основным потоком и Web Workers для обмена данными и выполнения совместных вычислений.

🎨 2. Как пользоваться

Channel Messaging API очень прост и интуитивно понятен в использовании. Вот пример кода, который показывает, как создать канал и отправлять сообщения.

// Create a channel in the first window
const channel = new MessageChannel();

// Get the two ports of the channel
const port1 = channel.port1;
const port2 = channel.port2;
// Listening for message events
port1.onmessage = function (event) {
  console.log("Received message:", event.data);
};
// Send a message to the second window
port2.postMessage("Hello, Second window!");

В этом примере мы сначала создаем канал, а затем получаем два порта port1 и port2 из этого канала. Мы можем получать сообщения из других окон, прослушивая onmessage событие port1, и мы можем отправлять сообщения в другие окна, вызывая метод postMessage и передавая содержимое сообщения.

🧭 3. Примеры

Channel Messaging API имеет широкий спектр практических применений, особенно в следующих сценариях:

3.1 Совместное редактирование в нескольких окнах

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

// Window 1 code
const channel = new MessageChannel();
const port1 = channel.port1;
port1.onmessage = function (event) {
  console.log("Window 1 receives the message.", event.data);
};

// Window 2 Code
const port2 = channel.port2;
port2.postMessage("Message sent by window 2");

3.2 Междоменная связь

Связь между страницами с разными доменами или разными протоколами обычно не допускается, но с помощью Channel Messaging API можно безопасно передавать сообщения между этими страницами.

// Page 1 code
const iframe = document.createElement("iframe");
iframe.src = "https://www.example.com/page2.html";
document.body.appendChild(iframe);

const channel = new MessageChannel();
const port1 = channel.port1;
port1.onmessage = function (event) {
  console.log("Page 1 receives the message.", event.data);
};
iframe.contentWindow.postMessage("Message sent by page 1", "*", [
  channel.port2,
]);
// Page 2（https://www.example.com/page2.html）
window.addEventListener(
  "message",
  function (event) {
    const port = event.ports[0];
    port.onmessage = function (event) {
      console.log("Page 2 receives the message.", event.data);
    };
    port.postMessage("Message sent by page 2");
  },
  false 
);

3.3 Приложения для видеоконференций или чата

Channel Messaging API можно использовать для передачи аудио- и видеоданных в реальном времени и обмена данными между различными окнами или вкладками для реализации видеоконференций или приложений чата.

// Window 1 code
const channel = new MessageChannel();
const port1 = channel.port1;
port1.onmessage = function (event) {
  console.log("Window 1 receives the message.", event.data);
};

// Window 2 code
const port2 = channel.port2;
port2.postMessage("Message sent by window 2");

📋 4. Совместимость, преимущества и недостатки

4.1 Совместимость

Это списки совместимости для Channel Messaging API, включая основные браузеры и минимальные версии, которые они поддерживают:

  • Хром 4+✅
  • Фаерфокс 41+✅
  • Сафари 5+✅
  • Граница 12+✅
  • Опера 11.5+✅
  • IE 10+✅

Подробности можно узнать на сайте caniuse.com.

4.2 Плюсы и минусы

Channel Messaging API имеет следующие преимущества и некоторые ограничения:

Преимущества:

  • Эффективный обмен сообщениями: Channel Messaging API предоставляет эффективный механизм обмена сообщениями для быстрой отправки и получения сообщений в разных контекстах.
  • Безопасность: Channel Messaging API обеспечивает безопасный способ взаимодействия с вредоносным кодом, поскольку обмен данными происходит между одним и тем же источником или между источниками, которым доверяют обе стороны.

Ограничения:

  • Ограниченная сфера взаимодействия: Channel Messaging API может обмениваться данными только между одним и тем же источником или надежными источниками, что ограничивает его применение междоменной связью.
  • Зависимости между окнами. При многооконном взаимодействии порядок создания и закрытия окон может привести к сбоям связи или непредсказуемым результатам.

4.3 工具推荐

  • DevTools：2.7K ⭐ Интерфейс Chrome DevTools
  • Comlink：9,7K ⭐ Comlink делает WebWorkers приятным.
  • Postmate：1.8K ⭐ 📭 Мощная, простая, основанная на промисах библиотека postMessage.

🎯 5. Рекомендации и соображения по использованию

Я собрал некоторые предложения и соображения:

  • Обеспечение безопасности связи. Поскольку связь осуществляется между различными контекстами, убедитесь, что вы общаетесь только с надежными источниками, чтобы предотвратить нарушения безопасности и злонамеренное поведение.
  • Рассмотрите междоменные ограничения. В сценариях, связанных с междоменной связью, изучите и соблюдайте политику междоменной безопасности браузера или используйте соответствующее междоменное решение.
  • Следите за порядком открытия и закрытия окон. При многооконном общении убедитесь, что порядок открытия и закрытия окон правильно управляется, чтобы избежать проблем при общении.
  • Выполняйте правильную обработку ошибок и исключений: обрабатывайте ошибки и исключения, которые могут возникнуть во время передачи сообщений, чтобы повысить устойчивость и надежность приложения.

🍭 6. Резюме

Channel Messaging API предоставляет разработчикам механизм для безопасной и эффективной связи между различными окнами или страницами. Используя этот API, мы можем реализовать обмен сообщениями между документами для обмена данными и совместной работы в разных контекстах.

📚 7. Расширения

Если вам нравится изучать JavaScript, вы можете подписаться на меня в Medium или Twitter, чтобы узнать больше о JavaScript!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .