WebSocket 在代码中返回 undefined 但在控制台中没有

Question

我很难理解这里发生了什么......

我在 192.168.1.64:81 上有一个 websocket 服务器

我需要使用这个 javascript 从网页向套接字发送数据：

window.onload = function() {
    var connection = new WebSocket("ws://"+location.hostname+":81", ['arduino']);
    connection.onopen = function() {
        connection.send('Connect ' + new Date());
    };
    connection.onerror = function(error) {
        console.log('WebSocket Error ', error);
    };
    connection.onmessage = function(e) {
        console.log('Server: ', e.data);
    };

    function sendData() {
        var data="#"+joystick.deltaX()+","+joystick.deltaY();
        connection.send(data);
    }};

现在会发生这种情况：如果我打开 js 控制台（在 firefox 中），我会看到“连接未定义”错误...但是如果我将以下行复制粘贴到控制台：

    var connection = new WebSocket("ws://"+location.hostname+":81", ['arduino']);

正确定义了套接字，更新程序开始通过套接字正确地传输数据！！

我错过了什么？ 我应该知道一些众所周知的问题吗？

Answer 1

以下函数使用connection 变量，但该变量超出范围，因为connection 是使用var（本地）关键字定义的：

connection.onopen = function() {
    connection.send('Connect ' + new Date());
};
function sendData() {
    var data="#"+joystick.deltaX()+","+joystick.deltaY();
    connection.send(data);
}};

要么将 `connection 定义为全局值：

connection = new WebSocket("ws://"+location.hostname+":81", ['arduino']);

或者使用内部绑定/引用：

connection.onopen = function(e) {
    e.target.send('Connect ' + new Date());
};
sendData = function() {
    var data="#"+joystick.deltaX()+","+joystick.deltaY();
    this.send(data);
}.bind(connection);

否则将连接初始化为全局并像这样分配 onload：

    var connection;
window.onload = function() {
        connection = new WebSocket("ws://"+location.hostname+":81", ['arduino']);
        connection.onopen = function() {
            connection.send('Connect ' + new Date());
        };
        connection.onerror = function(error) {
            console.log('WebSocket Error ', error);
        };
        connection.onmessage = function(e) {
            console.log('Server: ', e.data);
};};