Angular 6前端如何读取WebSocket返回MessageEvent中的指定字段？

嗨，我明白你的困扰了！你现在遇到的核心问题是：message.data其实是JSON格式的字符串，不是直接可用的JavaScript对象，所以你用for循环遍历的时候才会拿到单个字符——因为你在遍历字符串的每一个字符，而不是对象的属性。

第一步：解析JSON字符串为对象 #

你只需要先把message.data用JSON.parse()转换成对象，之后就能直接访问type、value这些字段了，修改你的订阅代码如下：

this.socketService.receiveEvents('LoggedIn').subscribe((message: MessageEvent) => {
  // 解析JSON字符串为JavaScript对象
  const parsedData = JSON.parse(message.data);
  // 现在可以直接访问指定字段了
  console.log('type字段值:', parsedData.type);
  console.log('email字段值:', parsedData.value.email);
  console.log('完整value对象:', parsedData.value);
});

第二步：优化你的receiveEvents方法（可选但推荐） #

既然你的后端返回的都是JSON格式的数据，你可以在receiveEvents里直接完成解析，这样调用方就不用每次都手动解析了，还能顺便实现你TODO里的事件过滤：

receiveEvents(relevantEvent: string): Observable<any> {
  return this._subject.asObservable().pipe(
    filter((event: MessageEvent) => event != null),
    // 解析JSON数据
    map((event: MessageEvent) => JSON.parse(event.data)),
    // 过滤出指定类型的事件
    filter((parsedEvent) => parsedEvent.type === relevantEvent)
  );
}

优化之后，你的订阅代码会更简洁，而且只会收到type为LoggedIn的事件：

this.socketService.receiveEvents('LoggedIn').subscribe((parsedEvent) => {
  console.log('type:', parsedEvent.type);
  console.log('用户邮箱:', parsedEvent.value.email);
});

为什么之前的for循环不行？ #

再补充解释下：当你直接遍历message.data时，它是一个字符串（比如"{\"type\":\"LoggedIn\",\"value\":{...}}"），JavaScript里遍历字符串会逐个返回每个字符，所以你才会拿到单个字符的结果。只有把它转换成对象后，遍历对象的属性才能拿到对应的字段值。

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