332. (javaScript) 자바스크립트 BroadcastChannel 사용해 브로드캐스팅 postMessage 알림 전달 및 onmessage 알림 수신 감지 확인

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

 

    <!-- ===================================================================================================== -->
    <!-- [자바스크립트 코드 지정] -->
    <!-- ===================================================================================================== -->
    <script>


        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. 브로드 캐스트 채널 API : 동일한 Origin 을 가지고 있는 windows , tabs , frames 에게 브로드캐스팅 이벤트 알림 전달 및 통신을 수행합니다
        -----------------------------------------
        2. 브로드 캐스트 채널 기능은 Web Workers 에서 사용할 수 있습니다
        -----------------------------------------
        3. BroadcastChannel 개체를 생성 해 특정 채널에 push, receive 를 할 수 있습니다
        -----------------------------------------
        4. postMessage : 특정 채널에 push 수행시 사용 됩니다
        -----------------------------------------
        5. onmessage : 구독하고 있는 채널에 대한 receive 상태를 확인합니다
        -----------------------------------------
        6. close : 등록 된 채널 연결 해제 시 사용합니다
        -----------------------------------------
        7. 참고 사항 : 로컬 html 파일에서 해당 브로드캐스팅 수행 시 동작 되지 않으며, 서버에서 테스트 필요
        -----------------------------------------
        8. 참고 사이트 : 

        https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API#conclusion
        -----------------------------------------
        */



        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = async function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 


            // [BroadcastChannel 생성 실시 : 채널은 TWOK_CHANNEL]
            const bc = new BroadcastChannel("TWOK_CHANNEL");


            // [메시지 수신 이벤트 등록]
            bc.onmessage = (event) => {
                console.log("");
                console.log("=========================================");
                console.log("[BroadcastChannel] : [Message Receive]");
                console.log("---------------------------------------");
                console.log("[event] : " + event);
                console.log("=========================================");
                console.log("");

                // [채널 연결 종료]
                bc.close();
            };


            // [채널에 알림 push 수행]
            bc.postMessage("Broadcast 알림 입니다");

        }; 

        
    </script>

---