【springboot】基于webSocket+vue的消息推送功能

1、webSocket协议

webSocket 是一种在http协议基础上实现的全双工通信协议。http协议只能是由客户端请求，服务端响应数据的一种通信方式；而webSocket只需要建立一次连接，即可由客户端放松数据给服务端，也可由服务端主动发送数据给客户端。但创建连接的请求必须是由客户端发起的。

目前webSocket支持两种资源状态符：ws和wss (非安全不可信的连接和安全可信的连接)，类似于http协议的http和https

2、前端JS代码实现

外层是vue，但实际上创建webSocket连接是基于原生js方式

initWebSocket() {
   
let that = this;
this.websocket = new WebSocket(api.websocket(this.username));
//链接发送错误时调用
this.websocket.onerror = function () {
   
that._notify('提醒', 'WebSocket链接错误', 'error')
};
//链接成功时调用
this.websocket.onopen = function () {
   
that._notify('提醒', 'WebSocket链接成功', 'success');
that.open();
};
//链接关闭时调用
this.websocket.onclose = function () {
   
that._notify('提醒', 'WebSocket链接关闭', 'info')
};
//接收到消息时回调
this.websocket.onmessage = function (event) {
   
console.log("websocket.onmessage : ", event);

//这里接收到消息后直接调用 查询 消息列表接口 比较香，一个一个push的话相当复杂，也没必要，这里消息是分页的，未阅读的message应该放最前面
that.queryMessages();
let entity = JSON.parse(event.data);
//消息接收
let data = entity.body;
//声音提醒
that.$refs.audioTip.load();
that.$refs.audioTip.play();
that._notify('提醒', '你有一条新消息', 'success');
that.setNotification(data.subject, "你收一条新消息! ");
that.sendNotificationFn