socket.io的小例子
前言
socket.io是原生ws封装的第三方库，它不仅仅对客户端做了封装，还对服务端也进行了封装。
提供了很多能用得到的功能，比如：
断链自动尝试重链
对不支持ws的浏览器做兼容（降级轮循http）
发送和监听消息的封装（原生的，无论前后端写起来都比较冗长）
服务端
socket.io当然不会仅支持node，但是官方推荐node体验比较好
import { createServer } from "http";
import { Server } from "socket.io";
const httpServer = createServer(); // socket.io的服务需要http服务做支撑
const io = new Server(httpServer, { // 初始化ws
cors: { //处理ws跨域问题
origin: "*",
methods: ["GET", "POST"]
}
});
io.on("connection", (socket) => { // 监听ws链接成功
console.log('与客户端链接成功');
socket.on("yanhan", (data) => { // 监听ws的yanhan消息
console.log('收到了阎涵的消息：'+ data);
});
setInterval(() => { // 定时给Yh发送当前时间
socket.emit("toYh", "你好啊，现在已经"+new Date().toLocaleString());
}, 3000);
});
httpServer.listen(3000); // 启动http服务
客户端
这里拿浏览器举例子
<!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>Document</title>
</head>
<body>
<button>阎涵给服务器发消息</button>
</body>
<script src="./lib/socket.io.js"></script>
<script>
// 三方插件socket.io的写法
const socket = io("ws://localhost:3000"); //初始化ws
document.querySelector('button').onclick = ()=>{
socket.emit("yanhan", '我是女大佬');//发送消息
}
socket.on("toYh", (...args) => { //接收消息
console.log('我接收到了toYh事件：', args);
});
</script>
</html>
原生的写法（服务端）
参考：
https://blog.csdn.net/m0_37911706/article/details/128057137
https://github.com/websockets/ws
import WebSocket, { WebSocketServer } from 'ws';
//创建一个WebSocket服务器，在3000端口启动
const server = new WebSocketServer({ port: 3000 });
//只要有WebSocket连接到该服务器，就会触发'connection'事件
server.on("connection", (ws, req) => {
const ip = req.socket.remoteAddress;
const port = req.socket.remotePort;
const clientName = ip + port;
console.log(`客户端-${clientName}： 已连接`);
/* 发送数据：ws通过send()方法来发送数据*/
ws.send(`欢迎 客户端-${clientName}的加入`);
// 接收数据：ws通过message事件来接收数据。当客户端有消息发送给服务器时，服务器就能够触发该消息
ws.on("message", (message) => {
console.log(`收到消息：`+ message);
});
});
