webSocket 实现消息推送、心跳、已读消息、加载更多等功能

读万卷书不如行万里路，行万里路不如阅人无数，阅人无数不如名师指路。站着巨人身上，你可以看的更高、更远。

一、webSocket 初始化

initWebSocket 方法中，初始化 webSocket。

this.socket = new Socket('ws://192.168.11.198:12000/msg', {userId: '1234',token: 'token-demo',sysCode: '001',
})

在文件中，引入 socket.js 文件（webSocket 的基本配置）。

export default class {constructor (url, opts = {}) {...this.init(url, opts)}
}

调用 init 初始化方法，连接 websocket，同时绑定系统事件。

init (url, opts) {this.client = new WebSocket(url).....return this.client
}

webSocket 相关事件

this.client.onopen = () => {}  // 连接建立时触发
this.client.onmessage = (event) => {} // 客户端接收服务端数据时触发
this.client.onerror = () => {}  // 通信发生错误时触发
this.client.onclose = () => {}  // 连接关闭时触发

二、客户端与服务端建立连接

在建立连接时，调用 login 方法。

this.client.onopen = () => {this.login(opts.userId, opts.sysCode, opts.token)
}

在登陆方法中，调用 send 方法。

login (userId, sysCode, token) {const operation = 'Auth'......this.send(operation, data, token)
}

在 send 方法中，首先检查 websocket 的连接状态。

this.client.readyState 为 1 时，表示 webSocket 已经连接成功，可以通讯。调用 this.client.send 方法发送信息。

/*** 发送事件* @param {string} operation 事件类型* @param {object} data 事件参数
*/
send (operation, data) {const readyState = this.client.readyStatereturn new Promise((resolve, reject) => {if (this.client.readyState === 1) {const message = {operation,data,token: this.token,}this.client.send(JSON.stringify(message))resolve()} else {reject(new Error(`当前连接状态为：${readyState}, 无法发送消息`))}})
}

接收来自服务端的消息。

this.client.onmessage = (event) => {const resp = JSON.parse(event.data)......this.events[resp.operation](resp) // event 上绑定触发类型和结果。
}

在业务逻辑中，对绑定的登录事件进行回调。在登录成功后，回调服务器推送过来的消息，同时将 result 中返回的 token，传入调用心跳方法中。

this.socket.on('Auth', (result) => {console.log('Auth 回调'， result)......// 启动心跳this.socket.heartStart(this.token)
})

on 绑定自定义事件。

on (operation, func) {this.events[operation] = func
}

三、启动心跳（定时器）

采用定时器，在一定的时间间隔内，给服务端发送一次消息，说明客户端连接到服务端的。

heartStart (token) {this.heartTimer = window.setInterval(() => {this.heartBeat(token)}, this.heartInterval)this.heartBeat(token)......
}

在心跳方法中，调用 send 方法。

heartBeat (token) {const operation = 'HeartBeat'...this.send(operation, data, token)
}

同时在 heartStart 方法中，绑定回调事件。

heartStart (token) {......this.on('HeartBeat', () => {console.log('接送到心跳回应')})
}

接收来自服务端的消息。

this.client.onmessage = (event) => {const resp = JSON.parse(event.data)......this.events[resp.operation](resp) // event 上绑定触发类型和结果。
}

最后绑定的 HeartBeat 事件回调中，打印信息：接送到心跳回应。

四、下拉获取分页数据

如何在滚动列表时，添加触底事件，向服务端发送获取该类型列表的下一页数据呢。

在触底事件中，只需添加下面代码：

this.socket.msgPull(this.token, type, row.id)

在消息分页 msgPull 方法中，调用 send 方法。

msgPull (token, type, pageId, size) {const operation = 'Pull'......this.send(operation, data, token)
}

send 发送事件中，使用 this.client.send(JSON.stringify(message)) 发送信息给服务器。

在 this.client.onmessage 中接收服务端返回到客户端的信息。

this.client.onmessage = (event) {const resp = JSON.parse(event.data)......this.events[resp.operation](resp)
}

在 Pull 回调中，获取从服务端回调过来的信息。

this.socket.on('Pull', (result) => {console.log('Pull 回调', result)
})

敲敲黑板，重点来了。

1、如何监听列表滚动到底部时，调用 Pull 类型的 send 方法获取下一页数据；

2、如何区分当前滚动列表需要加载下一页的数据类型；

3、若该类型列表无更多数据，触底事件频繁调用获取下一页数据，如何优化呢？

调用 handleInfiniteOnLoad 方法时，会传入列表的类型，我们会将需要加载下一页数据的类型传给服务端的；在 Pull 操作类型的回调中，我们将返回的结果进行判断。

this.socket.on('Pull', (result) => {this.loading = false// end: '1' => 结束，没有下一页， '0' => 有下一页if (result.data.end === '0') {switch (result.data.type) {case 'INFORM':this.msgTable.informs = [...this.msgTable.informs, ...result.data.messages]break......}} else {// 没有下一页时移除滚动事件if (!this.noMoreFlagList.includes(result.data.type)) {this.noMoreFlagList.push(result.data.type)}}
})

noMoreFlagList 为没有下一页的列表类型；该类型列表无更多数据,禁止提交 pull 操作类型的事件。

handleInfiniteOnLoad (type) {let rowif (type === 'INFORM') {row = this.msgTable.informs[this.msgTable.informs.length - 1]} ......// 匹配标识是否已没有下一页if (!this.noMoreFlagList.includes(type)) {this.loading = truethis.socket.msgPull(this.token, type, row.id)}
},

五、后端主动推送消息

当后端主动推送消息时，我们又应该如何接收呢？

在服务端推送消息给客户端时，会获取消息的类型和数据，对应的在消息回调中可以获取相应的数据。

initWebSocket () {......// 后端主动推送消息this.socket.on('Push', (result) => {console.log('push', result)this.$message.info({message: '您好',description: '您有新的未读消息，请注意查收',})switch (result.data.type) {case 'INFORM':this.msgTable.informs.unshift(result.data)break......}// 未读总数+1this.totalUnreadCount++})
},

六、已读消息处理

首先用户点击浏览器，调用 handleRead 事件。

handleRead (msgId, status) {// 已读消息则不再发起阅读if (status === '0' && !this.readedList.includes(msgId)) {this.socket.msgRead(this.token, msgId)}
},

在 msgRead 方法中，调用【已读】类型的 send 方法。

msgRead (token, msgId) {const operation = 'Read'......this.send(operation, data, token)
}

在业务逻辑中，对已读进行回调，将返回的结果 id 放入 readedList 已读列表中，同时对未读数量 totalUnreadCount 进行 -1 操作。

this.socket.on('Read', (result) => {this.readedList.push(result.data.msgId)// 未读总数-1this.totalUnreadCount--
})

页面展示已读与未读

// item.vue 组件
<divclass="z-msg__item":class="{'z-msg__item--read': (itemData.status === '1' || judgeReaded(itemData.id))}"@click="itemClick(itemData)"
>......
</div>

status 为 1 或者 readedList 数组中存在点击过的消息 Id时，则为已读状态；

// 处理已读
judgeReaded (msgId) {if (this.readedList.includes(msgId)) {return true} else {return false}
},
z-msg__item--read {opacity: 0.6;
}

注意：首先通过 userId 和 token 与用户相关的字段，与服务端建立连接（用于身份标识，这里的 userId 和 token 是登录系统后的用户信息）。在建立连接之后的回调中，返回的 result 里面有个 token 字段。这个由服务端返回的字段，在后续的 HeartBeat、Pull、Push、Read 类型的 send 方法中，作为客户端与服务端的传递消息的桥梁。