WebSocket Support

docs/routes/advanced/websocket.mdx

@@ -0,0 +1,53 @@
+---
+section: advanced
+title: WebSocket
+order: 8
+---
+
+# WebSocket
+
+WebSocket may be included by passing file you specify in your start config.
+
+```js
+import { defineConfig } from "@solidjs/start/config";
+
+export default defineConfig({
+  websocket: "./src/websocket.ts"
+});
+```
+
+Inside the websocket file, you can export a `createWebSocket` function.
+
+```tsx
+import { createWebSocket } from "@solidjs/start/websocket";
+
+export default createWebSocket({
+  upgrade(req) {
+    console.log(`[ws] upgrading ${req.url}...`)
+    return {
+      headers: {}
+    }
+  }
+
+  open(peer) {
+    console.log(`[ws] open: ${peer}`);
+  },
+
+  message(peer, message) {
+    console.log("[ws] message", peer, message);
+    if (message.text().includes("ping")) {
+      peer.send("pong");
+    }
+  },
+
+  close(peer, event) {
+    console.log("[ws] close", peer, event);
+  },
+
+  error(peer, error) {
+    console.log("[ws] error", peer, error);
+  },
+});
+```
+
+See API reference on https://crossws.unjs.io/

examples/experiments/app.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "@solidjs/start/config";
 
 export default defineConfig({
-  middleware: "./src/middleware.ts"
+  middleware: "./src/middleware.ts",
+  websocket: "./src/websocket.ts"
 });

examples/experiments/src/websocket.ts

@@ -0,0 +1,29 @@
+import { createWebSocket } from "@solidjs/start/websocket";
+
+export default createWebSocket({
+  upgrade(req) {
+    console.log(`[ws] upgrading ${req.url}...`)
+    return {
+      headers: {}
+    }
+  },
+
+  open(peer) {
+    console.log(`[ws] open: ${peer}`);
+  },
+
+  message(peer, message) {
+    console.log("[ws] message", peer, message);
+    if (message.text().includes("ping")) {
+      peer.send("pong");
+    }
+  },
+
+  close(peer, event) {
+    console.log("[ws] close", peer, event);
+  },
+
+  error(peer, error) {
+    console.log("[ws] error", peer, error);
+  },
+});

packages/start/config/index.d.ts

@@ -16,6 +16,7 @@ type SolidStartInlineConfig = {
   appRoot?: string;
   routeDir?: string;
   middleware?: string;
+  websocket?: string;
   devOverlay?:  boolean;
   experimental?: {
     islands?: boolean;

packages/start/config/index.js

@@ -51,7 +51,8 @@ export function defineConfig(baseConfig = {}) {
     solid: {},
     server: {
       experimental: {
-        asyncContext: true
+        asyncContext: true,
+        websocket: Boolean(start.websocket)
       }
     }
   });
@@ -256,7 +257,63 @@ export function defineConfig(baseConfig = {}) {
             })
           ];
         }
-      }
+      },
+
+      ...(start.websocket
+        ? [
+            {
+              name: "websocket",
+              type: "http",
+              base: "/_ws",
+              handler: start.websocket,
+              middleware: start.middleware,
+              extensions,
+              target: "server",
+              plugins: async () => {
+                const userConfig = typeof vite === "function" ? await vite({ router: "server" }) : { ...vite };
+                const plugins = userConfig.plugins || [];
+                delete userConfig.plugins;
+                return [
+                  config("user", {
+                    ...userConfig,
+                    optimizeDeps: {
+                      ...(userConfig.optimizeDeps || {}),
+                      include: [
+                        ...(userConfig.optimizeDeps?.include || []),
+                        "@solidjs/start > source-map-js",
+                        "@solidjs/start > error-stack-parser"
+                      ]
+                    }
+                  }),
+                  ...plugins,
+                  solid({ ...start.solid, ssr: start.ssr, extensions: extensions.map(ext => `.${ext}`) }),
+                  config("app-server", {
+                    resolve: {
+                      alias: {
+                        "#start/app": join(process.cwd(), start.appRoot, `app${entryExtension}`),
+                        "~": join(process.cwd(), start.appRoot),
+                        ...(!start.ssr
+                          ? {
+                              "@solidjs/start/server": "@solidjs/start/server/spa"
+                            }
+                          : {}),
+                        ...userConfig.resolve?.alias
+                      }
+                    },
+                    cacheDir: "node_modules/.vinxi/websocket",
+                    define: {
+                      "import.meta.env.START_ISLANDS": JSON.stringify(start.experimental.islands),
+                      "import.meta.env.SSR": JSON.stringify(true),
+                      "import.meta.env.START_SSR": JSON.stringify(start.ssr),
+                      "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
+                      ...userConfig.define
+                    }
+                  })
+                ];
+              }
+            }
+          ]
+        : [])
     ]
   });
 }

packages/start/package.json

@@ -21,6 +21,7 @@
     ".": "./dist/index.jsx",
     "./config": "./config/index.js",
     "./middleware": "./dist/middleware/index.jsx",
+    "./websocket": "./dist/websocket/index.jsx",
     "./router": "./dist/router/index.jsx",
     "./server": "./dist/server/index.jsx",
     "./server/spa": "./dist/server/spa/index.jsx",
@@ -36,6 +37,9 @@
       "middleware": [
         "./dist/middleware/index.d.ts"
       ],
+      "websocket": [
+        "./dist/websocket/index.d.ts"
+      ],
       "router": [
         "./dist/router/index.d.ts"
       ],

packages/start/src/websocket/index.tsx

@@ -0,0 +1,9 @@
+// @refresh skip
+import { defineWebSocket, eventHandler } from "vinxi/http";
+
+export function createWebSocket(args: Parameters<typeof defineWebSocket>) {
+  return eventHandler({
+    handler: () => {},
+    websocket: defineWebSocket(args)
+  });
+}