WebSocket requests are not handled

[Ehesp]

Astro Info

Astro                    v4.2.6
Node                     v18.17.0
System                   macOS (arm64)
Package Manager          unknown
Output                   server
Adapter                  @astrojs/cloudflare
Integrations             @astrojs/tailwind
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I thought this was an issue with using the cloudflare adapter, but it seems it happens in a bare bones Astro project.

I'm trying to handle incoming websockets via Page Endpoints, but it seems they are just ignored by Astro.

What's the expected result?

To be able to handle WS (GET) requests with an upgrade header and return the correct response. See the repo, the upgrade request never hits the endpoint:

import { type APIRoute } from 'astro';

export const GET: APIRoute = (ctx) => {
  if (ctx.request.headers.get('upgrade') === 'websocket') {
    console.log('Got WS request');  
  } else {
    console.log('Got HTTP request');
  }
  return new Response('hello');
}

In the example, a fetch request comes through ok, just not the WS. Not sure if I'm being stupid, but I can't find any other issues relating to this, but surely someones come across it before!

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-4rev6i?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[lilnasy]

You are correct, this is an astro behavior. The vite HMR server listens on 4321 for websocket upgrade requests, and if the request isn't made by vite's client side code (checked by websocket protocol), the request never receives an answer.

The astro server only listens for normal http requests. Supporting upgrade requests is not as clear-cut. For upgrade requests, the node server does not create a res: http.OutgoingMessage object. So implementation-wise, what do we do with the Response object returned by the APIRoute?

I'm guessing you are hoping to implement dev server support for WebSocketPair. Another blocker would be that creating a Response object with 101 status code is against the fetch spec. Cloudflare's runtime relaxed this rule to make their API work, Node (undici) hasn't. We can't use node's built-in Response constructor because of that.

[lilnasy]

I'm interested in improving the dev story for Cloudflare. However, WebSockets would need to be a proper feature, requiring buy-in, and constant maintenance.

Closing as a roadmap discussion would be a better place.

[chrisweb]

I just started building a new prototype using Astro to run it on deno and use the built in deno websockets and then I find this :(

This is the code I expected to work:

import type { APIRoute } from "astro";

export const GET: APIRoute = ({ request }) => {
    
  console.log("request to websocket endpoint");

  const upgradeHeader = request.headers.get("upgrade");

  console.log("upgrade header:", upgradeHeader);

  if (!upgradeHeader || upgradeHeader !== "websocket") {
    console.error("invalid websocket upgrade request");
    return new Response("Request is not a WebSocket upgrade request", { status: 400 });
  }

  try {

    const { socket, response } = Deno.upgradeWebSocket(request);

    socket.onopen = () => {
      console.log("connection opened");
      socket.send(
        JSON.stringify({ message: "Connected!" }),
      );
    };

    socket.onmessage = (event) => {
      console.log("onmessage:", event.data);
      try {
        const data = JSON.parse(event.data);
        socket.send(JSON.stringify({
          type: "echo",
          message: data.message,
          timestamp: new Date().toISOString(),
        }));
      } catch {
        socket.send(JSON.stringify({
          type: "error",
          message: "Json parsing error",
        }));
      }
    };

    socket.onerror = (error) => {
        console.error("error:", error);
        socket.send(JSON.stringify({
            type: "error",
            message: "Unknown error occurred",
        }));
    };

    socket.onclose = () => {};

    return response;
  } catch (error) {
    console.error("WebSocket upgrade error:", error);
    return new Response("WebSocket upgrade failed", { status: 500 });
  }
};

@lilnasy the roadmap discussion you mentioned, is that an internal thing or a github discussion I could follow?

In the other ticket (13175) ascorbic suggested to open a "feature" ticket, I could do just that!?

EDIT: Oh and regarding adding it to the roadmap you said you would like to improve the cloudflare DX, this is nice but websockets are much more than a cloudflare thing, they are a web-standard (and I just switched to Astro because I read that it is embracing modern web-standards a lot more than my current framework)

[lilnasy]

Have you tried the websocket adapter?

https://www.npmjs.com/package/astro-deno-websocket

[chrisweb]

I did try out astro-deno-websocket (side note: the link on npm to the github repo returns a 404, it links to https://github.com/lilnasy/gratelets/packages/deno-websocket but the project is actually at https://github.com/lilnasy/gratelets/tree/main/packages/deno-websocket), thank you for working on this :)

It worked very well, all I had to do was install it and then replace the deno adapter (npm:@deno/astro-adapter) with the deno websocket adapter (npm:astro-deno-websocket) in the astro config (as described in the astro-deno-websocket readme). Thank you for building this, it solves this ticket.

I was wondering if there is already a discussion about native websocket support in astro that I could subscribe to. I guess for now the best option is to be in the astro discord and keep an eye on websocket related posts.