refactor: websocket server

.eslintrc.cjs

@@ -19,6 +19,9 @@ module.exports = {
     commonjs: true,
     es6: true,
   },
+  globals: {
+    process: false,
+  },
   ignorePatterns: ['!**/.server', '!**/.client'],
 
   // Base config
@@ -52,7 +55,13 @@ module.exports = {
 
     // Node
     {
-      files: ['.eslintrc.cjs', 'server.js', 'vite.config.js', 'websocket.js', 'public/assets/tileset.js'],
+      files: [
+        'app/websocket.js',
+        '.eslintrc.cjs',
+        'server.js',
+        'vite.config.js',
+        'public/assets/tileset.js',
+      ],
       env: {
         node: true,
       },

app/entry.server.jsx

@@ -11,8 +11,14 @@ import { RemixServer } from "@remix-run/react";
 import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 
+import websocketServer from './websocket';
+
 const ABORT_DELAY = 5_000;
 
+export async function websocket(server) {
+  await websocketServer(server);
+}
+
 export default function handleRequest(
   request,
   responseStatusCode,

app/net/client/prediction.js

@@ -2,7 +2,11 @@ let connected = false;
 let socket;
 onmessage = async (event) => {
   if (!connected) {
-    socket = new WebSocket(`wss://${event.data.host}/ws`);
+    const url = new URL(`wss://${event.data.host}/ws`)
+    if ('production' === process.env.NODE_ENV) {
+      url.protocol = 'ws:';
+    }
+    socket = new WebSocket(url.href);
     socket.binaryType = 'arraybuffer';
     await new Promise((resolve) => {
       socket.onopen = resolve;

app/net/client/remote.js

@@ -24,7 +24,11 @@ export default class RemoteClient extends Client {
       };
     }
     else {
-      this.socket = new WebSocket(`wss://${host}/ws`);
+      const url = new URL(`wss://${host}/ws`)
+      if ('production' === process.env.NODE_ENV) {
+        url.protocol = 'ws:';
+      }
+      this.socket = new WebSocket(url.href);
       this.socket.binaryType = 'arraybuffer';
       this.socket.onmessage = (event) => {
         this.accept(event.data);

app/net/server/worker.js

@@ -12,7 +12,8 @@ onmessage = (event) => {
   engine.server.accept(undefined, event.data);
 };
 
-await engine.load();
+(async () => {
-engine.start();
+  await engine.load();
-
+  engine.start();
-await engine.connectPlayer(undefined);
+  await engine.connectPlayer(undefined);
+})();

app/packets/action.js

@@ -28,4 +28,4 @@ export default class Action extends Packet {
     };
   }
 
-};
+}

app/websocket.js

@@ -19,7 +19,7 @@ function onUpgrade(request, socket, head) {
   }
 }
 
-export async function listen(server) {
+export default async function listen(server) {
   server.on('upgrade', onUpgrade);
 
   class SocketServer extends Server {

server.js

@@ -39,25 +39,17 @@ const viteDevServer = isProduction
       })
     );
 
+const ssr = await (
+  viteDevServer
+    ? viteDevServer.ssrLoadModule('virtual:remix/server-build')
+    : import('./build/server/index.js')
+);
+
 const remixHandler = createRequestHandler({
-  build: () => (
+  build: () => ssr,
-    viteDevServer
-      ? viteDevServer.ssrLoadModule('virtual:remix/server-build')
-      : import('./build/server/index.js')
-  ),
 });
 
-// WebSocket
+await ssr.entry.module.websocket(server);
-let listen;
-if (isProduction) {
-  ({listen} = await import('./websocket.js'));
-}
-else {
-  const {createViteRuntime} = await import('vite');
-  const runtime = await createViteRuntime(viteDevServer);
-  ({listen} = await runtime.executeEntrypoint('/websocket.js'));
-}
-await listen(server);
 
 app.use(compression());