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