基于 websocket使用
需求
例:发送登录请求后及时获取返回值,然后根据返回值处理接下来的事件,类似http
请求,不过需求是要用websocket
做到这一点。
思考
我们在websocket
介绍上能够充分认知到websocket
的所有回调函数都是异步执行的,也就是说我发送send(msg)
之后我要读取信息是在onmessage()
里面读取,这显然不符合我们的要求。
解决
dispatch.js
//作为get获取数据的回调对象存储
this.messageList = {};
//自定义Ws消息接收函数:服务器向前端推送消息时触发
this.onmessage = ((e) => {
//处理各种推送消息
const message = JSON.parse(e.data);
const eventName = message.action.splice('Rsp','')
//执行回调
this.messageList[eventName](message);
})
//发送消息后回调
WBT.prototype.sendMsg = function(obj, callback) {
const name = obj.action.replace('Req','');
//存储事件
this.messageList[name] = callback;
this.socket.send(JSON.stringify(obj));
}
index.html
let loginParam = {
action: "loginReq",
tsxId: "1",
params: {
dc: {
id: "admin",
passwd: "21232f297a57a5a743894a0e4a801fc3",
version: "UDT-0.3.0"
}
}
}
function test() {
WS.sendMsg(loginParam, function (data) {
console.log(data)
})
}
最后
到这一步就是可以类似ajax
发起http
请求并及时回调数据过来。
不过还有最新的 async
可以做成类同步形式,更加方便调用,不过因为受限浏览器版本和我项目实际情况,我就不赘述了,有兴趣的可以看一下这篇博客:es6使用websocket同步等待方法