WebSocket 是一种新型的协议，可以在客户端和服务器之间建立一个实时的双向通信渠道，实现真正的实时消息推送服务。在前端开发中，实现一个 WebSocket 消息推送服务已经成为了不可或缺的一部分。本文将向大家介绍基于 ES7 实现的 WebSocket 消息推送服务。
为什么要使用 WebSocket？
在传统的 Web 应用中，客户端与服务器之间的通信都是基于 HTTP 协议的请求和响应进行的。在 HTTP 协议中，客户端向服务器端请求资源时，服务器端会发送一次响应，并在响应中返回请求的资源。而在客户端需要获知新消息时，只能够通过轮询的方式不断的请求服务器，来判断是否有新的消息到来。这样的实现方法对服务器的负载非常大，而且实时性比较差。
而 WebSocket 协议是一种新型的协议，可以在客户端与服务器之间建立一个实时的双向通信渠道。通过 WebSocket 可以实现服务端向客户端推送消息，不需要轮询，也不需要发送额外的 HTTP 请求，可以大大减轻服务器的负载，提升系统的性能。
实现 WebSocket 消息推送服务
使用 WebSocket 实现消息推送服务大致可以分为以下四步：
- 创建一个 WebSocket 服务器端
- 客户端与服务器端建立连接
- 服务器端向客户端发送消息
- 客户端接收服务器端的消息
创建一个 WebSocket 服务器端
在 Node.js 中，实现 WebSocket 服务器端的方案很多，如使用 socket.io、ws 等第三方库。这里我们选择使用 Koa 和 ws 库来实现。
安装 Koa 和 ws 库：
npm install koa ws
创建一个 Koa 服务器：
-- -------------------- ---- ------- ----- --- - --------------- ----- --- - --- ------ ----- ------ - --------------------------------------------- ----- -- - ----------------------------- ------------------- -- -- - ------------------- --------- -- ---- ------- ---
在上面的代码中，我们创建了一个 Koa 服务器，并使用 ws 库创建了一个 WebSocket 服务器端。接下来，我们需要处理客户端向 WebSocket 服务器端发送的连接请求。
客户端与服务器端建立连接
客户端和服务器端建立连接可以使用浏览器内置的 WebSocket 对象，如下：
const socket = new WebSocket('ws://localhost:3000');在上面的代码中，我们创建了一个 WebSocket 对象，并传入 WebSocket 服务器端的地址。当客户端与服务器端成功建立连接后，WebSocket 对象上会触发 open 事件：
socket.addEventListener('open', () => {
console.log('WebSocket connection was opened.');
});在 WebSocket 连接建立成功后，我们需要监听服务器端向客户端推送的消息。
服务器端向客户端发送消息
在 WebSocket 连接建立成功后，客户端和服务器端可以相互发送消息。
服务端向客户端发送消息可以使用 socket.emit() 方法。在下面的例子中，服务器端向客户端推送一条消息。
io.on('connection', (socket) => {
socket.emit('message', 'Server: Connection established');
});在这里，我们使用了 io.on() 方法监听客户端的连接请求，并传入了一个回调函数。在回调函数中，我们使用 socket.emit() 方法向客户端发送了一条消息。
客户端接收服务器端的消息
客户端可以使用 WebSocket 对象的 onmessage 事件来接收服务器端的消息。在下面的例子中，我们使用 socket.onmessage() 方法监听服务器端发送的消息，并打印消息的内容：
socket.onmessage = (event) => {
console.log(`Received message: ${event.data}`);
};在上面的代码中，我们使用了 socket.onmessage() 方法，当服务器向客户端发送消息时，会触发该方法，并将消息的内容作为 event.data 传递给回调函数。
总结
通过本文（基于 ES7 实现的 WebSocket 消息推送服务），我们了解了 WebSocket 的实现原理，以及如何基于 ES7 实现 WebSocket 消息推送服务。使用 WebSocket 可以实现服务端向客户端推送消息，提高系统性能和实时性，同时也为我们展示了 Node.js 和 WebSocket 的强大功能和优秀的开发体验。在实际项目中，我们需要根据实际情况选择不同的 WebSocket 实现方案，并结合业务场景来做出合理的决策。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a706295b1f8cacd25f770