客户端是用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) ???????},
58.websoket实现的客服 实现了发文字消息和图片
原文地址:https://www.cnblogs.com/famLiu/p/8416973.html