JavaScript 中怎么在 SSE 中实现消息的分组接收与权限过滤-js教程-PHP中文网

sse 本身不提供原生分组或权限过滤，需服务端推送带元数据（如 group、role）的消息，客户端解析后按业务规则处理；服务端应预筛消息，客户端用 json.parse 提取 data 并分类路由，支持 map 动态管理处理器，结合角色做前端权限过滤但须后端校验。

javascript 中怎么在 sse 中实现消息的分组接收与权限过滤

在 JavaScript 的 SSE（Server-Sent Events）中，本身不提供原生的“分组”或“权限过滤”能力——这些逻辑必须由前端主动处理。核心思路是：服务端按需推送带元数据（如 group、role、scope）的消息，客户端用 JavaScript 解析并根据业务规则决定是否接收、丢弃或路由到不同模块。

服务端发送带上下文的消息

SSE 消息本质是文本流，格式灵活。推荐在每条事件中嵌入结构化字段，例如：

event: message<br>data: {"id":"101","group":"team-a","role":"editor","content":"文档已更新"}

关键点：

使用 data 字段传递 JSON 字符串（注意换行符需转义）
避免在 event 字段做权限控制（它仅用于客户端 eventListener 分类）
服务端应基于用户登录态预筛消息，减少无效推送（减轻带宽和客户端负担）

客户端按 group 进行分组接收

监听时统一捕获所有消息，再用 JS 提取 data 并分类：

Gradle 9.8.0

下载

const evtSource = new EventSource("/api/notifications");<br>evtSource.onmessage = (e) => {<br>  try {<br>    const msg = JSON.parse(e.data);<br>    if (msg.group === "team-a") {<br>      handleTeamAMessages(msg);<br>    } else if (msg.group === "project-x") {<br>      handleProjectXMessages(msg);<br>    }<br>  } catch (err) {<br>    console.warn("Invalid SSE data", e.data);<br>  }<br>};

更进一步可封装为 Map 存储分组处理器：

const handlers = new Map(); handlers.set("team-a", fn)
收到消息后 handlers.get(msg.group)?.(msg) 动态调用
支持运行时增删分组监听器（如切换团队时重置 handler）

结合用户角色做前端权限过滤

权限不应只靠前端过滤（必须后端校验），但前端可增强体验：

从登录态或 token 中提取当前用户 role（如 "admin", "member", "viewer"）
消息中携带 requiredRole 字段：data: {"content":"删除操作","requiredRole":"admin"}
客户端比对：if (currentUserRole === msg.requiredRole || isHigherPrivilege(msg.requiredRole))
不满足权限时可静默丢弃，或降级显示（如灰显+tooltip提示“无权限”）