背景简介
Socket.io 是一个基于事件驱动的实时网络通信库，能够在浏览器和服务器之间实现双向通信，并且允许使用不同的协议（例如 WebSocket 和轮询）来实现通信。
然而，在使用不同版本的 Socket.io 库时，会发现参数传递的方式不一致，导致代码出现兼容性问题，这篇文章主要介绍如何在不同版本的 Socket.io 中传递参数。
Socket.io 传递参数的方式
Socket.io 中传递参数的方式有两种：URL 查询参数和事件参数。
URL 查询参数
URL 查询参数的传参数方式类似于 HTTP GET 请求中的查询参数，即将参数键值对附加在 URL 后面，以问号分隔。
例如，假设我们要向后端发送一个名为 "message" 的查询参数，其值为 "hello"，则 URL 为：
http://localhost:3000?message=hello
在 Socket.io 2.x 版本中，可以通过以下方式向服务器发送 URL 查询参数：
const socket = io('http://localhost:3000?message=hello');在 Socket.io 3.x 版本中，向服务器发送 URL 查询参数的方式略有不同，需要通过 url 选项进行配置：
const socket = io({
url: 'http://localhost:3000?message=hello'
});事件参数
事件参数指传递给事件处理函数的参数，通过事件参数可以向服务器发送数据。
例如，假设我们定义一个名为 "chat message" 的事件，需要向后端发送一个名为 "message" 的数据，其值为 "hello"，则发送代码如下：
socket.emit('chat message', 'hello');在 Socket.io 2.x 版本中，事件参数可以直接作为函数的参数传递。
在 Socket.io 3.x 版本中，则需要将事件参数打包成一个对象，包括两个属性：
name：事件名称data：事件数据
例如，上述代码在 Socket.io 3.x 版本中需要改为：
socket.emit({
name: 'chat message',
data: 'hello'
});跨版本兼容解决方案
如上所述，Socket.io 在不同版本中传递参数的方式存在差异，而对代码兼容性产生了影响。
例如，一个使用 Socket.io 2.x 版本的项目要升级到 Socket.io 3.x 版本，原本正确的代码可能会在更新后出现错误，需要进行修改。
为了避免出现这种情况，可以采用以下跨版本兼容解决方案。
通过 URL 查询参数传递数据
在 Socket.io 3.x 版本中，通过 URL 查询参数传递数据的方式与 Socket.io 2.x 版本有所不同，可以通过以下方法进行兼容：
-- -------------------- ---- -------
-- ----
----- --------- - --- ----------------------------------------
-- -----
----- ------- - -------------------------
-- --- --------- --
----- ------ - ----
---- ------------------------
------ -
-------- -------
-
---以上代码在 URL 中获取查询参数，并传递给 io() 函数的 query 选项，来进行数据传递。
通过事件参数传递数据
在 Socket.io 2.x 版本中，可以直接将事件参数作为函数的参数传递。而在 Socket.io 3.x 版本中，则需要将事件参数打包成一个对象，并传递给 emit() 函数。
为了兼容这两个版本，可以通过以下方法进行兼容：
// 兼容 Socket.io 2.x
socket.emit('chat message', 'hello');
// 兼容 Socket.io 3.x
socket.emit({
name: 'chat message',
data: 'hello'
});以上代码根据当前使用的 Socket.io 版本进行判断，在不同版本下分别采用适合的参数传递方式。
总结
- Socket.io 传递参数有两种方式：URL 查询参数和事件参数
- 不同版本的 Socket.io，传递参数的方式不一致，需要注意兼容性问题
- 可以通过 URL 查询参数和事件参数进行跨版本兼容
示例代码
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- ----------------- ------- ------ ------ ---------- ----------- ----------------------- -- ------- -------------------- ------- --------------------------------------- ------- ------------------------ ------- -------
-- -------------------- ---- -------
-- --------
----- ----- - ---------------------------------
----- --- - -------------------------------
----- ------ - -----
-- ------------
----------------------------- -- -- -
----- ------- - ------------
-- -- --------- ---
-- ----------------- --------- ---------
-- -- --------- ---
-------------
----- ----- ---------
----- -------
---
---
-- ----------
--------------- --------- ------ -- -
-------------------- ------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f45b7df6b2d6eab3d67f06