前言
近几年，随着Web应用的日益普及，实时性成为了Web开发中的一个重要话题。在很多场景下，如聊天室、游戏等等，我们需要实现即时通讯的功能。本文将介绍如何使用 Socket.io 实现即时通讯功能，并附带示例代码。
Socket.io 简介
Socket.io 是一个实现了 WebSocket 协议的 JavaScript 库，可以在客户端和服务器之间实现真正意义上的双向实时通信。为了支持传输的稳定性和兼容性，Socket.io 支持自适应的传输，可以在浏览器端自动降级为使用轮询或长轮询等传输方式。
Socket.io 是一个开放源代码的项目，支持跨平台使用。它的服务器端是基于 Node.js 构建的，客户端则是支持所有现代浏览器以及 Node.js 平台。
实现流程
环境准备
在开始学习之前，我们需要确保有 Node.js 运行环境，同时安装 Socket.io 库。打开命令行或终端窗口，输入以下命令进行安装：
npm install socket.io
服务端代码
服务端代码的实现非常简单，只需要监听一个端口，并等待客户端接入即可。我们的代码会监听全局所有的连接，并在有客户端接入的时候发出提示。
const io = require('socket.io')(port);
io.on('connection', (socket) => {
console.log('a user connected');
});为了完成真正的双向通讯，我们需要在此基础上添加一定的代码。Socket.io 提供了回调函数的方式，可以在客户端向服务器发送消息时进行响应处理。在本例中，我们定义了一个 chat message 事件，并接收到客户端发送过来的消息后，再将其广播给所有当前连接上的客户端。
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- ----- -- -
--------------------- - - -----
------------- --------- -----
---
----------------------- -- -- -
----------------- ---------------
---
---客户端代码
客户端的代码相对较为简单，首先我们需要在 HTML 文件中导入 Socket.io 库文件：
<script src="/socket.io/socket.io.js"></script>
接着，我们可以编写一些 JavaScript 代码来处理服务器端发送过来的消息，并通过事件监听的方式将消息显示在页面上：
-- -------------------- ---- -------
--------
----- ------ - -----
-------------------- -- -
------------------- -- ---------------- ---- ----
----- --- - --------------
----------------- --------- ----- -- --------
----------------
------ ------
---
--------------- --------- ----- -- -
-------------------------------------------
---
---------示例代码
下面是一个完整的示例代码。该代码可以在 Chrome 和 Firefox 等现代浏览器中运行，同时也可以通过 Node.js 运行在服务器环境中。
服务端代码
-- -------------------- ---- -------
----- --- - --------------------------------------
----- -- - --------------------------
----- -- - --------------
----- ---- - ---------------- -- -----
---------------- -- -- -
------------------- --------- -- ---- -------------
---
-------- ------------ ---- -
--------------------- - -------------- ----- ----- -- -
-- ----- -
-------------------
------ -------------- ------- -------------
-
-------------------
--------------
---
-
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- ----- -- -
--------------------- - - -----
------------- --------- -----
---
----------------------- -- -- -
----------------- ---------------
---
---客户端代码
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
------- ---------------------------------------
------- --------------------------------------------------------
-------
- -
------------ ------ ---------- -----------
-
--------
-------
------
--- -------------------
----- ----------
------ ------ ------------------ -----------------------
-------
--------
----- ------ - -----
-------------------- -- -
------------------- -- ---------------- ---- ----
----- --- - --------------
----------------- --------- ----- -- --------
----------------
------ ------
---
--------------- --------- ----- -- -
-------------------------------------------
---
---------
-------
-------总结
使用 Socket.io 实现即时通讯功能非常简单，只需要专注于业务逻辑、关注用户体验即可。Socket.io 的兼容性和稳定性非常高，同时也可以很方便地在 Node.js 和浏览器端实现对于即时通讯的支持。最后附上 GitHub 仓库地址供读者参考：https://github.com/socketio/socket.io
如果您还不熟悉 Node.js 和 JavaScript 相关技术，请参考我的另一篇文章：Node.js 与 JavaScript 开发的那些事儿。
本文介绍了 Socket.io 的基本使用，如果您想要进一步学习 Socket.io 的高级用法，可以前往官方文档：https://socket.io/docs/v4/ 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a22c27add4f0e0ffa3ad62