在传统的 Web 开发中，客户端与服务器的通讯是通过 HTTP 协议实现的。但是，HTTP 协议是一种无状态协议，每次请求都需要重新建立连接，无法实现实时通讯。为了解决这个问题，HTML5 引入了 WebSocket 技术，使得 Web 应用能够实现实时通讯。
WebSocket 简介
WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务器主动向客户端推送消息，而不需要客户端重新发送请求。WebSocket 协议基于 HTTP 协议，握手时使用 HTTP 协议，但是握手成功后，数据传输时使用 WebSocket 协议。
WebSocket 的 API 很简单，只需要通过 JavaScript 创建 WebSocket 对象，然后监听相应的事件即可。下面是一个简单的示例代码：
-- -------------------- ---- ------- --- -- - --- --------------------------------- --------- - ---------- - ---------------------- ------ -- ------------ - --------------- - ------------------- - ------------ -- ---------- - ---------- - ---------------------- ------ --
上面的代码创建了一个 WebSocket 对象，并监听了三个事件：onopen（连接建立成功）、onmessage（收到消息）和onclose（连接关闭）。当服务器向客户端发送消息时，onmessage事件会被触发。
Socket.io 简介
Socket.io 是一个基于 WebSocket 的实时通讯库。它能够在客户端和服务器之间建立实时、双向的通讯，并且支持多种传输协议（如 WebSocket、XHR、JSONP 等）。Socket.io 采用事件驱动的方式，通过事件来传递消息。
Socket.io 有两个部分：客户端库和服务器库。客户端库可以在浏览器中直接使用，服务器库可以在 Node.js 中使用。下面是一个简单的示例代码：
-- -------------------- ---- -------
-- ------
--- -- - -----------------------------
------------------- ---------------- -
----------------------
-------------------- -------------- -
------------------- - ------
-- --------
---------------------- - ------
---
----------------------- ---------- -
-----------------------
---
---
-- -----
--- ------ - ------------------------------------
-------------------- ---------- -
--------------------
---
-------------------- -------------- -
------------------- - ------
---
----------------------- ---------- -
--------------------
---
-- ----
------------------- ----------上面的代码创建了一个基于 Node.js 的服务器，并使用 Socket.io 库来处理客户端的连接。当客户端连接成功后，会触发connection事件，然后可以监听客户端发送的消息和断开连接事件。客户端也可以通过connect事件来监听连接成功事件，然后可以发送消息和监听服务器发送的消息。
总结
WebSocket 和 Socket.io 都是实现 Web 实时通讯的技术，它们可以使得 Web 应用能够实现实时、双向的通讯。WebSocket 是一种基于 TCP 的协议，它的 API 很简单，可以直接使用 JavaScript 来创建 WebSocket 对象。Socket.io 是一个基于 WebSocket 的实时通讯库，它支持多种传输协议，并且采用事件驱动的方式来传递消息。
在实际开发中，我们可以根据实际需求来选择使用 WebSocket 还是 Socket.io，它们都有各自的优点和适用场景。例如，WebSocket 适用于需要大量数据传输的场景，而 Socket.io 则适用于需要实现实时通讯和多协议支持的场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653b7db87d4982a6eb5d4cd9