使用 JavaScript 从网络套接字读取消息

Question

我有一个网页，我在其中接收来自网络套接字的消息：

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) => {
                let payload = JSON.parse(message.data);
                
                // parse here the response message

            };
        }, []);

我可以有两种类型的消息：

成功：

{
     "requestId" : <string>,
     "response" : {
         "exchange": <string>,
         "messageId" : <string>
     }
}

错误：

response: {
   "errorMessage" : <string>,
   "errorCode" : <int>
}

如何解析这两种类型的消息并将警告消息与这两种类型的响应一起显示为对话框消息？

Answer 1

检查是否存在错误代码 response.errorCode 并有条件地处理响应，因为您知道响应的结构。

否则使用for...in... 循环递归查找响应对象中包含“message”的字符串。关于此的示例 here

Answer 2

我建议使用另一种方法来捕捉错误情况。您可以使用 onerror 事件来做到这一点：

根据 MDN 文档：

The WebSocket interface's onerror event handler property is a function that gets called when an error occurs on the WebSocket.

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) => {
        let payload = JSON.parse(message.data);
        // do proper action on success case
    };
    
    feedClient.onerror = (error) => {
      console.log(error)
      // do proper action on failure case
    }
}, []);

使用 JavaScript 从网络套接字读取消息

Read message from web socket with JavaScript

javascript

websocket

reactjs