واجهة برمجة تطبيقات Channel Messaging

تسمح Channel Messaging API لأطر iframes والعاملين بالتواصل مع سلسلة المستندات الرئيسية ، عن طريق تمرير الرسائل

مقدمة إلى Channel Messaging API

نظرًا لوجود نصين برمجيين يعملان في نفس المستند ، ولكن في سياق مختلف ، تسمح واجهة برمجة تطبيقات Channel Messaging API بالتواصل عن طريق تمرير الرسائل عبر قناة.

تتضمن حالة الاستخدام هذه الاتصال بين

  • المستند و iframe
  • اثنين من إطارات iframe
  • وثيقتين

كيف تعمل

الاتصالnew MessageChannel()قناة الرسالة مهيأة.

const channel = new MessageChannel()

القناة لها خاصيتان ، تسمى

  • المنفذ 1
  • المنفذ 2

هذه الخصائص هي كائن MessagePort.port1هو المنفذ الذي يستخدمه الجزء الذي أنشأ القناة ، وport2هو المنفذ الذي يستخدمه مستقبل القناة (بالمناسبة ، القناة ثنائية الاتجاه ، لذلك يمكن للمستقبل إرسال الرسائل مرة أخرى أيضًا).

في كل طرف من طرفي القناة تستمع على منفذ واحد ، وترسل الرسائل إلى المنفذ الآخر.

يتم إرسال الرسالة من خلال

otherWindow.postMessage()

الطريقة حيثotherWindowهو سياق التصفح الآخر.

يقبل الرسالة والأصل والميناء.

على سبيل المثال:

const data = { name: 'Flavio' }
const channel = new MessageChannel()
window.postMessage(data, [channel.port2])

يمكن أن تكون الرسالة أيًا من تلك القيم المدعومة:

"الأصل" هو URI (على سبيل المثالhttps://example.org). يمكنك استخدام'*'للسماح بفحص أقل صرامة ، أو تحديد مجال ، أو تحديد'/'لتعيين هدف نفس المجال ، دون الحاجة إلى تحديد المجال الذي هو عليه.

يستمع سياق التصفح الآخر للرسالة باستخدام امتدادmessageحدث:

self.addEventListener('message', event => {
  console.log('A new message arrived!')
})

selfهو نفس استخدامwindowفي هذه الحالة

داخل معالج الأحداث ، يمكننا الوصول إلى البيانات المرسلة من خلال النظر إلى ملفdataخاصية كائن الحدث:

self.addEventListener('message', event => {
  console.log('A new message arrived!')
  console.log(event.data)
})

يمكننا الرد مرة أخرى باستخدامMessagePort.postMessage:

self.addEventListener('message', event => {
  console.log('A new message arrived!')
  console.log(event.data)

const data = { someData: ‘hey’ } event.ports[0].postMessage(data) })

يمكن إغلاق القناة باستدعاءclose()طريقة المنفذ:.

self.addEventListener('message', event => {
  console.log('A new message arrived!')
  console.log(event.data)

const data = { someData: ‘hey’ } event.ports[0].postMessage(data) event.ports[0].close() })

مثال مع iframe

فيما يلي مثال على اتصال يحدث بين مستند وiframeجزءا لا يتجزأ من ذلك.

يعرّف المستند الرئيسي ملفiframeو أspanحيث سنطبع رسالة مرسلة منiframeوثيقة. حالماiframeتم تحميل المستند ، فنرسل له رسالة علىchannelلقد أنشأنا.

<!DOCTYPE html>
<html>
  <body>
    <iframe src="iframe.html" width="500" height="500"></iframe>
    <span></span>
  </body>
  <script>
    const channel = new MessageChannel()
    const display = document.querySelector('span')
    const iframe = document.querySelector('iframe')
<span style="color:#a6e22e">iframe</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">'load'</span>, () =&gt; {
  <span style="color:#a6e22e">iframe</span>.<span style="color:#a6e22e">contentWindow</span>.<span style="color:#a6e22e">postMessage</span>(<span style="color:#e6db74">'Hey'</span>, <span style="color:#e6db74">'*'</span>, [<span style="color:#a6e22e">channel</span>.<span style="color:#a6e22e">port2</span>])
}, <span style="color:#66d9ef">false</span>)

<span style="color:#a6e22e">channel</span>.<span style="color:#a6e22e">port1</span>.<span style="color:#a6e22e">onmessage</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">event</span> =&gt; {
  <span style="color:#a6e22e">display</span>.<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">data</span>
}

</script> </html>

يعد مصدر صفحة iframe أبسط:

<!DOCTYPE html>
<html>
  <script>
  window.addEventListener('message', event => {
    // send a message back
    event.ports[0].postMessage('Message back from the iframe')
  }, false)
  </script>
</html>

كما ترى ، لا نحتاج حتى إلى تهيئة قناة ، لأن ملفwindow.onmessageيتم تشغيل المعالج تلقائيًا عند استلام الرسالة من صفحة الحاوية.

يتكون الحدث المرسل من الخصائص التالية:

  • data: الكائن الذي تم إرساله من النافذة الأخرى
  • origin: أصل URI للنافذة التي أرسلت الرسالة
  • source: كائن النافذة الذي أرسل الرسالة

تحقق دائمًا من أصل مرسل الرسالة.

e.ports[0]هي الطريقة التي نشير إليهاport2في iframe ، لأنportsعبارة عن مصفوفة ، وتم إضافة المنفذ كعنصر أول.

مثال مع عامل الخدمة

عامل الخدمة هو عامل يحركه الحدث ، وهو ملف JavaScript مرتبط بصفحة الويب. تفحص الدليل عمال الخدمةلمعرفة المزيد عنها.

المهم أن تعرف أن عمال الخدمة معزولون عن السلسلة الرئيسية ، ويجب أن نتواصل معهم باستخدام الرسائل.

هذه هي الطريقة التي سيتعامل بها البرنامج النصي المرفق بالمستند الرئيسي مع إرسال الرسائل إلى عامل الخدمة:

// `worker` is the service worker already instantiated

const messageChannel = new MessageChannel()
messageChannel.port1.addEventListener('message', event => {
  console.log(event.data)
})
worker.postMessage(data, [messageChannel.port2])

في رمز عامل الخدمة ، نضيف مستمع حدث لـmessageحدث:

self.addEventListener('message', event => {
  console.log(event.data)
})

ويمكنه إعادة إرسال الرسائل عن طريق إرسال رسالة إلىmessageChannel.port2، مع

self.addEventListener('message', event => {
  event.ports[0].postMessage(data)
})

دعم المتصفح

يتم دعم Channel Messaging API حاليًا من قبل جميع المتصفحات الرئيسية ، والعديد منها منذ فترة طويلة ، لذلك تدعمها حتى الإصدارات القديمة. تحقق من كل التفاصيل علىhttps://caniuse.com/#feat=channel-messaging.


المزيد من دروس المتصفح: