ซิงค์กับ Broadcast Channel API

ในโครงการเมื่อเร็วๆ นี้ การรักษาความปลอดภัยของข้อมูลส่วนบุคคลที่ละเอียดอ่อนซึ่งมีความสำคัญสูงสุด ส่วนหนึ่งของความพยายามนี้ จำเป็นต้องมีการตรวจสอบให้แน่ใจว่าเว็บแอปพลิเคชันออกจากระบบในทุกแท็บและหน้าต่างของเบราว์เซอร์ทุกครั้งที่ผู้ใช้ออกจากระบบ ด้วยเหตุนี้ ฉันจึงค้นหาวิธีง่ายๆ ในการสื่อสารระหว่างแท็บต่างๆ และทำให้แท็บเหล่านั้นซิงค์กัน ซึ่งทำให้ฉันได้สำรวจ Broadcast Channel API

Broadcast Channel API คืออะไร

Web API เป็นWeb APIที่ปัจจุบันรองรับโดยเบราว์เซอร์หลัก ทั้งหมด ซึ่งช่วยให้สามารถสื่อสารระหว่างบริบทการสืบค้นต่างๆ (แท็บ หน้าต่าง iframe) ที่มีต้นทางเดียวกัน โดย ทำหน้าที่เป็นบัสข้อความที่มีคุณสมบัติ Pub/Sub ด้วยการสร้างวัตถุ BroadcastChannel บริบทสามารถรับข้อความที่โพสต์ไปยังช่องได้ บริบทได้รับการสมัครรับข้อมูลจากช่องโดยการสร้างอินสแตนซ์ช่องของตัวเองด้วยชื่อเดียวกัน สร้างการสื่อสารแบบสองทิศทางระหว่างกัน

สิ่งนี้ทำให้ API เป็นโซลูชันที่ง่ายและมีประสิทธิภาพสำหรับการตรวจจับการกระทำของผู้ใช้และการซิงโครไนซ์ข้อมูลระหว่างบริบทได้อย่างง่ายดายโดยจัดให้มีการสื่อสารแบบหนึ่งต่อกลุ่ม ในกรณีของฉัน มันเป็นตัวเลือกที่ยอดเยี่ยมสำหรับการตรวจจับการออกจากระบบในแท็บเดียวและซิงโครไนซ์การกระทำเดียวกันในแท็บอื่นๆ แต่การตั้งค่านั้นง่ายแค่ไหน?

การตั้งค่าช่องทางการสื่อสาร

มาดูขั้นตอนที่จำเป็นในการสร้างช่องทางการสื่อสารโดยดูตัวอย่างอย่างใกล้ชิด เช่น ออกจากระบบบริบทของเบราว์เซอร์ทั้งหมดในแอปพลิเคชัน React

1. สร้างวัตถุช่องออกอากาศภายในบริบท

/* utils/Session.js */

import { BroadcastChannel } from 'broadcast-channel'

const logoutChannel = new BraodcastChannel('logout')

ในการส่งข้อความไปยังแชนเนล ทำได้ง่ายเพียงแค่เรียกออปเจ็กต์postMessageแชนเนลที่สร้างขึ้น ซึ่งใช้อาร์กิวเมนต์ที่หลากหลายซึ่งสนับสนุนโดยอัลกอริทึมการโคลนที่มีโครงสร้าง ในกรณีของการออกจากระบบ การส่งผ่านสตริงก็เพียงพอแล้ว วิธีการlogoutSessionถูกสร้างขึ้นเพื่อโพสต์ข้อความไปยังช่องออกจากระบบ

หมายเหตุสำคัญที่จะกล่าวถึง ข้อความจะไม่ออกอากาศถึงตัวมันเอง ดังนั้น อย่างที่เราเห็นที่นี่ในlogoutSessionวิธีการของเรา หลังจากpostMessageถูกเรียก เราจะดำเนินการออกจากระบบสำหรับบริบทการเผยแพร่

/* utils/Session.js */

import { BroadcastChannel } from 'broadcast-channel'

const logoutChannel = new BroadcastChannel('logout')

export const logoutSession = () {
  logoutChannel.postMessage('logout_session')

  // Perform actions here complete logging out, such as ending user session
  // and redirecting to the login page
}

import React from "react"
import { logoutSession } from 'utils/endSession'

const Logout = () => (
  <button onClick={logoutSession}>Logout</button>
)

เมื่อมีการโพสต์ข้อความ ข้อความจะถูกส่งไปยังแต่ละวัตถุ BroadcastChannel ที่เชื่อมต่อกับช่องที่มีชื่อ เพื่อให้ได้รับข้อความonmessageต้องตั้งค่าตัวจัดการเหตุการณ์ในอินสแตนซ์ของช่อง ที่นี่เราสร้างlogoutAllTabSessionsListenerซึ่งสามารถวางไว้ในคอมโพเนนต์ทั่วไปในทุกบริบทที่อนุญาตให้รับข้อความได้

/* utils/Session.js */

import { BroadcastChannel } from 'broadcast-channel'

const logoutChannel = new BraodcastChannel('logout')

export const logoutSession = () {
  logoutChannel.postMessage('logout_session')

  // Perform actions here that end session, such ending user session
  // and redirecting to the login page
}

export const logoutAllTabSessionsListener = () => {
  logoutChannel.onmessage = () => {
    logoutSession()
    logoutChannel.close()
  }
}

/* App.js */

const App = () => {
...

  useEffect(() => {
    logoutAllTabSessionsListener()
  })

...
}

Broadcast Channel APIเป็นอินเทอร์เฟซที่เรียบง่ายแต่ทรงพลัง ซึ่งสร้างขึ้นโดยคำนึงถึงการสื่อสารแบบหนึ่งต่อกลุ่มที่ง่ายดาย ทำให้สามารถเข้าถึงการสื่อสารสำหรับบริบทภายในแหล่งกำเนิดเดียวกันได้ ฉันหวังว่าเมื่อคุณต้องการซิงค์ข้อมูลเบราว์เซอร์ของคุณและปลอดภัย ฉันได้ช่วยเพิ่มเครื่องมือที่มีประโยชน์ในคลังแสงของคุณ

มีความสุขในการเขียนโค้ด สำรวจอย่างมีความสุข!