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