在websocket的onmessage中为变量赋值答案

【问题标题】：assign value to a varaible in onmessage in websocket在websocket的onmessage中为变量赋值
【发布时间】：2016-12-25 15:39:02
【问题描述】：

我在这里尝试为 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)

控制台将第一个日志显示为未定义，第二个“内部函数：来自 websocket 的 hello”。如何获得分配的变量并将值也保留在函数之外？为什么第二个 console.log 首先出现？

【问题讨论】：

onmessage 是一个异步调用，所以你不能给变量赋值
如果我想将 e.data 分配给一个变量，并将其用作 Web 应用程序中的内容，该怎么办？
在onmessage中传递一个回调然后赋值

标签： javascript websocket

【解决方案1】：

incomeData 是在全局范围内定义的，并且在首次使用 console.log(incomeData) 打印时未分配任何内容，因此您会收到 undefined 错误消息。然后调用套接字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，可以更新我的答案。

【讨论】：

在socket_onmessage_callback函数中将收入数据赋值给数据，但函数外的全局变量仍然未定义。
@hln 你不能让incomeData 填充e.data 你的代码中有它，因为正如我写给我的答案一样，这行代码在 之前执行 socket.onmessage 电话。你能看出这完全有道理吗？你不能给这个变量分配e.data，因为你在WebSocket实际收到任何消息之前就打印出来了。

【解决方案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>

【讨论】：