Websocket using correctly

B

Bogdan•12/13/23, 1:21 PM

Hello, need some help, been trying to use websockets in a worker but i feel like am missing something.
What i've been trying to do was to capture the websocket messages in the worker and then forward them to an origin websocket, though i can't seem to get it to work properly, the browser keeps closing the connection, the origin connection seems to stay up no problem with it.

B

Bogdan•12/13/23, 1:21 PM

Here's my code and the things that i have tried.

B

Bogdan•12/13/23, 1:22 PM

This version should just do a simple proxying of the websocket.

async function processWebSocketRequestV1(request: Request) : Promise<Response>
{
    const upgradeHeader = request.headers.get("Upgrade");
    if (!upgradeHeader || upgradeHeader !== "websocket") {
        console.error("Expected Upgrade: websocket");
        return error(426, "Expected Upgrade: websocket");
    }

    const response = await fetch(request);

    if (response.status !== 101) {
        console.error("Expected 101 response from origin");
        return error(502, "Expected 101 response from origin");
    }

    const originWebSocket = response.webSocket;
    if (!originWebSocket) {
        console.error("Expected WebSocket in response from origin");
        return error(502, "Expected WebSocket in response from origin");
    }

    return response;
}

async function processWebSocketRequestV1(request: Request) : Promise<Response>
{
    const upgradeHeader = request.headers.get("Upgrade");
    if (!upgradeHeader || upgradeHeader !== "websocket") {
        console.error("Expected Upgrade: websocket");
        return error(426, "Expected Upgrade: websocket");
    }

    const response = await fetch(request);

    if (response.status !== 101) {
        console.error("Expected 101 response from origin");
        return error(502, "Expected 101 response from origin");
    }

    const originWebSocket = response.webSocket;
    if (!originWebSocket) {
        console.error("Expected WebSocket in response from origin");
        return error(502, "Expected WebSocket in response from origin");
    }

    return response;
}

async function processWebSocketRequestV1(request: Request) : Promise<Response>
{
    const upgradeHeader = request.headers.get("Upgrade");
    if (!upgradeHeader || upgradeHeader !== "websocket") {
        console.error("Expected Upgrade: websocket");
        return error(426, "Expected Upgrade: websocket");
    }

    const response = await fetch(request);

    if (response.status !== 101) {
        console.error("Expected 101 response from origin");
        return error(502, "Expected 101 response from origin");
    }

    const originWebSocket = response.webSocket;
    if (!originWebSocket) {
        console.error("Expected WebSocket in response from origin");
        return error(502, "Expected WebSocket in response from origin");
    }

    return response;
}

async function processWebSocketRequestV1(request: Request) : Promise<Response>
{
    const upgradeHeader = request.headers.get("Upgrade");
    if (!upgradeHeader || upgradeHeader !== "websocket") {
        console.error("Expected Upgrade: websocket");
        return error(426, "Expected Upgrade: websocket");
    }

    const response = await fetch(request);

    if (response.status !== 101) {
        console.error("Expected 101 response from origin");
        return error(502, "Expected 101 response from origin");
    }

    const originWebSocket = response.webSocket;
    if (!originWebSocket) {
        console.error("Expected WebSocket in response from origin");
        return error(502, "Expected WebSocket in response from origin");
    }

    return response;
}

B

Bogdan•12/13/23, 1:23 PM

unfortunately it doesn't work as i would expect

B

Bogdan•12/13/23, 1:23 PM

I also have a version that manually connects to the origin and creates the socket pair

B

Bogdan•12/13/23, 1:24 PM

async function processWebSocketRequestV2(request: Request) : Promise<Response>
{
    const upgradeHeader = request.headers.get("Upgrade");
    if (!upgradeHeader || upgradeHeader !== "websocket") {
        console.error("Expected Upgrade: websocket");
        return error(426, "Expected Upgrade: websocket");
    }

    const response = await fetch(request);

    if (response.status !== 101) {
        console.error("Expected 101 response from origin");
        return error(502, "Expected 101 response from origin");
    }

    const originWebSocket = response.webSocket;
    if (!originWebSocket) {
        console.error("Expected WebSocket in response from origin");
        return error(502, "Expected WebSocket in response from origin");
    }
 // code continues below <insert here>
}

async function processWebSocketRequestV2(request: Request) : Promise<Response>
{
    const upgradeHeader = request.headers.get("Upgrade");
    if (!upgradeHeader || upgradeHeader !== "websocket") {
        console.error("Expected Upgrade: websocket");
        return error(426, "Expected Upgrade: websocket");
    }

    const response = await fetch(request);

    if (response.status !== 101) {
        console.error("Expected 101 response from origin");
        return error(502, "Expected 101 response from origin");
    }

    const originWebSocket = response.webSocket;
    if (!originWebSocket) {
        console.error("Expected WebSocket in response from origin");
        return error(502, "Expected WebSocket in response from origin");
    }
 // code continues below <insert here>
}

