随着 Web 技术的不断发展，实时通信成为了一个非常重要的应用场景，比如在线聊天、多人协作等都需要实时通信的功能。而 Socket.io 就是一个非常好用的实时通信框架，它可以同时支持 Web 端和服务端的实时通信，而且还支持多种协议，非常适合在前端场景中使用。
Socket.io 的基本原理
Socket.io 是一个基于事件驱动的实时通信框架，使用了 WebSocket、Long polling 等传输协议，可以支持跨域和断线重连等特性。它由两部分组成：一个是服务端的 Node.js 模块，另一个是前端的 JavaScript 库。
当客户端连接到服务端时，Socket.io 会自动选择最佳的传输方式，如果浏览器支持 WebSocket，就会使用 WebSocket，否则会使用 Long polling。客户端和服务端通过事件进行通信，这些事件可以自定义，也可以使用预定义的系统事件。
使用 Socket.io 实现实时聊天室
为了演示 Socket.io 的使用，我们可以编写一个实时聊天室的示例。
服务端代码
首先，我们需要先安装 Socket.io 的 Node.js 模块：
npm install socket.io
然后，编写服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- -------- - ---------------------
----- --- - ----------
----- ------ - -----------------------
----- -- - -----------------
-------------------------------- - ------------
------------------- -------- -- -
----------------------
----------------------- -- -- -
------------------------
---
-------------------- --------- -- -
-------------------- ---------
------------------ ---------
---
---
------------------- -- -- -
----------------------
---该示例中，我们通过 Express.js 搭建了一个简单的 HTTP 服务器，并将静态文件的位置指定为 public 文件夹。然后，我们创建了一个 Socket.io 实例，并在客户端连接时输出日志，在客户端断开连接时也输出日志，在收到客户端发来的 message 事件时，输出消息内容，并广播给所有连接的客户端。
客户端代码
接下来，我们编写前端代码为客户端连接服务器，发起聊天请求，并实时接收服务器的响应。
-- -------------------- ---- -------
--------- -----
------
------
---------------- -------------
------- ---------------------------------------
--------
----- ------ - -----
----- ---- - -------------------------------
----- ----- - --------------------------------
----- -------- - ------------------------------------
------------------------------- ------- -- -
-----------------------
----- ------- - ------------
----------- - ---
---------------------- ---------
---
-------------------- --------- -- -
----- -- - -----------------------------
-------------- - --------
-------------------------
---
---------
-------
------
--- -------------------
------
------ ------------
-------------------
-------
-------
-------该示例中，我们首先在页面中引入了 Socket.io 的 JavaScript 库，然后创建了一个 Socket.io 实例，连接到服务器。在表单提交时，我们从输入框中获取消息内容，并通过 socket.emit 方法发送到服务端。
当服务端收到消息后，会触发 message 事件，我们在客户端也监听 message 事件，在接收到消息时，将消息显示在页面上。
运行示例
将服务端代码保存为 index.js，并将前端代码保存为 public/index.html，然后在命令行中进入该目录，输入 node index.js 命令启动服务端，再在浏览器中打开 http://localhost:3000，即可看到实时聊天室的页面。
总结
使用 Socket.io 可以很方便地实现前端实时通信的功能，节点服务端和浏览器客户端无缝对接，同时支持多种协议和多种事件类型。要使用 Socket.io 实现实时通信，只需要在服务端安装 Socket.io 模块，创建服务器实例，并监听客户端连接和事件，然后在客户端引入 Socket.io 库，创建客户端实例，并连接到服务器，发送和接收事件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e3fdc48841e9894ac7bfa