Issue with AsyncWebSocket and Safari (mac/iphone) ESP32S3

[borkog]

My code works great on Chrome but not on Safari (mac/iphone).

Website receives JSON data over websocket just fine, but fails to send (JSON or plain text) after few seconds after connected. ESP32 reports WS_EVT_ERROR with random number as reasonCode and gibberish as reasonString (and sometimes crashes)

[mathieucarbou]

Hello,
Probably not linked to the library itself but more to your js code ?
FYI, Safari is my main browser, which I also used for testing and dev, and I use and make plenty of projects using websocket.
So I know it works fine.
Did you look at other projects and wiki for some examples ?

[borkog]

It's really simple js code. Sends json's back and forth ... What buggs me that Chrome works great, not a single problem.
Websocket just stops after a second with Safari.
I used websocket example as a starting point for arduino code. Js code is as standard as it gets

[mathieucarbou]

Can you show your code ?

[borkog]

let socket;
const wsUrl = "ws:" + location.host + "/ws";

function safeSend(socket, message) {
    console.log("safeSend")
    console.log(message)

    const data = typeof message === 'string' ? message : JSON.stringify(message);
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(data);
    } else if (socket.readyState === WebSocket.CONNECTING) {
        console.log("waiting to open")
        socket.addEventListener('open', function onOpen() {
            socket.send(data);
        }, { once: true });
    } else {
        console.error('Cannot send message. WebSocket is not open.');
    }
}

function connectWebSocket() {
      socket = new WebSocket(wsUrl);

      socket.addEventListener('open', () => {
        console.log("Connected to server, asking for all...");
        safeSend(socket, { type: 5, act: "Setup" } );
        safeSend(socket, { type: 5, act: "Comm" });
        safeSend(socket, { type: 5, act: "Song" });
    });

    socket.addEventListener('message', event => {
    console.log("---- socket.onmessage: " + event.type)
    try {
        const obj = JSON.parse(event.data);
        switch (obj.type) {
        case 1:
            console.log("received setup data")
            setupData = obj;
            processSetup();
            break;
        case 2:
            console.log("received song data data")
            songData = obj;
            processSong();
            break;
        case 3:
        console.log("received comm data")
            commData = obj;
            processComm();
            break;
        default:
            console.warn("Unhandled message type:", message.type);
    }
    } catch (e) {
        console.error("Error parsing JSON:", e);
        console.error(event.data);
        console.error("===================");
    }
    });

    socket.addEventListener('close', () => {
        console.log("WebSocket closed. Reconnecting in 5 seconds...");
        setTimeout(connectWebSocket, 5000);
    });

    socket.addEventListener('error', error => {
        console.log("Error: " + error.message);
        socket.close(); 
    });
}

[mathieucarbou]

I was speaking about the MCU code... We cannot support client-side code, because there are many ways and languages allowing to communicate with a WS server.

Please test your MCU code with websocat - a CLI client utility, to check if the issue lies in your MCU code or your JS code.

Also, you might be interested in this PR: #143, which provides a helper class to use the WS API more easily.

[borkog]

Got it fixed

1. server.addHandler(&ws).addMiddleware was quietly killing my connections because I didn't ws.cleanupClients(). I was checking it on Chrome and Safari on mac and on pc ... my bad

2. I didn't disregard all opcodes that were not WS_TEXT... So it actually tried to JSON everything ... and died eventually ... also my bad

Thanks!

[borkog]

Not so fast ... it's still on except I have more data ...

This is dump from Chrome (which works fine)

01:24:17.689 -> ws connect

01:24:17.689 -> index: 0, len: 24, final: 1, opcode: 1
01:24:17.689 -> ws text: {"type":5,"act":"Setup"}
01:24:17.689 -> ws pong

01:24:22.756 -> index: 0, len: 367, final: 1, opcode: 1
01:24:22.757 -> ws text: {"type":1,"ssid" ...... }
01:24:22.757 -> setupData Received

01:24:26.417 -> index: 0, len: 366, final: 1, opcode: 1
01:24:26.417 -> ws text: {"type":1,"ssid" ...... }
01:24:26.417 -> setupData Received

from Safari (calls that run right after connection to ws: work fine (or maybe because its short)

01:23:25.716 -> ws connect

01:23:25.716 -> index: 0, len: 24, final: 1, opcode: 1
01:23:25.716 -> ws text: {"type":5,"act":"Setup"}
01:23:25.750 -> ws pong

01:23:25.750 -> index: 0, len: 14, final: 1, opcode: 15

01:23:31.187 -> ws disconnect

// few seconds latter

01:23:35.650 -> index: 0, len: 19, final: 1, opcode: 5
01:23:35.650 -> ws pong
01:23:35.650 -> index: 0, len: 69, final: 0, opcode: 4
01:23:35.650 -> index: 0, len: 12, final: 0, opcode: 2
01:23:35.650 -> index: 0, len: 55, final: 1, opcode: 2
01:23:35.650 -> index: 0, len: 99, final: 1, opcode: 4

there are some posts that mention "NSURLSession WebSocket" Safari websocket compression is broken
gorilla/websocket#731

[mathieucarbou]

@borkog : please try my branch with the example in PR #143. It works for me on Safari. This is an easier way to use websocket instead of using the complex event handler/

[mathieucarbou]

What is the relationship with "NSURLSession WebSocket" ?

[borkog]

NSURLSession was mentioned in the article ...

I am running Safari 18.3.1 (20620.2.4.11.6) in case you want to recreate the issue

I used code from websocket example, and my js got this:

11:44:48.005 -> index: 0, len: 28, final: 0, opcode: 12
11:44:52.937 -> index: 0, len: 78, final: 0, opcode: 6
11:44:52.937 -> index: 0, len: 88, final: 0, opcode: 1
11:44:53.536 -> index: 0, len: 67, final: 0, opcode: 6
11:44:53.536 -> index: 0, len: 106, final: 0, opcode: 2
11:44:53.536 -> index: 0, len: 90, final: 0, opcode: 5
11:44:53.536 -> index: 0, len: 13, final: 0, opcode: 2
11:44:53.536 -> index: 0, len: 82, final: 1, opcode: 4
11:44:53.834 -> index: 2, len: 82, final: 1, opcode: 4
11:44:53.834 -> index: 0, len: 18, final: 1, opcode: 0
11:44:53.834 -> index: 0, len: 10, final: 0, opcode: 5
11:44:53.834 -> index: 0, len: 17, final: 0, opcode: 4

On Chrome I get clean opcode:1

I am reverting to sending data using fetch, I can't stay on this problem any longer

Thanks for all your help (we almost got it)
I will be watching this space for updates
Keep up the good work!