[웹] WebSocket 서버 전송 소스 설명 > 메시지 브릿지

아래 코드는 실시간 알림 게시판에 적용되는 예제 소스입니다.
WebSocket 연결 상태를 자동으로 확인하여, 알림 데이터를 서버에 안전하게 전송하는 역할을 합니다.

이 코드를 정상적으로 동작시키기 위해서는 반드시 페이지 상단에 WebSocket 엔진 소스(WS 초기화, sendEvent, connectWebSocket 등)가 포함되어 있어야 합니다.
엔진 로직 없이 이 함수만 사용하면 전송이 이루어지지 않습니다.

1) 보낼 데이터(JSON) 준비

먼저 서버로 전달할 알림 패킷을 구성합니다.

const jsonData = {
    type: "notification",    // 데이터 타입 정의
    auth: "admin",           // 인증/권한(옵션)
    mb_id: MB_ID,            // 회원 아이디
    write_id: "글쓴이 아이디",
    ip: USER_IP,             // 클라이언트 IP
    noti_type: "글쓴위치",
    mb_name: "글쓴이 이름 또는 닉네임",
    bo_table: "게시판 테이블명",
    bo_subject: "게시판 제목",
    wr_subject: "게시글 제목",
    wr_id: "게시글 고유 ID",
    skin_url: "게시글 주소"
};

위의 데이터는 실시간 알림 게시판을 만들었을 때 작업했던 값들입니다.

2) WebSocket이 열렸는지 확인

아래 조건문이 핵심입니다.

if (ws && ws.readyState === WebSocket.OPEN) {
    sendEvent(jsonData);  // 즉시 전송
}

연결 존재(ws), 열림 상태(OPEN) 두 조건이 모두 충족돼야 바로 전송합니다.

3) 아직 열리지 않았다면 → 자동 대기 후 전송

웹소켓이 아직 연결중이라면 OPEN 이벤트를 기다립니다.

else {
    ws.addEventListener("open", () => sendEvent(jsonData), { once: true });
}

{ once: true } 옵션 덕분에 딱 한 번만 실행되고 사라집니다. 깔끔하고 안전한 전송 구조죠.

즉, WebSocket이 “자, 연결 완료!”라고 외치는 순간 → sendEvent(jsonData)가 전달됩니다.

4) 사용 방법

sendChatMessageSafe("notification 메시지");

여기서 "notification 메시지"는 사실 jsonData 안에 직접 쓰지 않으셨으므로
단순 호출 트리거 역할만 합니다.
실제 메시지는 jsonData 객체 안에서 완성되어 서버로 갑니다.