经过一上午的折腾 websocket简易聊天终于完成了
经过一整个上午的忙碌和努力 终于成功地搭建了一个基于node的 WebSocket的简易聊天应用
如图可见 在不同浏览器下 可以实时进行消息传输和转发 都是实时的 后端是node 前端我用我之前上班写的聊天界面
可以更完善的写一个聊天室出来 基于node和websocket mangodb
前端就是uniapp vue3 uview框架
这个目前还是一个半成品 只是跟着写一下 先把逻辑跑通了来在写 具体的代码
const WebSocket = require(‘ws’);
const wss = new WebSocket.Server({ port: 2333 });
const HEARTBEAT_INTERVAL = 10 * 1000;
const clients = new Map();
function sendHeartbeat(ws) {
ws.send(JSON.stringify({ type: ‘heartbeat’ }));
}
function handleHeartbeatResponse(ws) {
ws.isAlive = true;
}
// 启动心跳机制
function startHeartbeat() {
setInterval(() => {
wss.clients.forEach((ws) => {
// 在发送心跳包前设置 isAlive 为 true
ws.isAlive = true;
sendHeartbeat(ws);
});
// 检查是否有客户端未响应心跳包
setTimeout(() => {
wss.clients.forEach((ws) => {
if (!ws.isAlive) ws.terminate();
});
}, HEARTBEAT_INTERVAL);
}, HEARTBEAT_INTERVAL);
}
wss.on(‘connection’, (ws, req) => {
const clientId = req.headers[‘sec-websocket-key’];
clients.set(clientId, ws);
ws.isAlive = true;
ws.on(‘message’, (message) => {
console.log(“接受数据”,message)
if (message instanceof Buffer) {
// 将 Buffer 转换成字符串
const text = message.toString(‘utf8’);
try {
const data = JSON.parse(text);
if (data.type === ‘heartbeat’) {
handleHeartbeatResponse(ws);
} else {
console.log(`收到消息: ${text}`);
// 广播消息给所有客户端
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(text); // 发送字符串形式的消息
}
});
}
} catch (error) {
console.error(‘无法解析接收到的消息为 JSON 格式。’, error);
}
} else {
console.error(‘接收到的消息不是 Buffer 类型。’);
}
});
ws.on(‘close’, (code, reason) => {
console.log(`客户端 ${clientId} 已断开连接`);
clients.delete(clientId);
});
ws.on(‘error’, (error) => {
console.log(`报错: ${error.message}`);
});
// ws.send(‘hello client’);
});
startHeartbeat();
module.exports = {
wss
};
后端代码就这么点 就可以做一个简单的websocket实时聊天后端了
当然中间也是少不了曲折 很多不会的就去问ai ai解答了在跟着弄就会了 哈哈哈
本文系作者 @2374579255 原创发布在 萌博客。未经许可，禁止转载。