async function processWebSocketRequestV2(request: Request) : Promise<Response>
{
    const upgradeHeader = request.headers.get("Upgrade");
    if (!upgradeHeader || upgradeHeader !== "websocket") {
        console.error("Expected Upgrade: websocket");
        return error(426, "Expected Upgrade: websocket");
    }

    const response = await fetch(request);

    if (response.status !== 101) {
        console.error("Expected 101 response from origin");
        return error(502, "Expected 101 response from origin");
    }

    const originWebSocket = response.webSocket;
    if (!originWebSocket) {
        console.error("Expected WebSocket in response from origin");
        return error(502, "Expected WebSocket in response from origin");
    }
 // code continues below <insert here>
}

async function processWebSocketRequestV2(request: Request) : Promise<Response>
{
    const upgradeHeader = request.headers.get("Upgrade");
    if (!upgradeHeader || upgradeHeader !== "websocket") {
        console.error("Expected Upgrade: websocket");
        return error(426, "Expected Upgrade: websocket");
    }

    const response = await fetch(request);

    if (response.status !== 101) {
        console.error("Expected 101 response from origin");
        return error(502, "Expected 101 response from origin");
    }

    const originWebSocket = response.webSocket;
    if (!originWebSocket) {
        console.error("Expected WebSocket in response from origin");
        return error(502, "Expected WebSocket in response from origin");
    }
 // code continues below <insert here>
}

B

Bogdan•12/13/23, 1:25 PM

// continued, the websocket pair creation and binding to origin socket
    const webSocketPair = new WebSocketPair();
    const [client, server] = Object.values(webSocketPair);
  originWebSocket.addEventListener('message', event => {
        console.warn('WebSocket message from Origin:', event.data)
        console.warn('WebSocket message from Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Sending to client', event.data);
            server.send(event.data);
        }
    });

    originWebSocket.addEventListener('close', () => {
        console.warn('WebSocket closed by Origin');
        console.warn('WebSocket closed by Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('WebSocket closed by Origin, closing client, client ReadyState:', server.readyState)
            server.close();
        }
    });

    originWebSocket.addEventListener('error', event => {
        console.error('WebSocket error on Origin:', event.message);
        console.error('WebSocket error on Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('WebSocket error on Origin, closing client, client ReadyState:', server.readyState);
            server.close();
        }
    });

// continued, the websocket pair creation and binding to origin socket
    const webSocketPair = new WebSocketPair();
    const [client, server] = Object.values(webSocketPair);
  originWebSocket.addEventListener('message', event => {
        console.warn('WebSocket message from Origin:', event.data)
        console.warn('WebSocket message from Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Sending to client', event.data);
            server.send(event.data);
        }
    });

    originWebSocket.addEventListener('close', () => {
        console.warn('WebSocket closed by Origin');
        console.warn('WebSocket closed by Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('WebSocket closed by Origin, closing client, client ReadyState:', server.readyState)
            server.close();
        }
    });

    originWebSocket.addEventListener('error', event => {
        console.error('WebSocket error on Origin:', event.message);
        console.error('WebSocket error on Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('WebSocket error on Origin, closing client, client ReadyState:', server.readyState);
            server.close();
        }
    });

// continued, the websocket pair creation and binding to origin socket
    const webSocketPair = new WebSocketPair();
    const [client, server] = Object.values(webSocketPair);
  originWebSocket.addEventListener('message', event => {
        console.warn('WebSocket message from Origin:', event.data)
        console.warn('WebSocket message from Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Sending to client', event.data);
            server.send(event.data);
        }
    });

    originWebSocket.addEventListener('close', () => {
        console.warn('WebSocket closed by Origin');
        console.warn('WebSocket closed by Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('WebSocket closed by Origin, closing client, client ReadyState:', server.readyState)
            server.close();
        }
    });

    originWebSocket.addEventListener('error', event => {
        console.error('WebSocket error on Origin:', event.message);
        console.error('WebSocket error on Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('WebSocket error on Origin, closing client, client ReadyState:', server.readyState);
            server.close();
        }
    });

// continued, the websocket pair creation and binding to origin socket
    const webSocketPair = new WebSocketPair();
    const [client, server] = Object.values(webSocketPair);
  originWebSocket.addEventListener('message', event => {
        console.warn('WebSocket message from Origin:', event.data)
        console.warn('WebSocket message from Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Sending to client', event.data);
            server.send(event.data);
        }
    });

    originWebSocket.addEventListener('close', () => {
        console.warn('WebSocket closed by Origin');
        console.warn('WebSocket closed by Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('WebSocket closed by Origin, closing client, client ReadyState:', server.readyState)
            server.close();
        }
    });

    originWebSocket.addEventListener('error', event => {
        console.error('WebSocket error on Origin:', event.message);
        console.error('WebSocket error on Origin client ReadyState:', server.readyState)
        if (server.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('WebSocket error on Origin, closing client, client ReadyState:', server.readyState);
            server.close();
        }
    });

