Socket.io笔记(踩坑指南)

type

Post

status

Published

date

Aug 7, 2024

slug

socketio

summary

基于Socket.io实现信息广播

Socket.IO学习笔记

本篇仅作为默默的学习笔记，不保证知识完整且绝对正确，如有错漏之处欢迎指出。
更多信息请查看Socket.IO文档官网中文网

官网：https://socketio.p2hp.com/docs/v4/

中文文档：https://socket.io/zh-CN/docs/v4/

一、前端(组合式VUE3)

1.安装依赖

2.配置和连接后端Socket.IO

socket=io("后端地址")是最简单和必须配置项，更详细的常用配置见下方代码块。

当代码运行到这一段时，会立即触发Socket.IO的connection事件，即后端的io.on('connection', socket => {})

重点注意：socket需要放在pinia或其他可全局共享或局部共享的地方，这样可保证使用的是同一个链接。如果只是用hooks封装了一下，每次从hooks导出都会创建一个新的socket链接，即一个前端页面重复创建了N个socket链接

3.向服务器发送消息

room-join是自定义的事件名，data是要传递的数据，后端要用对应的socket.on('room-join', result => {})来监听

4.监听后端返回的事件

connection是自定义的连接事件名，后端在对应的io.on('connection', socket=> {socket.emit('room-join', formData)})中emit发送的信息会被监听到

5.手动开启和关闭连接

6.开启和取消事件监听

二、后端(Node.JS)

1.安装依赖

2、项目模板

3.部分说明：

1、io.xxx方法是基于整个Socket.IO服务器实例的，所以可以获取服务内所有的信息，要获取当前连接的用户的信息和事件，用socket.xxx。当然，这个io和socket都是自己声明的。

2、使用io.sockets.adapter来查看所有用户连接的信息。例如使用io.sockets.adapter.rooms来查看所有房间列表。

3、使用socket.handshake来查看当前用户连接的信息。例如使用socket.handshake.address可以查看当前连接用户的IP地址

4、首次连接时，Socket.IO会给连接用户创建一个唯一的用户id(Set函数)，并根据这个id创建一个唯一的房间id(Set函数)。id的创建不可控制，断线重新就会改变。socket.id查看当前用户的id

也就是说，默认情况下以当前用户为房主建立了一个同id的房间，其他人可以加入这个房间，也就是群组通信。加入不存在的房间号就会创建房间，所以可以使用socket.join(自定义ID)来创建房间。如果房间内没有用户了，该房间会自动销毁。

6、socket.handshake.auth或socket.handshake.query来获取自己传递的参数

7、io.to(roomID).emit('room-message', msg)发给信息给房间(roomID)内的所有成员，room-message是自定义事件

想了解更多参数可以打印了自己看:console.log(socket)

三、上线服务器之后需要注意的的配置

网站主域名用到HTTPS协议，所以会出现跨域问题。仅举例我用的这种解决方式，即配置Socket.IO的自定义路径，再设置Nginx代理，从wss加密连接转接到后端ws连接(类比HTTPS→HTTP)

1.前端配置

在socket里面配置好baseurl和path

简易写法

添加其他配置

2.Node后端配置

配置跨域的orgin和Socket服务器的path

注意：origin:'*'表示所有IP来源都可以请求服务器，仅建议开发中使用。
生产模式中设置为网站主域名即可,例如origin:'https://example.com'

3. Nginx 配置

将后端路径从http://服务器公网地址:后端端口号/后端API接口 重定向到 域名/chatting/

4.验证

以上配置完整之后，在 CMD 输入以下命令即可查看是否成功：

如果没有自定义接口，则默认是

连接成功会返回类似下面格式的信息

更多信息请查看Socket.IO文档