WebSocket是实现网页端阅读回执实时同步最直接高效的方式，通过IntersectionObserver检测消息可视性并上报，服务端校验后广播给发送方，配合幂等处理、离线补偿、隐私控制与多端同步保障体验。
WebSocket 是实现网页端阅读回执实时同步最直接、高效的方式——它让服务器能在消息被对方打开的瞬间主动通知发送方，无需轮询或长连接模拟。
一、阅读回执的基本逻辑设计
阅读回执不是“已送达”，而是“已被对方客户端实际渲染并可见”。需满足三个关键动作：
- 发送方发出消息后，记录该消息的唯一 ID（如 msgId: "msg_abc123"）；
- 接收方页面加载消息 DOM 后，通过 IntersectionObserver 或 offsetHeight > 0 + getBoundingClientRect() 判断消息元素是否进入可视区域；
- 一旦确认可见，前端立即通过 WebSocket 发送一条轻量回执包：{"type":"read","msgId":"msg_abc123"}。
二、WebSocket 连接与回执上报
在接收方页面中建立稳定连接并监听消息展示状态：
<pre class="brush:php;toolbar:false;">// 建立连接（建议封装成可重连实例）
const ws = new WebSocket('wss://your-api.com/ws?uid=1002');
<p>ws.onopen = () => console.log('已连接，准备监听消息展示');</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p>// 监听服务端下发的消息
ws.onmessage = (e) => {
const data = JSON.parse(e.data);
if (data.type === 'text') {
appendMessageToDOM(data); // 渲染消息
observeReadStatus(data.msgId); // 启动可视性观察
}
};</p><p>function observeReadStatus(msgId) {
const el = document.getElementById(<code>msg-${msgId});
if (!el) return;const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && entry.intersectionRatio > 0.1) { // 触发阅读回执 ws.send(JSON.stringify({ type: 'read', msgId })); observer.unobserve(el); // 只触发一次 } }); }, { threshold: 0.1 });
observer.observe(el); }
三、服务端接收并广播回执
服务端收到 {type:'read', msgId:'...'} 后，需做两件事：
- 校验该 msgId 确属当前用户可读范围（防伪造）；
- 查询该消息原始发送者，并向其 WebSocket 连接推送更新事件：
-
推荐格式：
{"type":"read_receipt","msgId":"msg_abc123","from":"1002","ts":1715829340} - 前端响应：发送方页面监听到该事件后，定位对应消息节点，更新右下角图标为「✓✓」或添加「已读」文字提示
- 注意去重：同一 msgId 的 read 事件可能因重连重复到达，服务端应基于 msgId + userId 做幂等处理
四、体验优化与边界处理
真实场景中需考虑这些细节：
立即学习“前端免费学习笔记（深入）”；
-
离线补偿：若接收方上线时某条消息已在聊天窗口中且处于可视区，首次渲染后应立即补发回执（可用
el.offsetParent !== null && el.offsetHeight > 0快速判断） -
滚动穿透：用户快速滚动时，IntersectionObserver 可能来不及触发。可增加 fallback：监听
scroll事件 +requestIdleCallback批量检查最近几条未标记消息的可见性 - 隐私控制：支持 per-conversation 开关（如“不向对方发送我的已读状态”），服务端需在转发前校验双方设置
- 多端同步：用户在手机端已读某消息，网页端打开时不应重复触发回执 —— 服务端应维护「每条消息的最终已读时间戳」，只对更晚的阅读行为生效
