vue3+ts项目中使用
1.安装依赖
// 注意：客户端和服务端版本一定要兼容，尽量一样
npm i socket.io-client -S
2.连接
`socket.io-client` 提供了丰富的配置选项，以适应不同的使用场景和网络环境。以下是一些常见的配置参数及其说明：
1. autoConnect:
- 默认值: `true`
- 描述: 是否在实例化时自动连接到服务器。设置为 `false` 可以手动控制连接的建立。
2. forceNew:
- 默认值: `false`
- 描述: 是否强制创建一个新的连接，忽略任何现有的连接。
3. multiplex:
- 默认值: `true`
- 描述: 是否允许多个 Socket.IO 客户端在同一个 HTTP 连接上多路复用。
4. path:
- 默认值: `/socket.io`
- 描述: 指定 Socket.IO 连接的 URL 路径。
5. reconnection:
- 默认值: `true`
- 描述: 是否在连接断开后自动尝试重新连接。
6. reconnectionAttempts:
- 默认值: `Infinity`
- 描述: 最大的重连尝试次数。
7. reconnectionDelay:
- 默认值: `1000`
- 描述: 重连尝试之间的初始延迟时间（毫秒）。
8. reconnectionDelayMax:
- 默认值: `5000`
- 描述: 重连尝试之间的最大延迟时间（毫秒）。
9. randomizationFactor:
- 默认值: `0.5`
- 描述: 重连延迟的随机化因子，范围在 0 到 1 之间。
10. timeout:
- 默认值: `20000`
- 描述: 连接超时时间（毫秒）。
11. transports:
- 默认值: `['polling', 'websocket']`
- 描述: 指定尝试的传输方式列表。
12. query:
- 默认值: `{}`
- 描述: 发送到服务器的附加查询参数。
13. extraHeaders:
- 默认值: `{}`
- 描述: 发送到服务器的附加 HTTP 头部。
14. agent:
- Node.js 专有，描述: 用于控制请求的 HTTP Agent。
15. pfx, key, passphrase, cert, ca:
- Node.js 专有，描述: SSL/TLS 相关的配置。
16. ciphers:
- Node.js 专有，描述: 指定使用的加密算法。
17. rejectUnauthorized:
- Node.js 专有，描述: 是否拒绝未经授权的证书。
18. perMessageDeflate:
- Node.js 专有，描述: 是否启用 WebSocket 消息的每条消息压缩。
19. localAddress:
- Node.js 专有，描述: 用于绑定网络接口的本地地址。
20. parser:
- 描述: 自定义的解析器，用于替代默认的 Socket.IO 消息解析器。
请注意，某些参数是 Node.js 特有的，可能不会在浏览器环境中使用。在使用这些参数时，请确保它们适合你的运行环境。
import { io, Socket } from 'socket.io-client'
import { ref } from 'vue'
let socket = ref<Socket | null>(null)
let token = 'abc123'
socket.value = io('', {
transports: ['websocket'],
query: { token }
})
3.事件监听
//监听是否连接成功
socket.value.on('connect', () => {
console.log('Socket connected!')
})
//监听是否连接失败
socket.value!.on('disconnect', () => {
console.log('Socket disconnect!')
})
4.发送、接收、断开事件
//发送事件
socket.value.send({
message: 'Hello World'
});
//接收事件
socket.value.on('message', (data) => {
console.log(data);
});
//指定事件
//发送指定事件
socket.value.emit('runningstate', {
message: 'runningstate'
})
socket.value.emit('picture', {
message: 'picture'
})
//接收指定事件数据
socket.value.on('runningstate', (data) => {
console.log(data)
})
socket.value.on('picture', (data) => {
console.log(data)
})
//断开指定事件
socket.value.off('runningstate')
socket.value.off('picture')
5.断开连接
socket.value.disconnect()
node.js中使用
1.安装依赖
npm i socket.io --save
npm i express --save
2.使用
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server, {
cors: {
origin: ['http://localhost:8081'] // 配置客户端可跨域地址
}
});
io.on('connection', (socket) => {
console.log('接收到客户端请求');
socket.on('runningstate', (msg, callback) => {
console.log('客户端请求信息', msg);
callback('你请求成功了')
io.emit('runningstate', {
status: 200,
data: 'result'
});
});
socket.on('picture', (msg, callback) => {
console.log('客户端请求信息', msg);
callback('你请求成功了')
io.emit('picture', {
status: 200,
data: 'result'
});
});
})
server.listen(6789, () => {
console.log('listening on *:6789');
});
简单使用：新建一个node-demo.js文件，复制代码，安装依赖，执行node node-demo.js
