feat: add cloudflare support (#8)

.eslintrc

@@ -2,6 +2,7 @@
   "extends": ["eslint-config-unjs"],
   "rules": {
     "@typescript-eslint/no-unused-vars": 0,
-    "no-useless-constructor": 0
+    "no-useless-constructor": 0,
+    "unicorn/consistent-function-scoping": 0
   }
 }

.gitignore

@@ -6,3 +6,4 @@ dist
 .eslintcache
 *.log*
 *.env*
+.wrangler

README.md

@@ -18,7 +18,7 @@ Cross-platform WebSocket Servers:
 
 📦 No external dependencies, includes [ws](https://github.com/websockets/ws) types and Node.js support
 
-🔗 Seamlessly integrates with [Bun](https://bun.sh/) and [Deno](https://deno.com/)
+🔗 Seamlessly integrates with, [Node.js](https://nodejs.org/en), [Bun](https://bun.sh/), [Deno](https://deno.com/) and [Cloudflare Workers](https://workers.cloudflare.com/)!
 
 💡 Extremely lightweight and tree-shakable packaging with ESM and CJS support
 
@@ -115,6 +115,30 @@ Deno.serve({ port: 3000 }, (req) => {
 
 See [playground/deno.ts](./playground/deno.ts) for demo and [src/adapters/deno.ts](./src/adapters/deno.ts) for implementation.
 
+### Integration with **Cloudflare Workers**
+
+To integrate CrossWS with your Cloudflare Workers, you need to check for the `upgrade` header
+
+```ts
+import cloudflareAdapter from "crossws/adapters/cloudflare";
+
+const { handleUpgrade } = cloudflareAdapter({ onMessage: console.log });
+
+export default {
+  async fetch(request, env, context) {
+    if (request.headers.get("upgrade") === "websocket") {
+      return handleUpgrade(request, env, context);
+    }
+    return new Response(
+      `<script>new WebSocket("ws://localhost:3000").addEventListener("open", (e) => e.target.send("Hello from client!"));</script>`,
+      { headers: { "content-type": "text/html" } },
+    );
+  },
+};
+```
+
+See [playground/cloudflare.ts](./playground/cloudflare.ts) for demo and [src/adapters/cloudflare.ts](./src/adapters/cloudflare.ts) for implementation.
+
 ### Integration with other runtimes
 
 You can define your custom adapters using `defineWebSocketAdapter` wrapper.

package.json

@@ -22,6 +22,11 @@
       "import": "./dist/adapters/deno.mjs",
       "require": "./dist/adapters/deno.cjs"
     },
+    "./adapters/cloudflare": {
+      "types": "./dist/adapters/cloudflare.d.ts",
+      "import": "./dist/adapters/cloudflare.mjs",
+      "require": "./dist/adapters/cloudflare.cjs"
+    },
     "./adapters/node": {
       "types": "./dist/adapters/node.d.ts",
       "import": "./dist/adapters/node.mjs",
@@ -40,6 +45,7 @@
     "play:node": "jiti playground/node.ts",
     "play:bun": "bun playground/bun.ts",
     "play:deno": "deno run -A playground/deno.ts",
+    "play:cf": "wrangler dev",
     "lint": "eslint --cache --ext .ts,.js,.mjs,.cjs . && prettier -c src test",
     "lint:fix": "eslint --cache --ext .ts,.js,.mjs,.cjs . --fix && prettier -c src test -w",
     "prepack": "pnpm run build",
@@ -48,6 +54,7 @@
     "test:types": "tsc --noEmit --skipLibCheck"
   },
   "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240117.0",
     "@types/node": "^20.11.8",
     "@types/web": "^0.0.135",
     "@types/ws": "^8.5.10",
@@ -61,7 +68,8 @@
     "uWebSockets.js": "github:uNetworking/uWebSockets.js#v20.33.0",
     "unbuild": "^2.0.0",
     "vitest": "^1.2.2",
+    "wrangler": "^3.25.0",
     "ws": "^8.16.0"
   },
   "packageManager": "pnpm@8.15.0"
-}
+}

playground/_common.ts

@@ -1,10 +1,11 @@
-import {
-  defineWebSocketHandler,
-  type WebSocketAdapter,
-  type WebSocketHandler,
-} from "../src";
+import { defineWebSocketHandler } from "../src";
+import type { WebSocketAdapter } from "../src";
 
-export const indexHTMLURL = new URL("_index.html", import.meta.url);
+export const getIndexHTMLURL = () =>
+  new URL("public/index.html", import.meta.url);
+
+export const importIndexHTML = () =>
+  import("./public/index.html" as string).then((r) => r.default);
 
 export const log = (arg0: string, ...args) =>
   console.log(`[ws] [${arg0}]`, ...args);
@@ -21,6 +22,7 @@ const websocketHandler = defineWebSocketHandler({
   },
   onOpen: (peer) => {
     log("open", peer);
+    peer.send("hello!");
   },
   onClose: (peer, code, reason) => {
     log("close", peer, code, reason);

playground/bun.ts

@@ -1,7 +1,7 @@
 // You can run this demo using `bun --bun ./bun.ts` or `npm run play:bun` in repo
 
 import bunAdapter from "../src/adapters/bun";
-import { createDemo, indexHTMLURL } from "./_common";
+import { createDemo, getIndexHTMLURL } from "./_common";
 
 const adapter = createDemo(bunAdapter);
 
@@ -11,7 +11,7 @@ Bun.serve({
     if (server.upgrade(req)) {
       return;
     }
-    return new Response(Bun.file(indexHTMLURL), {
+    return new Response(Bun.file(getIndexHTMLURL()), {
       headers: { "Content-Type": "text/html" },
     });
   },

playground/cloudflare.ts

@@ -0,0 +1,25 @@
+// You can run this demo using `npm run play:cf` in repo
+
+/// <reference types="@cloudflare/workers-types" />
+
+import cloudflareAdapter from "../src/adapters/cloudflare";
+
+import { createDemo, importIndexHTML } from "./_common.ts";
+
+const { handleUpgrade } = createDemo(cloudflareAdapter);
+
+export default {
+  async fetch(
+    request: Request,
+    env: Record<string, any>,
+    context: ExecutionContext,
+  ) {
+    if (request.headers.get("upgrade") === "websocket") {
+      return handleUpgrade(request, env, context);
+    }
+
+    return new Response(await importIndexHTML(), {
+      headers: { "content-type": "text/html" },
+    });
+  },
+};

playground/deno.ts

@@ -5,7 +5,7 @@ import denoAdapter from "../dist/adapters/deno.mjs";
 // @ts-ignore
 import type * as _Deno from "../types/lib.deno.d.ts";
 
-import { createDemo, indexHTMLURL } from "./_common.ts";
+import { createDemo, getIndexHTMLURL } from "./_common.ts";
 
 const adapter = createDemo(denoAdapter);
 
@@ -14,7 +14,7 @@ Deno.serve({ port: 3001 }, (req) => {
     return adapter.handleUpgrade(req);
   }
 
-  return new Response(Deno.readFileSync(indexHTMLURL), {
+  return new Response(Deno.readFileSync(getIndexHTMLURL()), {
     headers: { "Content-Type": "text/html" },
   });
 });

playground/node.ts

@@ -4,13 +4,13 @@ import { createServer } from "node:http";
 import { readFileSync } from "node:fs";
 
 import nodeAdapter from "../src/adapters/node";
-import { createDemo, indexHTMLURL } from "./_common";
+import { createDemo, getIndexHTMLURL } from "./_common";
 
 const adapter = createDemo(nodeAdapter);
 
 const server = createServer((req, res) => {
   res.writeHead(200, { "Content-Type": "text/html" });
-  const indexHTML = readFileSync(indexHTMLURL, "utf8");
+  const indexHTML = readFileSync(getIndexHTMLURL(), "utf8");
   res.end(indexHTML);
 });
 

playground/_index.html → playground/public/index.html

@@ -5,7 +5,7 @@
 <body>
   <div id="logs"></div>
   <script type="module">
-    const url = `ws://${location.host}`;
+    const url = `ws://${location.host}/_ws`;
     const logsEl = document.querySelector("#logs");
     const log = (...args) => {
       console.log("[ws]", ...args);