如何使用 Socket.io 创建实时 Web 应用程序
在 Web 应用程序中，实时通信是一个很常见的需求，有些应用需要实时显示聊天消息，有些应用需要实时更新数据展示，而这些需求确实有些难以实现。之前，开发者们通常会选择使用轮询或长轮询的方式，但这种方式会带来很大的性能损失。现在，我们可以使用 Socket.io 来创建实时 Web 应用程序。
什么是 Socket.io？
Socket.io 是一个流行的 JavaScript 库，它可以帮助我们轻松地在客户端和服务器之间建立实时的双向通信。它基于 WebSocket 协议，但它也支持使用轮询和长轮询等方式进行通信。Socket.io 可以运行在 Node.js 环境中，也可以运行在浏览器中，因此可以实现跨平台、跨设备的实时通信。
使用 Socket.io 构建实时 Web 应用程序的步骤
- 安装 Socket.io
我们可以使用 npm 安装 Socket.io。在命令行中输入以下命令：
npm install socket.io
这将安装 Socket.io。
- 创建服务器
在创建服务器之前，我们需要引入 Express 库。如果您不熟悉 Express 库，可以查看我的另一篇文章。以下是服务器代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - ---------------------- - --------------- --- ----- ------ - ---------------- -- -- - ---------------------- -- --------- ---
这里我们使用 Express 库创建了一个服务器，并监听了端口 3000。在请求根路径时，服务器会发送一个文件，这个文件就是我们要创建的 HTML 文件。
- 创建 HTML 文件
在我们的项目目录中，我们创建一个名为 index.html 的文件，并添加 Socket.io 的客户端库引用，以下是 HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ---- ------------
------- ---------------------------------------
-------
------
------------ ---- ---------
------
------ ----------- ------------- -----------------------
------ ----------- ------------ ----------------------
------- ------------- -----------------------
-------
--- -------------------
-------
--------
----- ------ - -----
----- ------------- - ------------------------------------
----- ------------ - -----------------------------------
----- -------- - ------------------------------------
----- ---------- - --------------------------------
------------------------------------ -- -- -
----- ---- - -
--------- --------------------
-------- -------------------
--
----------------- --------- ------
------------------ - ---
------ ------
---
--------------- --------- ------ -- -
----- ------- - -----------------------------
----------------- - ------------------ -----------------
------------------------------
---
---------
-------这是一个很简单的 HTML 文件，其中包括一个表单和一个消息列表。我们将监听表单的提交事件，并在点击按钮时发送数据给服务器，服务器将广播这个消息给所有连接的客户端。
- 添加 Socket.io 逻辑
现在我们需要在服务器端管理 Socket.io 连接，以下是服务器代码：
-- -------------------- ---- -------
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- ------ -- -
------------------------------ ------------------
------------- --------- ------
---
----------------------- -- -- -
----------------- ---------------
---
---这里，我们引入 Socket.io 并使用 server 创建一个 Socket.io 实例。然后，我们监听 connection 事件，当有用户连接时，服务端会打印“a user connected”。当用户发送消息时，服务器会将消息广播给所有连接的客户端，并打印消息到控制台。当用户断开连接时，服务器会打印“user disconnected”。
- 运行应用程序
现在我们可以运行应用程序了。在命令行中输入以下命令：
node index.js
然后，打开浏览器并访问 http://localhost:3000，你将看到一个页面，其中包含一个表单和一个消息列表。输入一个用户名和一条消息，点击 Send 按钮，所有连接的客户端都会收到这个消息。
结论
Socket.io 提供了一种简单易用的方式来实现实时 Web 应用程序。不需要再使用长轮询或者 WebSocket 技术来手动实现通信。使用 Socket.io 能够帮助我们管理客户端和服务端之间的通信，减少了很多复杂性和性能问题。只需简单的几行代码，我们就能够创建一个实时的 Web 应用程序，这对于实时通信而言是非常有用的。
示例代码： https://github.com/jackypan1989/socket-io-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6732f4c20bc820c5823fb4ed