在现代 web 应用中，实时通讯已经成为了很重要的一部分，它在很多场景下都起到了至关重要的作用，比如在线游戏、聊天室、在线协作等等。但是要想实现实时通讯，传统的 HTTP 协议似乎并不足够，这时候我们就需要使用 WebSocket。
WebSocket 是一种全双工的通信协议，它与 HTTP 协议一样都是基于 TCP 协议实现的，但与 HTTP 协议不同之处在于，WebSocket 允许服务器主动向客户端发送消息，而不需要客户端发送请求。
在本文中，我们将介绍如何使用 Node.js 和 WebSocket 快速实现一个简单的实时通讯应用。
准备工作
首先，我们需要安装 Node.js 和 WebSocket 模块，在终端中输入以下命令：
- -- ------- - ---- ------- ------- ------ - -- --------- -- - --- ------- ---------
接着，我们创建一个新的 Node.js 项目，并在项目中创建一个名为 server.js 的文件用于编写服务端代码，以及一个名为 index.html 的文件用于编写客户端代码。
现在，我们已经做好了准备工作，可以开始编写代码了。
编写服务端代码
首先，我们需要在 server.js 文件中导入 WebSocket 模块，并创建一个 WebSocket 服务器对象：
----- --------- - ---------------------------- ----- ---- - ---------------- -- -- ---- --- ----- ------ - ----------------------------------- --------- ---- -- -- --------- --- ----- -------- - --- ----------- ----------- ------ ---
接着，我们需要监听 WebSocket 连接事件，并在连接成功时保存连接对象：
----- ----------- - --- ---------------------- ----------------- - ----- ---------- - -------------------- ---------------- ----------------------------- ---
在连接成功时，我们将连接对象存储在 connections 数组中，以便于后续在广播消息时使用。
最后，我们需要监听客户端发送的消息事件，并将消息广播给所有连接的客户端：
---------------------- ----------------- -
----- ---------- - -------------------- ----------------
-----------------------------
------------------------ ----------------- -
------------------------------------ -
-- ------- --- ----------- -
---------------------------------
-
---
---
---在客户端发送消息事件中，我们遍历 connections 数组，并将消息发送给除当前连接之外的所有客户端。
现在我们的服务端代码已经编写完成，我们可以将其保存并运行：
- ---- ---------
如果一切顺利，你应该可以在终端中看到类似于以下的输出信息：
------ -- --------- -- ---- ----
编写客户端代码
在 index.html 文件中，我们需要引入 WebSocket 库，并创建 WebSocket 连接：
---- -- --------- - ---
------- ----------------------------------------------------------------------------------------
---- -- --------- -- ---
--------
----- -- - --- ---------------------------------
------------ - --------------- -
----- ------- - -----------
---------------------
--
---------在连接成功后，我们监听 onmessage 事件，以便于在服务器广播消息时接收并处理。
最后，我们需要编写客户端发送消息的代码：
------ ----------- ------------ --
------- -------------------------------------
--------
-------- ------------- -
----- ------------ - -----------------------------------
----- ------- - -------------------
-----------------
-
---------在点击发送按钮时，我们将文本框中的文本作为消息发送给服务器。
现在我们已经完成了客户端代码的编写，我们可以直接在浏览器中打开 index.html 文件，并在多个窗口中测试实时通讯功能。
总结
在本文中，我们使用 Node.js 和 WebSocket 实现了一个简单的实时通讯应用。WebSocket 是一个十分强大的协议，能够在 web 应用中提供更加灵活和高效的通信手段。
在实际开发中，WebSocket 可以用来实现很多实时通讯功能，如实时聊天、在线游戏、实时协作等等。因此，学习 WebSocket 是前端开发的必备技能之一。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647c2b7f968c7c53b0752868