业务场景
项目是一个单页面web应用，有一个基础的websocket服务，用于和服务器通信。刚开始主要有两个作用：
- 账号防重复登陆。当账号在另外的地方登陆时，websocket收到服务器消息，网站即时弹窗提示用户“当前账号在另外一个地方登陆”，然后网站清除登录信息并跳转到登录页面。
- 当打开送货管理界面时，若有新的送货请求，websocket收到服务器消息，即时提示用户“您有新的送货请求，请及时处理”。若没有打开送货管理界面，不提示。
起初是这样的实现的：
//BasciWebsocket.js
websocket.onmessage = function (event) {
try{
let {data} = event;
let _data = JSON.parse(data);
switch(_data.type){
case 100:
Modal.warning({
title: '账号登录提醒',
content: "您的账号已经在另外的地方进行登陆,请确认是否您本人操作。如有异常,请联系公司系统管理员。",
okText: '知道了',
onOk: ()=> {
tool.clearUserCookie();
window.location = "/login";
}
});
break;
case 101:
let isPageShow = tool.ifDeliveryPageShow();
if(isPageShow){
//提示“您有新的送货请求，请及时处理”
}
break;
}
}catch(e){
}
};
看起来并没有什么问题。但是，随着项目越来越复杂，websocket负责通知的消息也越来越丰富。接收到消息后，往往还要改变具体的页面展现，跟具体的页面的关联性非常大。比如，用户停留在订单详情页时，如果收到新的订单反馈，那么订单详情页的评论列表区域就要动画出现新的反馈信息。
这个时候，你会发现，把这类跟具体页面强关联的逻辑写在基础的BasciWebsocket.js文件里不科学，BasciWebsocket.js也变得很臃肿，维护起来有些费劲。问题就在于基础的websocket服务与每个页面的消息处理逻辑不够解耦。
不难看出，在这个业务场景里，websocket服务其实就是一个消息发布者，而这些具体页面则是消息订阅者。很自然地，我想到了一根救命稻草——经典的发布-订阅模式（又叫观察者模式）。
观察者模式
观察者模式定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。
如何实现观察者模式？
- 指定好谁充当发布者（websocket服务）；
- 为发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（具体页面）；
- 发布者对外提供消息订阅/退订方法，实质就是改变缓存列表的内容；
- 发布消息时，发布者会遍历这个缓存列表，一次触发里面存放的订阅者回调函数；
实践
首先，把BasciWebsocket.js变身为消息发布者：
export default class BasicWebsocket{
constructor() {
if(typeof BasicWebsocket.instance === 'object') {
return BasicWebsocket.instance;
}
//缓存列表
this.listeners = {};
this.init();
BasicWebsocket.instance = this;
}
//消息订阅
addListener = (key,func)=>{
this.listeners[key] = func;
};
//取消订阅
removeListener = (key)=>{
delete this.listeners[key];
};
init = ()=>{
//获取websocket对象,全局唯一
let websocket = this.getWebsocket();
let that = this;
//监听websocket消息
websocket.onmessage = function (event) {
try{
let {data} = event
let _data = JSON.parse(data);
//遍历缓存列表, 通知消息订阅者
let keys = Object.keys(that.listeners);
for(let i = 0,j = keys.length; i < j; i++){
let func = that.listeners[keys[i]];
func(_data);
}
}catch(e){
}
};
};
//其他代码
}
然后，在发货管理页加载时，可以进行发货消息的订阅；发货管理页卸载时，进行消息退订。其他页面如此类推。
class Distribution extends Component{
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
newCount:0
};
this.websocket = new BasicWebsocket();
}
//组件加载完毕
componentDidMount() {
let that = this;
//消息订阅
this.websocket.addListener("distribution",(d)=>{
if(d.type == 101){
that.showNotification(); //提示“您有新的送货请求，请及时处理”
//在页面展示新的发货请求数量
let {count} = d.data;
let count = that.state.newCount + count;
that.setState({
newCount:count
});
}
});
}
//组件即将卸载
componentWillUnmount() {
//消息退订
this.websocket.removeListener("distribution");
}
}
至此，通过观察者模式实现了基础websocket服务和具体页面逻辑的解耦，代码可维护性得到提高。
