Pass existing WebSockets into realtime APIs

[kristianfreeman]

I've been experimenting with Supabase running on Cloudflare Workers - basic API requests are working, but I'm stuck on working with realtime data!

We recently announced WebSocket support in Workers. You can work with WSs in Workers by creating a WebSocketPair, which is an object containing a server and client WebSocket. The client WebSocket is sent down to the client, and the server WebSocket remains available in an open connection for the Workers function to work with:

const wsPair = new WebSocketPair()
const server = wsPair[0]
const client = wsPair[1]

// Accept the server websocket and keep conn open
server.accept()

// Send data down to client
server.send(data)

// Send client websocket back to client
return new Response(null, { status: 101, webSocket: client })

This server WebSocket instance is a great candidate for being used by Supabase to provide realtime data through the Workers function to the client. Our WebSocket API is fairly similar to the w3c spec, but differs in some respects, specifically around event handling (we use addEventListener instead of onopen, onclose, etc.) and a few fields we don't implement.

It would be great to use these WebSockets with Supabase! Given that we already create WebSockets in Workers via our own API, allowing users to pass in an existing WebSocket would simplify the work on the Supabase end. Ideally, we could wrap the WebSocket with a few more functions, and basically polyfill a class that would make it compatible with the work you've already done. For instance, we can patch onclose to equal addEventListener('close'), etc.

Here's a stab at what that would look like -- not sure if it's the right place, but the idea would be that at some point in the setup process for a subscription, you could pass in a websocket config option, like in subscribe():

const wsPair = new WebSocketPair()
const serverWs = wsPair[0]

await supabase
  .from('message')
  .on('*', payload => {
    serverWs.send(JSON.stringify(payload))
  })
  .subscribe({ webSocket: serverWs })

Another neat option would be to expose the websocket as an argument to the on callback function, so you could access it directly inside of the function itself:

const wsPair = new WebSocketPair()
const serverWs = wsPair[0]

await supabase
  .from('message')
  .on('*', (payload, ws) => {
    ws.send(JSON.stringify(payload))
  })
  .subscribe({ webSocket: serverWs })

I'm still pretty new to Supabase and wrapping my head around the different codebases, and how they all work together. If any thoughts come out of this or if I can give more details, let me know! Super excited about Supabase and having a lot of fun building with it right now :)