最新更新：2019-12-27
昨晚面试阿里云时，被问及设计模式，观察者模式和订阅发布模式的区别。这里我的概念模糊，特此更正。
原文中：观察者模式又称发布订阅模式
此处表述错误，根据我查阅相关资料（JavaScript设计模式动物书）
观察者模式是subject（主题通知）和观察者之间直接产生依赖，观察者订阅内容改变的事件。（focus on update）；
而发布订阅模式通过主题/事件通道，这个通道作为媒介，触发事件。
两者的区别在于，观察者模式直接产生依赖，而发布订阅模式是通过订阅另一个对象的特点任务或活动，当任务/活动发送时获得通知，而不是单个对象直接调用其他对象的方法（观察者中，subject.prototype.notify直接调用observer的方法）
更新时间：2019-12-16
关于这个项目，是关于我们设计模式的案例设计
题目是重构我们教务在线的教师端，实现消息通知
也就是说，当教师的监考发生变动时，就产生即时的消息。
刚刚看的这个题目，我想到的是，利用观察者模式，在JavaScript中，观察者模式又称为发布订阅模式。
对于教师端来说，教师就是订阅者，管理员发布更新监考事宜为发布事件。教师订阅了“更新监考”这个事件，一旦管理员触发事件，则教师会收到消息。
如何实现呢？
1. 发布事件
这件事的过程，实际上是，管理员端向后端提交更新的数据，触发了更新监考事件，服务器端主动向客户端推送其订阅的消息。
首先，管理员向后端提交更新的数据：这件事非常好实现，管理员向后端发起post请求，即可提交更新。
然后，触发更新事件，如何触发事件呢？如何实现服务端向客户端推送消息呢？
2. 推送消息
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
3. 发布订阅
websocket实现客户端向服务端订阅消息。
socket-io实现服务端向客户端推送消息。
管理员提交更新数据，此处我使用的是抽离到发起请求的js文件中，没有放到前端中直接发起，而是封装为publish函数。
import axios from 'axios'
import io from 'socket.io-client'
let socket = io("ws://127.0.0.1:3001"); // 建立链接
var instance = axios.create({
baseURL: '/admin',
})
export function publish(data) {
return socket.emit('publish', data);
}
服务器端
let app = require('express')();
let server = require('http').createServer(app);
let io = require('socket.io')(server);
// 管理员socket监听，触发事件，更新监考信息
io.on('connection', function (socket) { // socket相关监听都要放在这个回调里
console.log('a user connected--admin');
socket.on("disconnect", function () {
console.log("a user go out");
});
//监听发布事件，第二个参数为监听到了事件触发后，调用的函数（回调函数），此处假设提交完数据后向客户端推送消息
socket.on("publish", function (data) {
// msg表示推送事件
io.emit('on',data)
});
});
//开启端口监听socket
server.listen(3001);
客户端监听消息
const socket = require('socket.io-client')('http://localhost:3001');
constructor(props) {
super(props)
let that = this;
socket.on('msg', function (data) { // 监听服务端的消息“msg”
let item = JSON.parse(data);
let newarr = filterNotice(that.state.realname, item);
that.setState({ noticeArr: newarr });
console.log("user收到服务端消息" + item)
resolve('ok')
});
}
这样就实现通信辣！
琢磨了好久QAQ
放几个我参考的链接吧
- 这个主要是有一个demo，但是前面有点多余，cb表示callback回调，和我服务器端socket.on()的第二个参数function一样的意思
React WebSocket Polling（实时推送） - 参考了官方的吧~菜鸟教程，比较基础，方便理解
HTML5 WebSocket
