브로드캐스트 채널 API 살펴보기

퀵 서비스 레스토랑에서 볼 수 있는 디지털 메뉴판을 아십니까? 글쎄, 작년에 나는 그 중 하나에서 일하게되었습니다.

Ok, but what does that have to do with the Broadcast Channel API?

약간의 배경

우리의 특별한 경우 메뉴 보드는 레스토랑의 Chromebox에서 실행되는 React 웹 앱입니다. 두 개의 디스플레이를 지원하며 URL 경로를 기반으로 표시되는 메뉴 페이지를 제어합니다.



요구 사항 중 하나는 메뉴의 특정 요소를 애니메이션화해야 한다는 것이었지만 문제가 있었습니다. 애니메이션은 디스플레이 간에 동기화되어야 했습니다. 원할 때마다 애니메이션 루프를 실행할 수는 없습니다. 동시에 타이머를 시작하기 위해 두 페이지가 서로 통신할 수 있는 방법이 필요했습니다.

Broadcast Channel API을 입력합니다.

브로드캐스트 채널 API란 무엇입니까?

동일한 출처에서 브라우징 컨텍스트(예: 창, 탭, iframe, 웹 보기) 간의 기본 통신을 허용하는 웹 API입니다.


BroadcastChannel 개체를 만들고 이름을 지정하여 시작합니다. 같은 이름의 채널이 이미 존재하는 경우 대신 채널에 가입합니다.

const channel = new BroadcastChannel("channel_name")

메시지를 보내려면 생성된 객체에서 postMessage() 메서드를 호출합니다. 이 메서드는 임의의 객체를 인수로 사용합니다.

channel.postMessage("is this thing on?")

그러면 채널에 참가한 각 컨텍스트에 message 이벤트가 발송됩니다. 그런 다음 onmessage 이벤트 핸들러를 사용하여 이 이벤트에 대한 함수를 실행할 수 있습니다.

channel.onmessage = ev => {
  console.log(ev.data)
}
// is this thing on?

채널에서 연결을 끊으려면 개체에서 close() 메서드를 호출합니다.

channel.close()

앱으로 돌아가기

우리는 이 API를 활용하여 두 디스플레이 간에 앞뒤로 통신하고 정확히 동시에 애니메이션 루프를 시작하도록 할 수 있었습니다. 각 디스플레이가 약간씩 다른 시간에 독립적으로 "부팅"되므로 두 디스플레이가 언제 준비되는지 알기 위해 먼저 협상이 필요합니다.

기본 논리는 다음과 같습니다.

/**
 * In this example I will refer to the first display to finish 
 * booting up as "display 1". The second one to be ready will
 * be "display 2".
 */

// display 1 creates the channel; display 2 joins it
const syncChannel = new BroadcastChannel("animation-sync")

syncChannel.onmessage = ({ data }) => {
  switch (data.type) {
    // display 1 receives the "READY" message from display 2
    // and posts a message to start setting things up
    case "READY": {
      syncChannel.postMessage({ type: "START" })
      break
    }
    // display 2 receives the "START" message
    case "START": {
      // record the current time (just to be safe we pad it 5s
      // to allow display 1 to receive the next message)
      const syncTime = new Date().getTime() + 5000

      // outside function that schedules the animations
      scheduleAnimations(syncTime)

      // send "SYNC" message to display 1 with the syncTime      
      syncChannel.postMessage({ type: "SYNC", syncTime })
      break
    }
    // display 1 receives the "SYNC" message with the syncTime
    case "SYNC": {
      scheduleAnimations(data.syncTime)
      break
    }
    default:
      break
  }
}

// display 2 sends the "READY" message to display 1
animationSyncChannel.postMessage({ type: "READY" })

그것을 가지고 놀다

Codesandbox에서 a simplified demo of this을 만들었습니다. 그리고 여기에 짧은 미리보기가 있습니다.



꽤 멋지죠?

경고

모든 브라우저가 이를 기본적으로 지원하는 것은 아닙니다. 다행히 동일한 API가 있고 이를 지원하는 브라우저에서 기본 구현을 사용하는 npm 패키지broadcast-channel가 있습니다. 또한 Node에서도 사용할 수 있습니다!


표지 사진: Prince Abid