58.websoket实现的客服 实现了发文字消息和图片

Posted 2020-10-23 添砖加码

客户端是用react实现的，

关键代码 websoket

class WS {
    constructor() {
        this.ws = null;
        this.openHandler = null;
        this.messageHandler = null;
        this.errorHandler = null;
        this.closeHandler = null;

        this.requestId = 0;
        this.messageQueue = [];
        this.msgCheckTimer = setInterval(this.onTimer.bind(this), 1000);
        this.Timeout = 15000;
    }

    onTimer() {
        let isTimeout = false;
        let now = Date.now();
        for (let i = 0; i < this.messageQueue.length; i++) {
            let msg = this.messageQueue[i];
            let deltaTime = msg.time - now;
            if (deltaTime > this.TimeOut) {
                isTimeout = true;
                break;
            }
        }
        if (isTimeout)
            this.close();
    }

    open(url) {
        console.log(‘open‘)
        this.ws = new WebSocket(url);

        this.ws.onopen = function (event) {
            console.log(‘open-->‘, event)
            if (this.openHandler != null)
                this.openHandler(event);
        }.bind(this)

        this.ws.onmessage = function (event) {
            console.log(‘onmessage‘)
            if (this.messageHandler != null)
                this.messageHandler(event);
        }.bind(this);

        this.ws.onerror = function (event) {
            console.log(‘onerror-->‘, event)
            
            this.close();

            if (this.errorHandler != null)
                this.errorHandler(event);
        }.bind(this);

        this.ws.onclose = function (event) {
            console.log(‘onclose-->‘, event)
            this.close();

            if (this.closeHandler != null)
                this.closeHandler(event);
        }.bind(this);
    }

    close() {
        if (this.ws != null) {
            try {
                this.ws.close();
            } catch (e) {
            }
            this.ws = null;
            this.messageQueue = [];
        }
        if (this.msgCheckTimer != null) {
            clearInterval(this.msgCheckTimer);
            this.msgCheckTimer = null;
        }
    }

    makeMsg(commandId) {
        let json = {};
        json.account = sessionStorage.getItem(‘account‘);
        json.token = sessionStorage.getItem(‘token‘);
        json.commandId = commandId;
        json.requestId = this.requestId++;
        json.packType = PackType.RequestResponse;
        json.errorCode = ErrorCode.OK;
        return json;
    }

    send(commandId, subMsg, callback) {
        if (this.ws != null) {
            let msg = this.makeMsg(commandId);
            if (subMsg != null)
                msg.subMsgData = JSON.stringify(subMsg);
            let ss = JSON.stringify(msg);
            this.ws.send(ss);
            msg.time = Date.now();
            msg.callback = callback;
            this.messageQueue.push(msg);
        }
    }

    onResponse(responseMsg) {
        for (let i = 0; i < this.messageQueue.length; i++) {
            let msg = this.messageQueue[i];
            if (msg.requestId == responseMsg.requestId) {
                this.messageQueue.splice(i, 1);
                if (msg.callback != undefined)
                    msg.callback(responseMsg);
                break;
            }
        }
    }
}

openWS() {
            var url = "ws://" + wsAds + "/ws/crmclient";
            if (this.ws == null) {
                this.ws = new WS()

                this.ws.openHandler = function (event) {
                    this.setState({ wsOpenSuccess: true })
                    this.ws.send(MsgCommand.LoginCommand, null, this.getAllPlayers.bind(this));
                }.bind(this)

                this.ws.messageHandler = function (event) {
                    this.onmessage(event)
                }.bind(this)

                this.ws.errorHandler = function () {
                    this.setState({
                        isErr: true,
                        ntsType: ‘reconnection‘,
                        ntsText: TextLand.OhErr
                    })
                }.bind(this)

                this.ws.closeHandler = function () {
                    this.setState({
                        isErr: true,
                        ntsType: ‘reconnection‘,
                        ntsText: TextLand.OhDisconnect
                    })
                }.bind(this)
            } else {
                this.ws.close()
            }

            this.ws.open(url)
        },