WebSocket 是一种基于 TCP 的协议，用于实现浏览器和服务器之间的双向通信。它可以在客户端和服务器之间创建一个持久连接，使得服务器可以主动向客户端推送数据。WebSocket 可以用于实时通信、在线游戏、在线聊天等场景。
在前端开发中，我们可以使用 socket.io 库来搭建 WebSocket 服务器。socket.io 是一个面向实时应用的 JavaScript 库，它提供了基于事件的双向通信机制，支持 WebSocket、轮询等多种传输协议。本文将介绍如何使用 socket.io 搭建一个简单的 WebSocket 服务器。
安装 socket.io
首先，我们需要安装 socket.io 库。可以使用 npm 命令进行安装：
npm install socket.io
创建 WebSocket 服务器
接下来，我们需要创建一个 WebSocket 服务器。首先，创建一个 index.html 文件，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- --------------
-------
------
------- ------------------------------------------------------------
--------
-- -- --------- ---
--- -- - ---------------------------
-- ------
------------------- ---------------- -
-------------- ---- ------------
-- --------
----------------------- ---------- -
----------------- ---------------
---
-- ------------
--------------- --------- ------------- -
--------------------- - - -----
-- -----------
------------- --------- -----
---
---
---------
-------
-------在上面的代码中，我们使用 socket.io 库创建了一个 WebSocket 服务器，监听 8080 端口。当有客户端连接到服务器时，会触发 connection 事件，我们可以在该事件中监听客户端发送的消息、断开连接等事件。
创建客户端页面
接下来，我们需要创建一个客户端页面，用于连接到 WebSocket 服务器并发送和接收消息。创建一个 client.html 文件，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- --------------
-------
------
------ ------------ ------------
------- -----------------------
--- -------------------
------- ------------------------------------------------------------
--------
--- ------ - ----------------------------
-- ------------
--------------- --------- ------------- -
--- -- - -----------------------------
------------ - ----
----------------------------------------------------
---
-- ----
--------------------------------------------------------- ---------- -
--- --- - -----------------------------------------
----------------- --------- -----
---------------------------------------- - ---
---
---------
-------
-------在上面的代码中，我们使用 socket.io 库连接到我们创建的 WebSocket 服务器。当服务器发送消息时，会触发 chat message 事件，我们可以在该事件中处理接收到的消息。当用户点击发送按钮时，会发送一个 chat message 事件到服务器，并清空输入框中的文本。
运行 WebSocket 服务器
最后，我们需要在终端中运行 WebSocket 服务器。打开终端，进入到 index.html 文件所在的目录，执行以下命令：
node index.html
然后，在浏览器中打开 client.html 文件，即可连接到 WebSocket 服务器并发送和接收消息。
总结
本文介绍了如何使用 socket.io 库搭建一个简单的 WebSocket 服务器，并创建一个客户端页面连接到该服务器并发送和接收消息。使用 WebSocket 可以实现双向通信，非常适合实时通信、在线游戏、在线聊天等场景。socket.io 库提供了丰富的 API 和事件，非常方便使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660bc3bdd10417a222bfc29e