메시지 브릿지

매뉴얼 [웹] 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 객체 안에서 완성되어 서버로 갑니다.

댓글목록

등록된 댓글이 없습니다.

메시지 브릿지

Total 7건 1 페이지
  • RSS

[웹] 기본 엔진 소스 설명 (v1.4.1 보안 패치 적용) N새글

서버 보안 패치 v1.4.1이 적용됨에 따라, 기본 엔진 소스 역시 서버 업데이트 정책과 동일한 기준으로 수정되었습니다. 당초 엔진 소스의 변경 폭이 크지 않을 것으로 예상했으나, 보안 정책 강화와 시스템 안정성 향상을 위해 서버와 동일한 변경 사항이 반영되었습니다. 향후에도 보안 패치 적용 시 변..

작성자: 관리자 댓글 0 조회 9

[웹] 서버에서 받은 소스 설명

updateDisplay() 내 postData의 역할 & 활용 설명updateDisplay() 안에서 만들어지는 postData는서버(WebSocket)에서 받은 메시지를 프론트에서 활용하기 좋은 ‘가공용 데이터 꾸러미’로 만들어둔 것입니다.const postData = { type..

작성자: 관리자 댓글 0 조회 210

열람중 [웹] WebSocket 서버 전송 소스 설명

아래 코드는 실시간 알림 게시판에 적용되는 예제 소스입니다.WebSocket 연결 상태를 자동으로 확인하여, 알림 데이터를 서버에 안전하게 전송하는 역할을 합니다.이 코드를 정상적으로 동작시키기 위해서는 반드시 페이지 상단에 WebSocket 엔진 소스(WS 초기화, sendEvent, connect..

작성자: 관리자 댓글 0 조회 211

[웹] 기본 엔진 소스 설명

WebSocket 엔진(상단 핵심 로직) 설명서※ 이 영역은 전체 시스템의 핵심 엔진이므로 가능한 수정 없이 그대로 사용하는 것을 권장합니다.※ 필요한 기능 확장은 하단 UI 영역 또는 별도 함수에서 처리하는 것을 권장합니다.1. 기본 정보 설정const domain = window.location...

작성자: 관리자 댓글 0 조회 200

웹은 어떻게 연결해야 하나요?

브라우저(웹)에서 메시지 브릿지 서버에 연결하는 방법은 아주 간단합니다.딱 한 줄로 WebSocket을 만들고, 이벤트만 달아주면 됩니다.const ws = new WebSocket("wss://designonex.com:14147/?group=도메인"); 꼭 알아야 하는 핵심 3가지1.&nbs..

작성자: 관리자 댓글 0 조회 1157

검색


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