Angular中Azure Web PubSub师生双向消息接收失败排查求助

1. 移除client.on的不必要await #

WebPubSubClient.on()是同步注册事件监听的方法，无需使用await，错误的await会打乱代码执行顺序，可能导致客户端启动时监听还未完成注册。

修复代码：

// 去掉await，直接注册监听
this.client.on("server-message", (e) => {
    console.log("Received message", e)
    if (e.message.data instanceof ArrayBuffer) {
        // 修正Buffer使用错误：用消息数据data而非类型标识dataType
        console.log(`Received message ${Buffer.from(e.message.data).toString("utf-8")}`);
    } else {
        console.log(`Received message ${JSON.stringify(e.message.data)}`);
    }
});

2. 补全群组订阅逻辑 #

你提到后端已创建群组，但当前代码没有客户端加入群组的逻辑。Azure Web PubSub中，客户端默认仅能接收发送给自己的个人消息，要接收群组内的双向消息，必须显式加入目标群组。

添加群组订阅（在connected事件中）：

this.client.on("connected", async (e) => {
    console.log(`Connected: ${e.connectionId}.`);
    // 替换为后端实际使用的群组命名规则，比如按师生配对的群组名
    await this.client.joinGroup(`chat-group-${studentId}`);
    console.log("Joined chat group successfully");
});

3. 检查服务端消息路由逻辑 #

你的sendMessageToAdmin仅将事件发送到服务端，需要确认后端是否正确处理了message事件：

• 后端需接收客户端发来的message事件，然后调用Azure Web PubSub的服务端API，将消息转发到管理员所在的群组/个人通道
• 确保后端是根据userid正确定位目标管理员，而非仅处理消息但不转发

4. 修正消息内容解析错误 #

代码中Buffer.from(e.message.dataType).toString("base64")是错误用法：dataType是消息的类型标识（如binary/json），不是消息内容，应使用e.message.data，且文本消息用utf-8解码更合理。

5. 解决单例服务的客户端冲突 #

你的WebPubSubService是全局单例（providedIn: 'root'），如果管理员和学生在同一应用内使用，第二次初始化会覆盖this.client，导致前一次连接失效。解决方式：

• 用Map<string, WebPubSubClient>存储不同userid对应的客户端实例
• 为管理员和学生分别创建独立的服务实例

6. 校验事件名称一致性 #

确保后端发送消息时使用的事件名称是server-message，和客户端监听的名称完全匹配。如果后端使用了其他事件名（如chat-message），客户端需同步修改监听的事件名。

内容的提问来源于stack exchange，提问作者Vasanth