websocket监听消息数量,已读未读,要怎么写,有没有例子
时间: 2024-03-02 08:05:32 浏览: 13
要实现websocket监听消息数量和已读未读,可以在后端维护一个消息状态的数据结构,并在前端通过websocket连接不断地获取最新的消息状态。
下面是一个简单的示例代码,假设你使用的是Node.js和Socket.IO:
后端代码:
```javascript
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
// 维护消息状态的数据结构
const messageStatus = {
total: 0,
unread: 0
};
io.on('connection', (socket) => {
console.log('a user connected');
// 发送最新的消息状态给客户端
socket.emit('messageStatus', messageStatus);
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
// 模拟新消息到来
setInterval(() => {
messageStatus.total++;
messageStatus.unread++;
// 向所有客户端发送最新的消息状态
io.emit('messageStatus', messageStatus);
}, 5000);
http.listen(3000, () => {
console.log('listening on *:3000');
});
```
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Example</title>
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
</head>
<body>
<div>总消息数: <span id="total"></span></div>
<div>未读消息数: <span id="unread"></span></div>
<script>
const socket = io('http://localhost:3000');
socket.on('messageStatus', (messageStatus) => {
document.querySelector('#total').textContent = messageStatus.total;
document.querySelector('#unread').textContent = messageStatus.unread;
});
</script>
</body>
</html>
```
这段代码中,后端维护了一个`messageStatus`对象,其中包含了总消息数和未读消息数。每当有新消息到来时,`messageStatus`会被更新,并通过`io.emit('messageStatus', messageStatus)`向所有客户端发送最新的消息状态。
前端通过`socket.io`连接到后端,并监听`messageStatus`事件,一旦收到最新的消息状态,就更新页面上的总消息数和未读消息数。
这只是一个简单的示例,实际应用中,你可能需要根据具体业务需求对消息状态的数据结构进行调整,并在前端实现更复杂的逻辑。