fix: websockets (#522)

This fixes websockets in `wrangler dev`. It looks like we broke it in #503. I've reverted the specific changes made to `proxy.ts`.

Test plan -

```
cd packages/wrangler
npm run build
cd ../workers-chat-demo
npx wrangler dev

```

Author: threepointone

.changeset/empty-trains-mix.md

@@ -0,0 +1,17 @@
+---
+"wrangler": patch
+---
+
+fix: websockets
+
+This fixes websockets in `wrangler dev`. It looks like we broke it in https://github.com/cloudflare/wrangler2/pull/503. I've reverted the specific changes made to `proxy.ts`.
+
+Test plan -
+
+```
+cd packages/wrangler
+npm run build
+cd ../workers-chat-demo
+npx wrangler dev
+
+```

package-lock.json

@@ -66,6 +66,7 @@
     "command-exists": "^1.2.9",
     "devtools-protocol": "^0.0.955664",
     "execa": "^6.0.0",
+    "faye-websocket": "^0.11.4",
     "finalhandler": "^1.1.2",
     "find-up": "^6.2.0",
     "ignore": "^5.2.0",

packages/wrangler/package.json

@@ -0,0 +1,6 @@
+module "faye-websocket" {
+  /**
+   * Standards-compliant WebSocket client and server.
+   */
+  export default WebSocket;
+}

packages/wrangler/src/__tests__/helpers/faye-websocket.d.ts

@@ -1,8 +1,8 @@
 import { createServer } from "node:http";
 import { connect } from "node:http2";
+import WebSocket from "faye-websocket";
 import { useEffect, useRef, useState } from "react";
 import serveStatic from "serve-static";
-import WebSocket from "ws";
 import type { CfPreviewToken } from "./api/preview";
 import type {
   IncomingHttpHeaders,
@@ -12,6 +12,12 @@ import type {
   Server,
 } from "node:http";
 import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
+import type ws from "ws";
+
+interface IWebsocket extends ws {
+  // Pipe implements .on("message", ...)
+  pipe<T>(fn: T): IWebsocket;
+}
 
 /**
  * `usePreviewServer` is a React hook that creates a local development
@@ -199,24 +205,26 @@ export function usePreviewServer({
     requestResponseBufferRef.current = [];
 
     /** HTTP/1 -> WebSocket (over HTTP/1)  */
-    const handleUpgrade = (message: IncomingMessage, socket: WebSocket) => {
+    const handleUpgrade = (
+      message: IncomingMessage,
+      socket: WebSocket,
+      body: Buffer
+    ) => {
       const { headers, url } = message;
       addCfPreviewTokenHeader(headers, previewToken.value);
       headers["host"] = previewToken.host;
-      const localWebsocket = WebSocket.createWebSocketStream(socket);
+      const localWebsocket = new WebSocket(message, socket, body) as IWebsocket;
       // TODO(soon): Custom WebSocket protocol is not working?
-      const remoteWebsocket = new WebSocket(
+      const remoteWebsocketClient = new WebSocket.Client(
         `wss://${previewToken.host}${url}`,
         [],
         { headers }
-      );
-      const remoteWebsocketStream =
-        WebSocket.createWebSocketStream(remoteWebsocket);
-      localWebsocket.pipe(remoteWebsocketStream).pipe(localWebsocket);
+      ) as IWebsocket;
+      localWebsocket.pipe(remoteWebsocketClient).pipe(localWebsocket);
       // We close down websockets whenever we refresh the token.
       cleanupListeners.push(() => {
-        socket.close();
-        remoteWebsocket.close();
+        localWebsocket.close();
+        remoteWebsocketClient.close();
       });
     };
     proxy.on("upgrade", handleUpgrade);