在WebSocket的onmessage中给变量赋值。

Question

我在这里的 onmessage 函数中尝试给一个变量赋值：

socket = new WebSocket(ws_scheme +"127.0.0.1:8000/chat/");
var incomeData;
socket.onmessage = function(e) {
     incomeData='hello'+ e.data; 
     console.log('inside function:'+incomeData)
}
socket.onopen = function() { 
    socket.send(" from websocket");
}
 console.log(incomeData)

控制台将显示第一个日志为undefined，第二个日志为“inside function：hello from websocket”。我如何获得在函数外部赋值的变量并保持其值？为什么第二个console.log出现在第一个之前？

- hln

---

onmessage 是一个异步调用，因此您不能将值分配给变量。 - Codesingh

如果我想将 e.data 赋值给一个变量，并在 Web 应用程序中将其用作内容，该怎么办？ - hln

将回调函数传递到 onmessage 中，然后分配值。 - Codesingh

Answer 1

incomeData 在全局作用域中定义，当第一次使用 console.log(incomeData) 打印时，它没有被分配任何值，因此你会收到 undefined 的错误信息。然后，socket onmessage 被调用并且它被分配了 e.data 值，随后 console.log 将其打印出来。

你可以处理 socket.onmessage 并将 e.data 传递给回调函数，如下所示：

socket = new WebSocket(ws_scheme +"127.0.0.1:8000/chat/");

socket.onmessage = function(e) {
    socket_onmessage_callback(e.data);
}

socket.onopen = function() { 
    socket.send(" from websocket");
}

function socket_onmessage_callback(data) {
    console.log('inside function socket_onmessage_callback:', data)
}

你甚至可以使用全局变量incomeData，但我认为这并不是必要的。如果需要使用incomeData，我可以更新我的答案。

- Christos Lytras

---

将incomeData分配给socket_onmessage_callback函数中的data，但在函数外部全局变量仍未定义。 - hln

@hln，你不能在那里用e.data填充incomeData，因为正如我在我的回答中所写的那样，这行代码是在socket.onmessage调用之前执行的。你能看出来这完全没有意义吗？你不能让这个变量赋值为e.data，因为你在WebSocket实际接收到任何消息之前就已经将其打印出来了。 - Christos Lytras

Answer 2

一旦你掌握了websocket协议的主要点，你可以通过将回调函数传递给协议的websocket.onmessage方法来轻松更新全局变量。主要的点是后端服务器不是在响应客户端的GET或POST请求时发送信息，而是在它想要的时候发送。没有办法强制websocket端点返回任何东西，即使你没有请求它，它也会在它想要的时候返回。一旦你打开了ws://连接，就准备好随时通过这个连接接收数据。你需要做的是确保你的应用程序不会在要分配的变量的初始值（或undefined）上崩溃，只需让服务器在服务器（而不是你！）想要的时候更新你的变量。这里有一个工作代码示例，其中包括自我调用的ws://连接初始化（(function(...) {...})(...);结构）和回调：

<script>    
    var yourGlobalField = undefined;
    
    console.log("Value before update: ", yourGlobalField);

    (function initWebsocketConnection() {

        websocket = new WebSocket("ws://your.websocket.URI");

        websocket.onmessage = function (evt) {
            theFunctionNeededToMakeSureWeHaveReceivedRealData(evt, yourSuccessCallbackFunction(evt));
        };

        websocket.onerror = function(err) {
            networkError(err);
        }

    })();

    function theFunctionNeededToMakeSureWeHaveReceivedRealData(evt) {
        console.log("we have received some data!");
    }

    function yourSuccessCallbackFunction(data) {
        yourGlobalField = JSON.parse(data); //just assuming you receive a JSON object
        console.log("Value after update: ", yourGlobalField)
    }

    function networkError(err) {
        console.log('Request Failed', err);
    }
</script>

- Václav