webSocket sockjs - OhMinsSup/tip-review GitHub Wiki

const SockJS = require('sockjs-client');
const Compiler = require('./template-compiler');

class WebSocketClient {
    /*
    const idx = Common.getQuerystring('idx');
    const url = `${routes.SOCKET_PATH}/digital-ticket/browser?concertGateIdx=${idx}&clientType=browser`;
    const ws = new WebSocketClient();
    ws.open(url);
    */
    ws = null;
    url = '';
    autoReconnectInterval = 5 * 1000;
    
    open(url) {
        this.url = url;
        this.ws = new SockJS(url);

        this.ws.onopen = (e) => {
            this.onOpen(e);
        };
    
        this.ws.onmessage = (e) => {
            this.onMessage(e);
        };
    
        this.ws.onclose = (e) => {
            this.onClose(e);
        }
    
        this.ws.onerror = (e) => {
            this.onError(e);
        };
    }

    realTimeRender(message) {
        let res = JSON.parse(message);        
        let templateReander = {
            createType: 'APPEND',
            values: null,
        };

        if (Array.isArray(res)) {
            res.map(res => {
                console.log('CONNECT =>', 'serialNo:', res.serialNo, 'response:', res.response)
                const responseConnect = res.response === 'Y' ? '연결됨' : '연결안됨'; 
                if (document.getElementById(`connect-unqiue-${res.serialNo}`)) {
                    $(`#connect-response-${res.serialNo}`).text(responseConnect);
                    return;
                };

                templateReander.selector = '#card-type-reader-A',
                templateReander.target = '#form1';
                templateReander.values = {
                    type: res.type,
                    serialNo: res.serialNo,
                    response: responseConnect,
                };
                Compiler.templateCompiler(templateReander);
                templateReander.values = null;
            })
            return;
        }

        switch(res.type) {
            case 'CONNECT': 
                console.log('CONNECT =>', 'serialNo:', res.serialNo, 'response:', res.response)
                const responseConnect = res.response === 'Y' ? '연결됨' : '연결안됨';
                if (document.getElementById(`connect-unqiue-${res.serialNo}`)) {
                    $(`#connect-response-${res.serialNo}`).text(responseConnect);
                    return;
                };

                templateReander.selector = '#card-type-reader-A',
                templateReander.target = '#form1';
                templateReander.values = {
                    type: res.type,
                    serialNo: res.serialNo,
                    response: responseConnect,
                };
                Compiler.templateCompiler(templateReander);
                templateReander.values = null;
                break;
            case 'ENTRANCE':
                console.log('ENTRANCE =>', 'serialNo:', res.serialNo, 'cardId:', res.cardId ,'response:', res.response)
                let responseEtrance = '';
                switch(res.response) {
                    case 'IN':
                        responseEtrance = '입장';
                        break;
                    case 'OUT':
                        responseEtrance = '퇴장';
                        break;
                    case 'ERROR':
                        responseEtrance = '미등록';
                        break;
                }

                if (document.getElementById(`entrance-unqiue-${res.serialNo}`)) {
                    $(`#entrance-response-${res.serialNo}`).text(responseEtrance);
                    return;
                };

                templateReander.selector = '#card-type-reader-B',
                templateReander.target = '#form2';
                templateReander.values = {
                    type: res.type,
                    serialNo: res.serialNo,
                    response: responseEtrance,
                    cardId: res.cardId
                };
                Compiler.templateCompiler(templateReander);
                templateReander.values = null;
                break;
        }
    }

    onOpen(e) {
        console.log('connection:', e);
    }

    onClose(e) {
        switch(e.type) {
            case 1000:
                console.log('disconnection:', e);
                this.ws.close();
                break;
            default:
                this.reconnect(e);
                break;
        }
    }

    onMessage(e) {
        setTimeout(() => {
            this.realTimeRender(e.data);
        }, 0)
    }

    onError(e) {
        switch(e.code) {
            case 'ECONNREFUSED': 
                this.reconnect(e);
                break;
            default:
                console.log("Server error message:", e);
                break;

        }
    }

    reconnect(e) {
        const that = this;
        setTimeout(() => {
            console.log("reconnecting:", e);
            that.open(that.url);
        }, this.autoReconnectInterval)
    } 
}

export default WebSocketClient;