Cocos Creator WebSocket: Connect, Send and Parse JSON or Binary Data

Connect and Handle WebSocket Events

Pay attention to the data format expected by the server and deserialize incoming payloads according to their type.

const ws = new WebSocket('wss://example.com/socket');
ws.binaryType = 'arraybuffer';

ws.onopen = () => {
    console.log('Connected');
    ws.send(JSON.stringify({ Version: { Version: 'v0.0.1' } }));
};

ws.onmessage = async event => {
    if (typeof event.data === 'string') {
        console.log('Received string data:', event.data);
        const value = JSON.parse(event.data);
        console.log(value);
        return;
    }

    let arrayBuffer: ArrayBuffer;

    if (event.data instanceof ArrayBuffer) {
        arrayBuffer = event.data;
    } else if (event.data instanceof Blob) {
        arrayBuffer = await event.data.arrayBuffer();
    } else {
        console.log('Received an unknown data type:', event.data);
        return;
    }

    const bytes = new Uint8Array(arrayBuffer);
    const jsonString = new TextDecoder().decode(bytes);
    const value = JSON.parse(jsonString);
    console.log(value);
};

ws.onerror = error => {
    console.error('WebSocket error:', error);
};

ws.onclose = event => {
    console.log(`WebSocket closed: ${event.code} ${event.reason}`);
};

In production, validate parsed messages, catch malformed JSON, use wss://, authenticate the connection, and implement an appropriate reconnect strategy.