要实现定向实时广告推送，需服务端维护用户ID与WebSocket连接的映射关系，并在推送时精准查找目标连接发送消息。具体包括：1. 登录后通过URL参数或token鉴权建立带身份标识的连接；2. 服务端用Map或Redis存储并管理映射表；3. 广告触发时查表投递，离线则暂存队列；4. 客户端校验并安全渲染，辅以心跳与重连机制。
WebSocket 本身不提供用户识别或消息路由能力，要实现“针对特定用户的定向实时广告推送”，关键在于：服务端需维护用户身份与 WebSocket 连接的映射关系，并在推送时精准查找并发送给目标用户连接。HTML5 中的 WebSocket 是双向通信通道，但它是无状态、无内置用户概念的底层协议，必须由开发者自行设计用户绑定与消息分发逻辑。
1. 用户登录后建立带身份标识的 WebSocket 连接
客户端在用户登录成功后，用唯一标识（如 userId 或 token）发起 WebSocket 连接，推荐将身份信息通过 URL 参数或握手阶段的 Cookie/Authorization 头传递，避免在消息体中频繁携带身份字段。
- ✅ 推荐方式（URL 参数）：
new WebSocket("wss://api.example.com/ad?userId=12345") - ✅ 更安全方式（token 鉴权）：服务端在 upgrade 请求中校验
Authorization或Cookie，验证通过后再接受连接，并提取用户 ID 存入会话上下文 - ❌ 不推荐：连接建立后才发 login 消息——增加竞态风险，且首次广告可能无法送达
2. 服务端维护「用户ID ↔ WebSocket 连接」映射表
Node.js（如使用 ws 库）或 Java（如 Spring WebSocket）等后端需在内存或分布式缓存（如 Redis）中维护活跃连接的映射关系。单机部署可用 Map；集群环境建议用 Redis 的 Hash 或 Pub/Sub 辅助路由。
- 连接建立时：解析 userId → 存入
userConnectionMap.set(userId, ws) - 连接关闭时：主动从映射表中删除该 userId 对应条目
- 用户登出或 Token 过期时：服务端主动调用
ws.close()并清理映射
3. 广告系统触发定向推送时，精准投递到目标连接
当广告策略引擎决定向用户 12345 推送一条新广告（例如基于浏览行为、地理位置或实时竞价结果），后端不再广播，而是查表获取其当前连接对象，直接调用 send()：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
const ws = userConnectionMap.get('12345'); if (ws && ws.readyState === WebSocket.OPEN) { ws.send(JSON.stringify(adPayload)); }- 若用户离线或连接失效，可暂存广告至个人队列（如 Redis List），待重连后补推（需客户端支持消息去重和序号校验）
- 广告 payload 建议包含
id、type、content、timestamp和可选ttl（过期时间），便于前端渲染与降级处理
4. 客户端接收并安全渲染广告内容
浏览器端监听 message 事件，对收到的广告数据做基础校验（如字段完整性、防 XSS），再插入 DOM。避免直接 innerHTML = ad.content，推荐用 textContent + 模板字符串，或使用框架的安全渲染机制（如 React 的 dangerouslySetInnerHTML 需配合 HTML sanitizer）。
- 示例校验：
if (event.data && typeof event.data === 'string') { const ad = JSON.parse(event.data); if (ad.id && ad.type === 'banner') { renderAd(ad); } } - 添加心跳保活：每 30 秒发一次 ping，服务端响应 pong，防止代理中断空闲连接
- 错误重连策略：断开后指数退避重试（如 1s → 2s → 4s），最多 5 次，失败后降级为轮询或静默
不复杂但容易忽略的是连接生命周期与业务状态的一致性——用户切换设备、多标签登录、Token 刷新都会影响映射准确性。因此，实际项目中建议结合 JWT 解析、Redis 分布式锁和连接心跳日志，把“定向”真正落到每个在线实例上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
