我们相信:世界是美好的,你是我也是。 来玩一下解压小游戏吧!

socket.io的客户端代码中,服务端的地址默认是可以不填写的。也可以填写一个namespace,或者填一个ws(s)://或者http(s)://开头的(跨域)地址,或者“地址+命名空间”的组合。本文中,可以为这个地址,再添加一些参数信息。那么在服务端如何接收这些新增的参数么?

苏南大叔:Socket.io双向通信教程,取得服务端地址中的参数 - socket
Socket.io双向通信教程,取得服务端地址中的参数(图4-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔的代码编程经验总结。测试环境:win10nodejs@20.18.0express@4.21.2socket.io@4.8.1

前文回顾

socket.io的路径及跨域相关的话题里面,就有提到在客户端初始化的时候,可以传递服务端地址。如果在这个地址后面加上一个目录的话,就是个命名空间了。

本文的代码和最后一篇命名空间的文章,紧密相关。

测试代码

客户端:

<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io("/?author=sunan");
//...
</script>
HTML

服务端:

//...
const socketio = require("socket.io");
const io = socketio(expressServer);
const querystring = require("querystring");
io.on("connection", (socket) => {
  console.log(socket.nsp.name);
  console.log(socket.request.url);
  let qs = querystring.parse(socket.request.url.split("?")[1]);
  console.log(qs);
  console.log(qs.author);
  //...
});
JavaScript

输出:

/
/socket.io/?author=sunan&EIO=4&transport=polling&t=vqcx4r8g
[Object: null prototype] {
  author: 'sunan',
  EIO: '4',
  transport: 'polling',
  t: 'vqcx4r8g'
}
sunan
Plain text

苏南大叔:Socket.io双向通信教程,取得服务端地址中的参数 - 传参方式一
Socket.io双向通信教程,取得服务端地址中的参数(图4-2)

关键代码

关键代码如下:

const querystring = require("querystring");
let qs = querystring.parse(socket.request.url.split("?")[1]);
console.log(qs);
console.log(qs.author);
JavaScript

传递的地址是:

/?author=sunan
Plain text

拿到的地址是:

/socket.io/?author=sunan&EIO=4&transport=polling&t=vqcx4r8g
Plain text

举一反三

举一反三一下,带参数的服务端的地址还可以这么写:

/?author=sunan
/ns2/?author=sunan
ws://localhost/ns3/?author=sunan
http://localhost/ns4/?author=sunan
Plain text

服务端接收的时候,就可以利用io.of()来进行接收了。

io.of("/ns2").on("connection", (socket) => {
  let qs = querystring.parse(socket.request.url.split("?")[1]);
  //...
});
//...
JavaScript

多个socket.io初始化

客户端:

<script src="/socket.io/socket.io.js"></script>
<script>
    // const socket = io();
    const socket1 = io("/?author=sunan");
    const socket2 = io('/ns2?author=sunan');
    const socket3 = io('ws://localhost:80/ns3?author=sunan');
    const socket4 = io('http://localhost:80/ns4?author=sunan');
</script>
JavaScript

输出:

/ /socket.io/?author=sunan&EIO=4&transport=polling&t=xi93m0uy
/ns3 /socket.io/?author=sunan&EIO=4&transport=polling&t=xi93quw2
/ns2 /socket.io/?author=sunan&EIO=4&transport=polling&t=xi93m0uy
/ns4 /socket.io/?author=sunan&EIO=4&transport=polling&t=xi93m0uy
Plain text

苏南大叔:Socket.io双向通信教程,取得服务端地址中的参数 - 运转正常
Socket.io双向通信教程,取得服务端地址中的参数(图4-3)

事情反转

但是,加上不带任何参数的io();这个的时候,输出完全出乎意料了。客户端代码:

const socket = io();
const socket1 = io("/?author=sunan");
const socket2 = io('/ns2?author=sunan');
const socket3 = io('ws://localhost:80/ns3?author=sunan');
const socket4 = io('http://localhost:80/ns4?author=sunan');
JavaScript

输出:

/ /socket.io/?EIO=4&transport=polling&t=ywk16fyc
/ /socket.io/?author=sunan&EIO=4&transport=polling&t=ywk19oc5
/ns3 /socket.io/?author=sunan&EIO=4&transport=polling&t=ywk19597
/ns2 /socket.io/?EIO=4&transport=polling&t=ywk16fyc
/ns4 /socket.io/?EIO=4&transport=polling&t=ywk16fyc
Plain text

从输出结果上看,最后的两个请求出现了变数,author参数丢失。

苏南大叔:Socket.io双向通信教程,取得服务端地址中的参数 - 参数丢失
Socket.io双向通信教程,取得服务端地址中的参数(图4-4)

结语

更多苏南大叔的socket经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   socket