在现代 Web 应用中，实时性是至关重要的。WebSocket 是一种协议，它允许浏览器和服务器在相同的连接上进行双向通信。这种实时性是通过保持持久连接实现的，从而有效地避免了 HTTP 1.1 的每个请求/响应周期。
Socket.io 是一个流行的实时数据传输库，它使得 WebSockets 易于使用，并且能够处理其带宽和连接管理的复杂性。
本文将讲解 Socket.io 如何实现 WebSockets 的数据传输。我们将了解 Socket.io 的核心概念，并探讨如何使用 Socket.io 构建实时 Web 应用程序。
Socket.io 的核心概念
Socket
在 Socket.io 中，Socket 是一个连接客户端与服务器之间的心路通道。它是双向通信的基础，并且您可以通过它来发送和接收消息。每个 Socket 同时也是一个 EventEmitter 的实例，这意味着您可以使用所有 EventEmitter 方法（例如 on 和 emit）来监听和发送事件。
Server
Socket.io 服务器是一个 WebSocket 服务器，它接收来自客户端的建立连接请求，并管理连接。它是双向通信的中心，它允许将事件从客户端传递到服务器，并从服务器传递到客户端。
Namespace
Namespace 是一种逻辑构造，它允许将 Socket.io 代码分组到逻辑单元中。Namespace 可以具有唯一的名称，并且可以具有自己的事件和处理程序。默认情况下，Socket.io 会创建默认 Namespace，但是您可以使用 io.of(namespace) 方法创建和使用其他 Namespace。
Room
房间是一种逻辑结构，它允许将 Socket.io 中的连接按逻辑方式组织起来。您可以将 Socket 加入 Room 中，并且可以将事件发送到特定 Room 中的所有 Socket。房间是仅在服务器端处理的概念，而客户端仅仅只是 Socket。
Socket.io 的实际使用
客户端
如下所示是一个简单的客户端示例，它使用 Socket.io 连接到服务器并向服务器发送消息。
-- -------------------- ---- ------- -- ------ --- ------ - ------------------------------- -- -------- --------- -- -------------------- -------------- - -------------------------- --- -- ------ ------- -- -------------------- ------- ----------
客户端上的 Socket 对象是由 io.connect(url) 方法创建的。在此示例中，我们将其连接到本地服务器端点。一旦成功连接到服务器，我们可以开始监听来自服务器的事件并通过 Socket 发送消息。在此示例中，我们将监听服务器发送的 welcome 事件，并在控制台上打印消息。然后，我们通过 Socket 发送 hello 消息。
服务器端
如下所示是一个简单的服务器端示例，它使用 Socket.io 监听来自客户端的连接请求并处理来自客户端的消息。
-- -------------------- ---- -------
----- -- - ---------------------------
------------------- ---------------- -
-------------- ---- ------------
-- --------
---------------------- - -------- ---------- ---
-- ----------
------------------ -------------- -
------------------ - - ------------
---
-- ---------
----------------------- ---------- -
----------------- ---------------
---
---在服务器端，我们使用 require('socket.io')(port) 方法创建一个 Socket.io 服务器实例。在本例中，我们将其连接到端口 3000。然后，我们使用 io.on('connection', function(socket) { ... }); 监听客户端连接事件。当客户端连接时，我们可以将其 Socket 与客户端关联并开始监听来自客户端的消息。在此示例中，我们监听了客户端发送的 hello 消息，并在控制台上打印消息。
如何使用 Socket.io 构建实时 Web 应用程序
现在您了解了 Socket.io 的基础知识，可以使用它来构建实时 Web 应用程序。下面是使用 Socket.io 来构建一个简单的聊天应用程序的示例。
客户端
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---- -----------
-------
------
--- -------------------
----- ----------
------ ------------ ------------------ -----------------------
-------
------- ---------------------------------------
--------
-- ------
--- ------ - ------------------------------------
-- -------- ----- -------- --
--------------- --------- ------------- -
--- -- - -----------------------------
-------------- - ----
----------------------------------------------------
---
-- ------
------------------------------------------------------------------- ----------- -
-------------------
--- ------- - -----------------------------------------
-- ------ ----- -------- --
----------------- --------- ---------
---------------------------------------- - ---
------ ------
---
---------
-------
-------客户端上的代码非常简单，并且构建了一个简单的表单和聊天消息列表。在我们编写此代码时，我们业务假设了一些页面元素。然后，我们创建一个 Socket 对象并将其连接到服务器。一旦成功连接到服务器，我们可以开始监听来自服务器发送的消息并通过 Socket 向服务器发送消息。
在此示例中，我们使用 socket.on('chat message', function(msg) { ... }); 监听来自服务器的 chat message 事件，并将消息添加到聊天列表中。我们还使用表单提交事件来处理并通过 Socket 向服务器发送消息。
服务器端
-- -------------------- ---- -------
----- -- - ---------------------------
-- --------
--- ---------------- - ---
------------------- ---------------- -
-------------- ---- ------------
-- ------ ------------------ ---
------------------------------
-- -------- ----- -------- --
--------------- --------- ------------- -
--------------------- - - -----
-- -----------
----------------------------------------- -
----------------- --------- -----
---
---
-- ---------
----------------------- ---------- -
----------------- ---------------
-- ----- ------------------ -----
--- ----- - ---------------------------------
-- ------ - --- -
------------------------------ ---
-
---
---在服务器端，我们使用 Socket.io 监听来自客户端的连接请求并处理来自客户端的消息。在此示例中，我们使用一个名为 connectedClients 的数组来存储连接到服务器的所有客户端。
然后，我们监听客户端发送的 chat message 消息，并将消息传递回每个已连接的客户端。最后，我们监听客户端断开连接事件，并将客户端从 connectedClients 数组中删除。
以上是一个简单的示例，但是这将展示您使用 Socket.io 构建实时 Web 应用程序的方式。
总结
- WebSocket 是一种协议，它允许浏览器和服务器在相同的连接上进行双向通信。
- Socket.io 是一个用于实现 WebSocket 数据传输的流行库，它简化了 WebSockets 的使用，并处理了其带宽和连接管理的复杂性。
- Socket.io 的核心概念包括 Socket、Server、Namespace 和 Room。
- 使用 Socket.io 构建实时 Web 应用程序需要了解如何创建 Socket、如何监听 Socket 事件以及如何在客户端和服务器端之间处理消息的传递。
- Socket.io 可以用于很多实时 Web 应用程序，例如聊天应用程序、实时协作应用程序等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6452271c675af4061b5cd225