Resolved: Javascript sending only one message over websocket in browser

Question:

I have a websocketserver running on a ESP32 which works perfect.
My problem is that if I send a message to the server over a website the socketserver on the ESP32 executes the .send(message) only the first time and is not sending anymore any message.
If I send a message from the developertools/console in chrome it works every time.
At this point I suppose my problem seems not to be on the server-side but on the client-side.
This is my html/javascript-code running inside chrome:

    <!DOCTYPE html>

<head>
    <title>WH_Quiz</title><link rel="preload" as="font" href="https://devsfix.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v2.2" type="font/woff2" crossorigin="anonymous" />
    <style>
        body {
            background: url(Images/SET_1/A1_INTRO.png) no-repeat center center fixed;
            -webkit-background-size: cover;
            background-size: cover;
        }
    </style>
    
</head>

<body>


    <script>
        // clear localStorage
        window.localStorage.clear();

        // open websocket
        var url = "ws://192.168.4.1:1337";
        websocket = new WebSocket(url);
        websocket.onopen = function (event) {
            console.log('websocket is open');
            websocket.send("L");
        };
        
        
        // Keep track of clicked keys
        var isKeyPressed = {
            'a': false, // ASCII code for 'a'
            'b': false, // ASCII code for 'b'
            // ... Other keys to check for custom key combinations
        };

        document.onkeydown = (keyDownEvent) => {

            // Prevent default key actions, if desired
            keyDownEvent.preventDefault();

            // Track down key click
            isKeyPressed[keyDownEvent.key] = true;

            // Check described custom shortcut
            if (isKeyPressed['a']) { //for example we want to check if a is clicked
                //do something 
                console.log('a has been pressed');

                websocket.onopen = function (event) {
                    console.log('a has been pressed and wesocket is open');
                    window.location.href = '1_1.html'; // öffne Fragenkatalog 1
                    websocket.send("4G");
                };

            };
            // Check described custom shortcut
             if (isKeyPressed['b']) { //for example we want to check if b is clicked
                //do something 
                console.log('b has been pressed');
                                
                websocket.onopen = function (event) {
                    window.location.href = '2_1.html'; // öffne Fragenkatalog 2
                    websocket.send("4R");
                };
            };
        };
    </script>

</body>

</html>

In my console logs I can see that it enters the “isKeyPressed” if-statement but it is not executing the “websocket.onopen = function (event)”.
What am I doing wrong?

Answer:

websocket.onopen is only triggered the first time the socket is open. Since it’s already open at this point, you should be able to just directly call the send function.
In other words:

if (isKeyPressed['b']) { //for example we want to check if b is clicked
  //do something 
  console.log('b has been pressed');
                                
  websocket.onopen = function (event) {
    window.location.href = '2_1.html'; // öffne Fragenkatalog 2
    websocket.send("4R");
  };
};

becomes:

if (isKeyPressed['b']) { //for example we want to check if b is clicked
  //do something 
  console.log('b has been pressed');          
  window.location.href = '2_1.html'; // öffne Fragenkatalog 2
  websocket.send("4R");          
};

If you have better answer, please add a comment about this, thank you!

Resolved: Javascript sending only one message over websocket in browser

Resolved: Reshape tensors of unknown shape with tf.function

Resolved: Use Svelte Component as Slot

Resolved: Vaadin 14.9 – Redirect on Session Destroy Event

Leave A Reply