B

Bogdan•12/13/23, 1:26 PM

// continued binding the websocket pair events and returning the 101

    server.addEventListener('message', event => {
        console.warn('Browser Client WebSocket message:', event.data)
        console.warn('Browser Client Websocket message origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Sending to origin', event.data, "origing ReadyState:", originWebSocket.readyState);
            originWebSocket.send(event.data);
        }
    });

    server.addEventListener('close', () => {
        console.warn('Browser Client WebSocket closed');
        console.warn('Browser Client Websocket closed origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Browser Client Websocket closed, closing origin, origin ReadyState:', originWebSocket.readyState)
            originWebSocket.close();
        }
    });

    server.addEventListener('error', event => {
        console.error('Browser Client WebSocket error:', event.message);
        console.warn('Browser Client Websocket error origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Browser Client Websocket error, closing origin, origin ReadyState:', originWebSocket.readyState)
            originWebSocket.close();
        }
    });
    
    server.accept();
    originWebSocket.accept();

    return new Response(null, {
        status: 101,
        webSocket: client
    });

// continued binding the websocket pair events and returning the 101

    server.addEventListener('message', event => {
        console.warn('Browser Client WebSocket message:', event.data)
        console.warn('Browser Client Websocket message origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Sending to origin', event.data, "origing ReadyState:", originWebSocket.readyState);
            originWebSocket.send(event.data);
        }
    });

    server.addEventListener('close', () => {
        console.warn('Browser Client WebSocket closed');
        console.warn('Browser Client Websocket closed origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Browser Client Websocket closed, closing origin, origin ReadyState:', originWebSocket.readyState)
            originWebSocket.close();
        }
    });

    server.addEventListener('error', event => {
        console.error('Browser Client WebSocket error:', event.message);
        console.warn('Browser Client Websocket error origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Browser Client Websocket error, closing origin, origin ReadyState:', originWebSocket.readyState)
            originWebSocket.close();
        }
    });
    
    server.accept();
    originWebSocket.accept();

    return new Response(null, {
        status: 101,
        webSocket: client
    });

// continued binding the websocket pair events and returning the 101

    server.addEventListener('message', event => {
        console.warn('Browser Client WebSocket message:', event.data)
        console.warn('Browser Client Websocket message origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Sending to origin', event.data, "origing ReadyState:", originWebSocket.readyState);
            originWebSocket.send(event.data);
        }
    });

    server.addEventListener('close', () => {
        console.warn('Browser Client WebSocket closed');
        console.warn('Browser Client Websocket closed origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Browser Client Websocket closed, closing origin, origin ReadyState:', originWebSocket.readyState)
            originWebSocket.close();
        }
    });

    server.addEventListener('error', event => {
        console.error('Browser Client WebSocket error:', event.message);
        console.warn('Browser Client Websocket error origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Browser Client Websocket error, closing origin, origin ReadyState:', originWebSocket.readyState)
            originWebSocket.close();
        }
    });
    
    server.accept();
    originWebSocket.accept();

    return new Response(null, {
        status: 101,
        webSocket: client
    });

// continued binding the websocket pair events and returning the 101

    server.addEventListener('message', event => {
        console.warn('Browser Client WebSocket message:', event.data)
        console.warn('Browser Client Websocket message origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Sending to origin', event.data, "origing ReadyState:", originWebSocket.readyState);
            originWebSocket.send(event.data);
        }
    });

    server.addEventListener('close', () => {
        console.warn('Browser Client WebSocket closed');
        console.warn('Browser Client Websocket closed origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Browser Client Websocket closed, closing origin, origin ReadyState:', originWebSocket.readyState)
            originWebSocket.close();
        }
    });

    server.addEventListener('error', event => {
        console.error('Browser Client WebSocket error:', event.message);
        console.warn('Browser Client Websocket error origin ReadyState:', originWebSocket.readyState)
        if (originWebSocket.readyState === WebSocket.READY_STATE_OPEN) {
            console.warn('Browser Client Websocket error, closing origin, origin ReadyState:', originWebSocket.readyState)
            originWebSocket.close();
        }
    });
    
    server.accept();
    originWebSocket.accept();

    return new Response(null, {
        status: 101,
        webSocket: client
    });

B

Bogdan•12/13/23, 1:27 PM

am i doing something wrong? should i be going with a Durable Object?

B

Bogdan•12/13/23, 1:28 PM

from my point of view V1 should proxy correctly but this not being documented makes me think i might be wrong

Similar Threads

Similar Threads

Similar Threads