socket.io的使用
葛智敏
安装
npm install socket.io # 写这篇文档时: "socket.io": "^4.5.4"快捷使用
备注：通过快捷使用的例子，就可以走通websocket的流程了。
node服务器端：
import * as express from "express";
import { createServer } from "http";
import { Server } from "socket.io";
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
cors: {
/*
允许 http://127.0.0.1:5500 可以跨域访问该socket, 不写的话本地调试报跨域
数组可以写多个可以跨域的地址
*/
origin: ['http://127.0.0.1:5500']
}
});
io.on("connection", (socket) => {
console.log("连接成功了，连接的信息:", socket)
});
httpServer.listen(12306);注意跨域的配置,官方文档： https://socket.io/zh-CN/docs/v4/handling-cors/
前端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>socket.io</title>
</head>
<body>
<button>发送数据到服务器</button>
<script src="https://unpkg.com/socket.io-client@4.4.1/dist/socket.io.min.js"></script>
<script>
const socket = io.connect('ws://localhost:12306')
socket.on('disconnect', () => {
console.log('closed')
})
</script>
</body>
</html>详细使用
定义path
官方文档：https://socket.io/zh-CN/docs/v4/server-options/
Server：
import { createServer } from "http";
import { Server } from "socket.io";
const httpServer = createServer();
const io = new Server(httpServer, {
path: "/my-custom-path/"
});Client：
import { io } from "socket.io-client";
const socket = io("https://example.com", {
path: "/my-custom-path/"
});allowRequest
自定义客户端的连接规则，配合cors一起使用
cors作用：用来放行
allowRequest作用：cors放行后，是否需要再次放行
Server：
const io = new Server(httpServer, {
cors: {
origin: ['http://127.0.0.1:5500'],
allowedHeaders: ['my-token'],
credentials: true
},
allowRequest: (req, callback) => {
console.log('req.headers:', req.headers)
/*
callback的第2个参数:
true: 允许连接
false: 不允许连接
*/
if ('my-token' in req.headers) {
// 请求头有 my-token 就允许连接
callback(null, true)
} else {
// 请求头没有my-token不许连接
callback(null, false)
}
}
})Client：
const socket = io.connect('ws://localhost:12306', {
extraHeaders: {
'my-token': '123-456-789'
}
})
socket.on('test', chunk => {
console.log(chunk)
})
socket.on('disconnect', () => {
console.log('closed')
})断开连接
Server：
io.on('connection', socket => {
console.log('新的客户端连接进来了')
setTimeout(() => {
socket.disconnect() // 这一行
}, 5000)
})Client：
const socket = io.connect('ws://localhost:12306', {
extraHeaders: {
'my-token': '123-456-789'
}
})
setTimeout(() => {
socket.disconnect() // 这一行
}, 5000)
类似资料：