• 목록

클라이언트 개발자님께 힘이 되고자 다음의 기능을 추가했습니다. 감사합니다.

1) 유령 처리 방식 개선 (삼세판 적용)

Ping 실패 1번 = 무시

3번 연속 실패할 때만 유령(끊긴 사용자)로 판단해 제거

→ 정상적인 모바일 백그라운드/일시적인 끊김은 절대 문제 없음.

2) 자동 재접속 안정화

클라이언트에서 연결 끊기면 0.5초 간격으로 자동 재접속

서버는 동일 사용자가 다시 들어오면 기존 유령 세션 자동 정리

→ 중복 접속 표시 사라지고 부드러운 재접속 가능.

3) 유령 세션 자동 청소기 강화

닫힌 소켓, 응답 없는 소켓, ping 3회 실패한 소켓 자동 삭제

→ 접속자 수가 실제와 다르게 올라가는 문제를 해결.

4) 원본 구조 유지 + 안정성만 보강

기존 handler / broadcast / log 시스템 그대로 유지

메인은 그대로, 추가된 건 ‘유령 정리 정확도’와 ‘재접속 안정성’ 뿐

5) 모바일 친화도 크게 향상

화면 꺼짐 / 앱 전환 / 네트워크 전환 시 끊긴 것으로 처리 안 함

돌아오면 그대로 재접속 가능

적용된 기능의 클라이언트 최적화 소스

<script>
/* -------------------------------------------
   설정
 ------------------------------------------- */
const WS_URL = "wss://designonex.com:14147?group=mygroup";
let userInfo = {
    user: "UserA",      // 재접속 시 다시 보냄
    role: "viewer"
};

/* -------------------------------------------
   WebSocket 관리 변수
 ------------------------------------------- */
let ws = null;
let reconnectTimer = null;
let retryDelay = 1000;  // 재접속 시작 딜레이
const maxDelay = 10000; // 최대 10초

/* -------------------------------------------
   WebSocket 연결 함수
 ------------------------------------------- */
function connectWS() {
    console.log("%c[WS] Connecting...", "color: cyan");

    ws = new WebSocket(WS_URL);

    ws.onopen = function() {
        console.log("%c[WS] Connected", "color: lime");

        // 재접속 딜레이 초기화
        retryDelay = 1000;

        // 재접속 시 반드시 다시 이름/상태 보내기
        ws.send(JSON.stringify({
            type: "join",
            ...userInfo
        }));
    };

    ws.onmessage = function(e) {
        try {
            const msg = JSON.parse(e.data);
            console.log("[WS] Recv:", msg);

            // 필요 시 메시지 처리 추가
        } catch (err) {
            console.error("[WS] JSON Error:", err);
        }
    };

    ws.onerror = function(e) {
        console.warn("%c[WS] ERROR", "color: red");
    };

    ws.onclose = function(e) {
        console.warn("%c[WS] CLOSED", "color: orange");
        scheduleReconnect();
    };
}

/* -------------------------------------------
   자동 재접속 스케줄링
 ------------------------------------------- */
function scheduleReconnect() {
    if (reconnectTimer) return;

    console.log(
        `%c[WS] Reconnecting in ${retryDelay / 1000}s`,
        "color: yellow"
    );

    reconnectTimer = setTimeout(() => {
        reconnectTimer = null;

        // 딜레이 증가 (최대 10초)
        retryDelay = Math.min(maxDelay, retryDelay + 1000);

        connectWS();
    }, retryDelay);
}

/* -------------------------------------------
   네트워크 꺼졌다 켜질 때 즉시 재접속
 ------------------------------------------- */
window.addEventListener("online", () => {
    console.log("%c[WS] ONLINE → immediate reconnect", "color: #4FC3F7");
    if (!ws || ws.readyState !== WebSocket.OPEN) {
        retryDelay = 1000;
        connectWS();
    }
});

/* -------------------------------------------
   모바일 백그라운드 복귀 시 재접속
 ------------------------------------------- */
document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        console.log("%c[WS] TAB ACTIVE", "color: #FFD740");

        if (!ws || ws.readyState !== WebSocket.OPEN) {
            connectWS();
        }
    }
});

/* -------------------------------------------
   수동 메시지 전송 함수 (필요 시 UI에 연결)
 ------------------------------------------- */
function sendMessage(type, data = {}) {
    if (ws && ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify({ type, ...data }));
    } else {
        console.warn("WS not connected – message dropped:", type);
    }
}

/* -------------------------------------------
   최초 실행
 ------------------------------------------- */
connectWS();
</script>

* 이 소스는 직접 개발을 진행하시는 개발자에게 도움이 되는 소스입니다.

* 디자인원엑스에서는 웹 엔진 소스를 가공해서 제공합니다. 매뉴얼을 참고해주세요.