Cloudflare WebSocket proxy in Vite Cloudflare plugin

[izznat]

Cloudflare Workers supports establishing WebSocket connection with client via Durable Objects. Currently, WebSocket upgrade request from client is intercepted by Vite HMR WebSocket server and has no mechanism to passthrough WebSocket messages from client to Durable Objects and vice versa. By providing a WebSocket proxy in Vite Cloudflare plugin, we can create WebSocket endpoints as loader function backed by Durable Objects. Further increase compatibility with the production environment of Cloudflare.

Implementation PR: #8834
Example: izznatsir/remix-cloudflare-websocket

[praneybehl]

Looking at the patch, it seems like a ws passthrough for dev server. Does that mean for production ws connection just works fine?

[izznat]

Maybe something is changed since the patch is created. Either in wrangler or remix. I will try to update the patch later.

[izznat]

I've updated remix and wrangler to the latest version of the demo and it works. Could you try again? Just clone the latest repo, don't update the deps by yourself because the patch needs to be updated manually.

[praneybehl]

So I got rid of the previous clone and re-cloned the latest repo, installed packages via pnpm, ran pnpm dev still the same. The WS connection stays in pending state.

Also the build doesn't work as it is expecting ./build/client/index.js file which doesn't exist. Wonder how you deployed, or what am I missing? 🤔

[izznat]

Based on your screenshot, the join request is successful with 101 status code. The time is Pending because the websocket connection is not yet closed, the same with the Vite HMR connection. If additional hello is appended to the list each time you click the Hello! button, it means the proxy is working.

To test the build run pnpm start after generating the build via pnpm build. To deploy, you need to deploy the durable-objects worker first, then deploy the remix build to cloudflare pages. Then add durable object bindings to your remix deployment via cloudflare dashboard (for the first deployment only). Here is the docs: https://developers.cloudflare.com/pages/functions/bindings/#durable-objects

[izznat]

More clearly you can click the join request item in the network devtools, then click the messages tab. When you click the Hello! button the message flow will be displayed in the messages tab. Here is mine: