前言：
周六了，想放假的心已经按捺不住了，无心再去shishang雕花了,转头来这里慷慨一下，激扬一下文字，赶快熬过这几个小时。正好最近自己私下捣鼓的小玩意用到了websocket,就简单来做个小demo玩一下,本文也会通过前后两端的视角来聊一下websocket，由于只是第一次玩，请大佬们见谅。
一、Websocket之我是谁
1、一种网络协议
阮一峰老师讲websocket是一种网络通信协议，对网络层面知识了解比较深的同学应该都知道，我们常用的网络通信协议就是HTTP协议，咱们客户端通过http向服务端发送请求，拿到服务端返回的数据来做响应，我称之为单向通信，我们想要拿到服务端变化的数据就要定时向服务端发送请求，俗称“轮询”，这样会变得很慢，很浪费资源，（我司最大业务就是轮询方式，咱不懂也不敢问，可能有其他考量
2、一种服务器推送技术
websocket最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，双向都可发起对话。使用场景，比如聊天室...，属于一种服务器推送技术。
二、服务端实现
本文就简单以node本地服务的方式来实现一版简单的逻辑
const WebSocket = require('ws');
// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocket.Server({ port: 8080 });
let messageQueue = [
{ id: 1, content: "Message 1" },
{ id: 2, content: "Message 2" },
{ id: 3, content: "Message 3" }
];
// 当有客户端连接时触发
wss.on('connection', (ws) => {
console.log('客户端已连接');
// 定时向客户端推送消息队列中的消息
const intervalId = setInterval(() => {
if (messageQueue.length > 0) {
const message = messageQueue.shift(); // 取出队列中的第一条消息
ws.send(JSON.stringify(message)); // 推送消息给客户端
console.log('发送消息:', message);
}
}, 2000); // 每隔2秒推送一条消息
// 当客户端断开连接时触发
ws.on('close', () => {
console.log('客户端已断开连接');
clearInterval(intervalId); // 停止推送
});
// 当服务器接收到消息时
ws.on('message', (message) => {
console.log('收到消息:', message);
});
});
console.log('WebSocket 服务器启动，监听端口 8080');
我们首先引入websocket，本地起一个node服务，设置一个消息队列，向外部暴露出一个8080端口，客户端通过监听这个端口来获取信息，这里面涉及到websocket，node服务端的几个方法，大致用到的也就这些，剩余的可以自行查找下资料
// 创建websocket实例
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
// 监听事件
ws.on()
// 监听连接事件
wss.on('connection', function connection(ws) {
// 处理新的连接
});
// 发送/接收消息
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
ws.send('发送信息')
// 关闭连接
ws.close();
三、客户端实现
const [messages, setMessages] = useState([]);
useEffect(() => {
// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');
// 连接打开时触发
socket.onopen = () => {
console.log('WebSocket 连接成功');
};
// 接收到服务端的消息时触发
socket.onmessage = (event) => {
const newMessage = JSON.parse(event.data); // 解析消息
setMessages((prevMessages) => [...prevMessages, newMessage]); // 将新消息加入到消息列表
};
// 连接关闭时触发
socket.onclose = () => {
console.log('WebSocket 连接已关闭');
};
// 清理 WebSocket 连接
return () => {
socket.close();
};
}, []);
<div>
<h1>WebSocket 消息队列</h1>
<ul>
{messages.map((message) => (
<li key={message.id}>{message.content}</li>
))}
</ul>
</div>
效果
可以看到，没有发送网络请求，完全来自于服务端主动推送,当然这里只实现了服务端主动推送demo,有兴趣的小伙伴可以自己试试双向通信。
客户端常用方法
// 创建连接
const socket = new WebSocket('ws://localhost:8080');
// 连接打开时触发
socket.onopen = () => {};
// 接收到服务端的消息时触发
socket.onmessage = (event) => {};
// 连接关闭时触发
socket.onclose = () => {};
// 清理 WebSocket 连接
socket.close();
四、总结
没有啥好总结的。
