node实现即时消息通知

Posted on | In , | | reads times

关于这个项目，是关于我们设计模式的案例设计
题目是重构我们教务在线的教师端，实现消息通知
也就是说，当教师的监考发生变动时，就产生即时的消息。
刚刚看的这个题目，我想到的是，利用观察者模式，在JavaScript中，观察者模式又称为发布订阅模式。
对于教师端来说，教师就是订阅者，管理员发布更新监考事宜为发布事件。教师订阅了“更新监考”这个事件，一旦管理员触发事件，则教师会收到消息。

如何实现呢？

1. 发布事件

这件事的过程，实际上是，管理员端向后端提交更新的数据，触发了更新监考事件，服务器端主动向客户端推送其订阅的消息。
首先，管理员向后端提交更新的数据：这件事非常好实现，管理员向后端发起post请求，即可提交更新。
然后，触发更新事件，如何触发事件呢？如何实现服务端向客户端推送消息呢？

2. 推送消息

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

3. 发布订阅

websocket实现客户端向服务端订阅消息。
socket-io实现服务端向客户端推送消息。

管理员提交更新数据，此处我使用的是抽离到发起请求的js文件中，没有放到前端中直接发起，而是封装为publish函数。

1
2
3
4
5
6
7
8
9
10
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);
}

服务器端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);

客户端监听消息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
放几个我参考的链接吧

  1. 这个主要是有一个demo，但是前面有点多余，cb表示callback回调，和我服务器端socket.on()的第二个参数function一样的意思
    React WebSocket Polling（实时推送）
  2. 参考了官方的吧~菜鸟教程，比较基础，方便理解
    HTML5 WebSocket