在前端开发中，要实现实时通信的需求非常常见，例如聊天室、在线协作编辑、实时监控等等。传统的实现方式多采用轮询（Polling）或长轮询（Long Polling）的方式，在浏览器和服务器之间不断发送请求和响应，效率较低，同时也会对服务器造成很大的负担。而现在，我们可以使用 Socket.io 来实现更高效、更便捷的实时通信。
什么是 Socket.io
Socket.io 是一个针对 WebSocket 进行封装的库，可以让我们更加简单地实现实时通信。WebSocket 是 HTML5 中新增的一种协议，支持双向通信，在浏览器和服务器之间建立一个持久性的连接。而 Socket.io 不仅支持 WebSocket 协议，还能在 WebSocket 不可用时自动降级使用其他协议，例如轮询、长轮询等。
如何使用 Socket.io
使用 Socket.io 非常简单，只需要在浏览器端和服务器端分别引入对应的脚本即可。以下是一个使用 Node.js 的示例，我们以聊天室为例进行说明。
服务器端代码
-- -------------------- ---- -------
----- --- - --------------------------------------
----- -- - --------------------------
----- -- - --------------
-----------------
-------- ------------ ---- -
--------------------- - -------------- ----- ----- -- -
-- ----- -
-------------------
------ -------------- ------- -------------
-
-------------------
--------------
---
-
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- ----- -- -
------------- --------- -----
---
----------------------- -- -- -
----------------- ---------------
---
---上述代码中，我们使用 http 模块创建了一个 HTTP 服务器，并使用 Socket.io 将该服务器升级为支持实时通信的 WebSocket 服务器。在客户端连接成功后，服务器会监听 chat message 事件，将消息内容广播给所有客户端。
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
------- ---------------------------------------
------- -----------------------------------------------------------
-------
- - ------- -- -------- -- ----------- ----------- -
---- - ------------ ----------- -
---- - -------- ----- ----------- ----- -
------------------ - ----- -- -------- ----- -
------ - -------- ----- ----------------- -------- ------ ----- ------- ----- ------- -------- -
-- - ----------- ----- ----------- ----- -
-- - -------- ----- -
--------
-------
------
--- -------------------
----- ----------
------ ----------- ------------ -------------------
---------------------
-------
--------
----- ------ - -----
-------------------- -- -
-------------------
----------------- --------- ---------------------
----------------------
------ ------
---
--------------- --------- ----- -- -
-------------------------------------------
---
---------
-------
-------客户端代码中，我们先引入 socket.io.js 和 jQuery 库。之后通过 io() 函数创建一个 Socket.io 实例，连接到服务器。在消息发送表单提交时，我们调用 emit 方法向服务器发送消息内容，并将输入框清空。服务器收到消息后，会广播给所有客户端，客户端调用 on 方法监听 chat message 事件，并将消息内容添加到消息列表中。
总结
通过上述示例代码的实现，我们使用 Socket.io 实现了浏览器与服务器之间的实时通信。不仅可以用于聊天室，还可以用于在线协作编辑、实时监控等场景。Socket.io 的实现非常简单方便，无需关注底层细节，同时也保证了实时通信的高效性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d9d92968c7c53b0c4327f