咱们可以通过检查响应结构特征来区分成功和错误消息，再用弹窗展示内容。这里给你两种实用方案，按需选择就行：

方案一：用原生浏览器弹窗（无额外依赖） #

直接在onmessage回调里解析消息，通过判断字段存在性区分消息类型，调用原生alert展示内容，还加了异常处理避免页面崩溃：

useEffect(() => { 
  let feedAddress = "ws://.../ws_endpoint"; 
  const feedClient = new W3CWebSocket(feedAddress); 
  props.onUpdateWebsocket(feedClient); 

  feedClient.onopen = () => { 
    console.log("WebSocket Client Connected on " + feedAddress); 
  }; 

  feedClient.onmessage = (message) => {
    try {
      const payload = JSON.parse(message.data);
      const { response } = payload;

      // 识别错误消息：response里包含errorMessage和errorCode
      if (response.errorMessage !== undefined && response.errorCode !== undefined) {
        alert(`WebSocket请求出错啦：\n错误码：${response.errorCode}\n错误详情：${response.errorMessage}`);
      } 
      // 识别成功消息：存在requestId，且response里有exchange和messageId
      else if (payload.requestId && response.exchange && response.messageId) {
        alert(`WebSocket请求成功！\n请求ID：${payload.requestId}\n交易所：${response.exchange}\n消息ID：${response.messageId}`);
      }
      // 处理未知格式的消息
      else {
        console.warn("收到无法识别的WebSocket消息", payload);
        alert("收到未知格式消息，可查看控制台日志详情");
      }
    } catch (error) {
      console.error("解析WebSocket消息失败", error);
      alert("消息解析出错啦，可查看控制台日志排查");
    }
  }; 

  // 组件卸载时关闭连接，避免内存泄漏
  return () => {
    if (feedClient.readyState === W3CWebSocket.OPEN) {
      feedClient.close();
      console.log("WebSocket连接已关闭");
    }
  };
}, []);

关键细节： #

• 用try-catch包裹JSON.parse，防止非法JSON消息导致页面报错
• 组件卸载时主动关闭WebSocket连接，避免内存泄漏
• 通过字段存在性判断消息类型，逻辑清晰且兼容字段可选的场景

方案二：用美观的第三方弹窗库（比如SweetAlert2） #

如果觉得原生弹窗不够好看，可以用SweetAlert2这类UI库，先安装依赖：

npm install sweetalert2

然后修改代码实现更友好的弹窗样式：

import Swal from 'sweetalert2';

// ... 其他代码保持不变 ...

feedClient.onmessage = (message) => {
  try {
    const payload = JSON.parse(message.data);
    const { response } = payload;

    if (response.errorMessage !== undefined && response.errorCode !== undefined) {
      Swal.fire({
        icon: 'error',
        title: '请求失败',
        html: `<strong>错误码：</strong>${response.errorCode}<br><strong>错误详情：</strong>${response.errorMessage}`
      });
    } else if (payload.requestId && response.exchange && response.messageId) {
      Swal.fire({
        icon: 'success',
        title: '请求成功',
        html: `<strong>请求ID：</strong>${payload.requestId}<br><strong>交易所：</strong>${response.exchange}<br><strong>消息ID：</strong>${response.messageId}`
      });
    } else {
      Swal.fire({
        icon: 'warning',
        title: '未知消息格式',
        text: '收到无法识别的消息，请查看控制台日志'
      });
      console.warn("收到未知格式的WebSocket消息", payload);
    }
  } catch (error) {
    Swal.fire({
      icon: 'error',
      title: '消息解析失败',
      text: '无法解析收到的消息，请查看控制台日志'
    });
    console.error("解析WebSocket消息失败", error);
  }
};

这种方案的弹窗自带图标、自定义样式，用户体验会更好，还支持更多交互配置。

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