之前写了个及时通讯的IM,但是由于仓促,整个通讯的消息没有进行分类,显得有点凌乱,现在就把他消息分类处理下,针对不同的消息类型 定义好不同的handler,这里先整理出JS端
export default class {
constructor(url) {
if ("WebSocket" in window) {
//初始化一个handler映射表
this.handlerMap = {};
// 打开一个 web socket
this.ws = new WebSocket(url);
this.ws.onopen = function() {
// Web Socket 已连接上,使用 send() 方法发送数据
console.log("连接成功...");
};
this.ws.onmessage = this.onmessage.bind(this);
this.ws.onclose = function() {
// 关闭 websocket
console("连接已关闭...");
};
} else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
//注册处理器
on(type, handler) {
if (typeof(handler) != 'function') {
throw Error(handler.name + ' is not a function!');
}
this.handlerMap[type] = handler
}
//发送消息
commit(type, content) {
this.ws.send(JSON.stringify({
type,
content
}));
}
//接受消息
onmessage(evt) {
try {
//解析ws服务端返回的消息{ 'type':'xxx','content':'xxxxxx' }
let incoming = JSON.parse(evt.data);
//执行handler
this.handlerMap[incoming.type].call(this, incoming.content);
} catch (err) {
console.error("error...", err);
}
};
}
此处留待服务端整理出来后继续