메시지 브릿지

매뉴얼 [웹] 기본 서버 전송 소스 설명

페이지 정보

본문

아래 코드는 실시간 알림 게시판에 적용되는 예제 소스입니다.
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 객체 안에서 완성되어 서버로 갑니다.

댓글목록

등록된 댓글이 없습니다.

메시지 브릿지

Total 19건 1 페이지
  • RSS
공지 공지

관리자 · 조회 2662 · 날짜 2025-11-13 15:27:10
공지 설명

관리자 · 조회 2960 · 날짜 2025-11-09 14:35:01

관리자 · 조회 1505 · 날짜 2025-12-09 08:37:25

관리자 · 조회 1645 · 날짜 2025-12-05 15:42:49

관리자 · 조회 1698 · 날짜 2025-12-03 08:49:25

관리자 · 조회 1657 · 날짜 2025-12-02 17:53:38
열람중 매뉴얼

관리자 · 조회 1661 · 날짜 2025-12-02 08:31:07

관리자 · 조회 1617 · 날짜 2025-12-01 23:03:40

관리자 · 조회 1776 · 날짜 2025-11-29 22:07:08

관리자 · 조회 1659 · 날짜 2025-11-29 18:11:30

관리자 · 조회 1881 · 날짜 2025-11-23 22:36:55

관리자 · 조회 2083 · 날짜 2025-11-20 09:54:24

관리자 · 조회 2247 · 날짜 2025-11-15 20:02:01

관리자 · 조회 2239 · 날짜 2025-11-14 10:28:40

관리자 · 조회 2471 · 날짜 2025-11-14 06:49:26

검색

© 2025 Designonex. All rights reserved. · 이용약관 · 개인정보 처리방침