随着互联网技术的发展，各种应用程序越来越需要实时通信的功能。WebSocket 是一种基于 TCP 协议的全双工通信协议，它可以在浏览器和服务器之间建立一个稳定的连接，实现实时通信的效果。在前端开发中，我们可以使用 JavaScript 来通过 WebSocket 连接服务器实现推送消息的功能。
WebSocket 的优势
WebSocket 相比传统的 HTTP 协议，有如下优势：
- 实时性更强：WebSocket 可以做到实时双向通信，无需等待请求和响应，可以实时地推送和接收数据。
- 减少网络传输的开销：WebSocket 连接建立后，数据的传输只需在一次握手阶段传输头信息，之后只传输自身的数据信息，减少了网络传输的开销，提高了数据传输的速度。
- 兼容性更好：WebSocket 协议已经成为 HTML5 标准，大部分浏览器都支持 WebSocket，无需下载插件。
实现 WebSocket 连接
服务端
WebSocket 连接需要在服务端打开一个 WebSocket 服务端口，在 Node.js 中可以通过 ws 包来实现 WebSocket 服务端，代码如下：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
------------------- ------------
---------------- -------- ----------------- -
---------------------- -------------
---
-------------- --------
---以上代码使用了 ws 包来实现了一个简单的 WebSocket 服务端，它会在 8080 端口上监听客户端的连接请求，并在连接成功时打印 "client connected"，并且可以接收客户端发送的消息并打印出来，在连接成功后发送 "hello world" 到客户端。
客户端
在客户端中，我们需要使用 JavaScript 来连接 WebSocket 服务端，并实现消息的收发功能。代码如下：
-- -------------------- ---- ------- ----- -- - --- --------------------------------- --------- - -------- ------ - ------------------------- ----------------- -- ------------ - -------- --------------- - ---------------------- ---------------- --
以上代码创建了一个 WebSocket 实例，并通过 ws.onopen 事件监听器在连接成功后打印 "connected"，并且可以在连接成功后发送消息 "hello" 到 WebSocket 服务端中，通过 ws.onmessage 事件监听器来监听服务端发送的消息，并打印出来。
接收推送消息
上面的代码只能发送消息和接收客户端发送的消息，如果想要接收服务端主动推送过来的消息该怎么做呢？这需要使用 WebSocket 自带的 onmessage 事件监听器来实现。服务端可以随时往客户端推送消息，客户端需要准备好接收的过程。
在客户端中，我们可以如下来实现：
ws.onmessage = function incoming(event) {
console.log(`received: ${event.data}`);
};以上代码中，当服务端发送消息过来时，会触发 onmessage 事件，从而执行函数中的代码。
在服务端中，我们可以通过 ws.send 方法来主动往客户端推送消息，如下所示：
-- -------------------- ---- -------
------------------- -------- -------------- -
------------------- ------------
-------------- --------
---------------------- -
----- ---- - --- -------
---------------- ---- -- -------------------------------
-- ------
---以上代码中，我们通过 setInterval 函数来定时推送消息到客户端中，实时发送当前时间信息，客户端会在接收到消息后打印出当前时间信息。
总结
通过本文的介绍，我们了解了如何使用 JavaScript 来通过 WebSocket 连接服务器实现推送消息功能，包括如何建立 WebSocket 连接，接收客户端消息，服务端主动推送消息等内容。随着对实时性需求的增加，WebSocket 连接在前端开发中越来越重要，而本文介绍的 WebSocket 推送消息功能也是从实际开发中得出的经验，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0c77fb5eee0b5257c6e6c