WebSocket returns undefined in code but not in console

Question

I'm struggling to understand what's happening here...

I have a websocket server on 192.168.1.64:81

I need to send data to the socket from a web page using this 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);
    }};

Now this is what happens: if I open the js console (in firefox) I see the "connection is undefined" error... but if I copy-paste to the console the line:

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

the socket gets defined correctly and the updater begins streaming data correctly through the socket!!

What am I missing? Should I be aware of some well known issue?

Answer 1

The following functions use the connection variable, but the variable is out of scope, because connection is defined using the var (local) keyword:

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

Either define `connection as a global value:

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

Or use an internal binding / reference:

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

Otherwise initialize connection as a global and assign onload like this:

    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);
};};