webSocketImpl on Cloudflare Workers

[jeevcat]

I'm trying to create a Client for integration testing purposes in a Cloudflare Workers environment.

If I pass the "WebSocket" implementation provided by Cloudflare Workers, it fails the isWebSocket type guard, due to different naming of the members CLOSED, CLOSING, etc.

How should I work around this? Create some kind of wrapper class?

Thanks for your input!

[enisdenjo]

I don't think you can use Cloudflare Workers WebSocket as a client, only as a server.

In case you need a server example, you can check it out here: cloudflare-worker-graphql-ws-template.

[jeevcat]

Thanks for your response! Further down in your link it actually does mention using Cloudflare Works WebSocket as a client https://developers.cloudflare.com/workers/learning/using-websockets/#writing-a-websocket-client

[enisdenjo]

My bad @jeevcat.

Since the Cloudflare Workers WebSocket is different from the web standard implementation, a wrapper is indeed necessary. Their WebSocket has to be implemented in accordance with MDN WebSocket.

A version adapted exclusively for graphql-ws would look like this (untested):

import "@cloudflare/workers-types";

class WebSocketForGraphQLWS {
  private ws: WebSocket;
  constructor(url: string, protocol: string) {
    (async () => {
      const res = await fetch(url, {
        headers: {
          Upgrade: "websocket",
          "Sec-WebSocket-Protocol": protocol,
        },
      });

      this.ws = res.webSocket;
      if (!this.ws) {
        throw new Error("server didn't accept WebSocket");
      }

      this.ws.accept();

      this.ws.addEventListener("open", this.onopen);
      this.ws.addEventListener("error", this.onerror);
      this.ws.addEventListener("close", this.onclose);
      this.ws.addEventListener("message", this.onmessage);
    })().catch((e) => this.onerror(e));
  }

  // should be implemented by graphql-ws in timely manner
  public onopen() {
    throw new Error("onopen is not implemented");
  }
  public onerror() {
    throw new Error("onerror is not implemented");
  }
  public onclose() {
    throw new Error("onclose is not implemented");
  }
  public onmessage() {
    throw new Error("onmessage is not implemented");
  }

  // properties and methods used by graphql-ws
  static CONNECTING = WebSocket.READY_STATE_CONNECTING;
  static OPEN = WebSocket.READY_STATE_OPEN;
  static CLOSING = WebSocket.READY_STATE_CLOSING;
  static CLOSED = WebSocket.READY_STATE_CLOSED;
  get readyState() {
    return this.ws.readyState;
  }
  public send(msg: string) {
    this.ws.send(msg);
  }
  public close(code: number, reason: string) {
    this.ws.close(code, reason);
  }
}

Would be lovely if you can test this out and report back, I'd like to add it to the documentation. Thanks in advance!

[tornqvist]

I stumbled on the same problem, using a Cloudflare Worker as a gateway for another GraphQL API. Using the fetch approach as above didn't work as the worker would throw an error that it couldn't fetch a ws:// url. However, using the WebSocket as is and proxying the static props and event listeners did work!

But there's a caveat! There's a discrepancy between the Cloudflare production environment and local development using Miniflare. Miniflare doesn't support using the on-methods to attach listens, but Cloudflare does. Using vite to compile the worker, this is what I came up with which actually does work, both in production and locally. Using Cloudflare Environments would though probably be more idiomatic.

class WebSocketForGraphQLWS extends WebSocket {
  constructor(url, protocols) {
    super(url, protocols)

    if (import.meta.env.DEV) {
      this.addEventListener('open', (...args) => this.onopen?.(...args))
      this.addEventListener('error', (...args) => this.onerror?.(...args))
      this.addEventListener('close', (...args) => this.onclose?.(...args))
      this.addEventListener('message', (...args) => this.onmessage?.(...args))
    }
  }

  static CONNECTING = WebSocket.READY_STATE_CONNECTING
  static OPEN = WebSocket.READY_STATE_OPEN
  static CLOSING = WebSocket.READY_STATE_CLOSING
  static CLOSED = WebSocket.READY_STATE_CLOSED
}