예! 반응 앱의 다른 탭이나 창 간에 데이터를 보낼 수 있습니다. 혼란스럽죠?

자, WebRTC을 통해 jitsi 앱을 만들었다고 가정해 보겠습니다. 앱의 주요 목표는 화상 회의입니다. 이제 사용자가 호출을 위해 브라우저에서 동시에 두 개의 세션을 여는 것을 원하지 않습니다. 어떻게 했니? 여기에서 Broadcast Channel API 을 사용할 수 있습니다.

또 다른 중요한 점은 앱/사이트가 동일한 경우에만 작동한다는 것입니다origin.


example 에 의해 작동하는 것을 봅시다.

반응 앱 만들기

create-react-app browser-tab-broadcast-react

앱 시작

npm start

App.js 파일 수정

App.js 파일에서 모든 항목을 제거하고 붙여넣습니다.

import React from 'react'
import './App.css'

function App() {
  return (
    <div class="App">
      <h1> Something happening in the dom </h1>
    </div>
  )
}
export default App

우리가 하는 일은 h1 태그가 있는 div를 렌더링하는 것뿐입니다.

// ...
<h1> Something happening in the dom </h1>

<p>Only one tab could open at a time</p>
<button type="button" onClick={refreshPage}>
    <span>Reload</span>
</button>

이제 페이지가 동일한 브라우저의 다른 탭이나 창에서 이미 열려 있는 경우 사용자에게 표시하려는 부분입니다.

이를 위해서는 이를 처리할 상태가 필요합니다. 조건부로 요소를 사용자에게 렌더링할 수 있습니다.

// ...
function App() {
  const [isOpnnedAlready, setIsOpnnedAlready] = React.useState(false)

  return (
    <div class="App">
// ...

기본적으로 상태는 false이며 이는 JSX에 조건을 넣을 수 있도록 동일한 페이지가 브라우저의 다른 탭이나 창에서 열리지 않음을 의미합니다.

// ...

function refreshPage() {
    window.location.reload()
}

 return (
    <div class="App">
      {!isOpnnedAlready ? (
        <h1>Something happening in the dom</h1>
      ) : (
        <>
          <p>Only one tab could open at a time</p>
          <button type="button" onClick={refreshPage}>
            <span>Reload</span>{' '}
          </button>
        </>
      )}
    </div>
// ...

이제 구성 요소에서 이벤트를 수신해야 합니다. 다른 탭에서 다른 페이지가 열려 있는지 확인합니다.

BroadcastChannel 인스턴스 생성

이를 위해 앱에서 채널을 생성해야 합니다. 동일한 프로토콜, 원본 및 포트를 사용하는 다른 모든 탭에서 사용할 수 있습니다.

// ...
const channel = React.useMemo(() => new BroadcastChannel('couldBeAnything'), [])

여기에서 새BroadcastChannel 인스턴스를 생성하고 채널 변수에 저장했습니다. 이couldBeAnything 이름으로 특정 채널을 구독하고 있습니다. 구독하면 메시지를 게시하고 받을 수 있습니다.

추가로 인스턴스 값을 메모리에 유지하기 위해 useMemo 후크를 사용하고 있습니다. 다시 렌더링할 때마다 코드를 다시 실행할 필요가 없습니다.

BroadcastChannel을 통한 데이터 송수신

const channel = React.useMemo(() => new BroadcastChannel('couldBeAnything'), [])

React.useEffect(() => {
    channel.postMessage({
      isOpnnedAlready: true,
    })
    channel.addEventListener('message', (e) => {
      setIsOpnnedAlready(e.data.isOpnnedAlready)
    })
    return channel.close
  }, [])

여기서 우리는 useEffect 후크를 사용하고 있습니다. 여기서 우리는 구성 요소의 모든 첫 번째 렌더링 후 채널에 게시하고 수신합니다.

채널 인스턴스로 postMessage()를 호출함으로써 객체를 채널로 보냅니다(여기서는 문자열, 배열 등도 보낼 수 있음). 그 직후 채널에서 메시지 이벤트를 수신하기 위해 addEventListener()를 호출합니다. 마지막으로 컴포넌트 마운트 해제 시 채널을 닫습니다.

이 모든 작업이 완료되면 두 개의 탭을 차례로 열면 페이지의 변경 사항을 알 수 있습니다. 첫 번째 탭은 동일한 브라우저에서 다른 탭이 열릴 때마다 DOM을 변경합니다.




자원):