SolidStart Websocket Proxy

Hello,

I've tried to create a proxy to standalone websocket server in SolidStart, for purpose of this showcase I created a simple demo showing the issue I ran into.

index.js aka the websocket server

const WebSocket = require("ws");

const PORT = 8080;
const wss = new WebSocket.Server({ port: PORT });

wss.on("connection", (ws) => {
  console.log("New client connected");

  ws.send("Hello");

  ws.on("message", (message) => {
    console.log(`Received: ${message}`);
  });

  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

const WebSocket = require("ws");

const PORT = 8080;
const wss = new WebSocket.Server({ port: PORT });

wss.on("connection", (ws) => {
  console.log("New client connected");

  ws.send("Hello");

  ws.on("message", (message) => {
    console.log(`Received: ${message}`);
  });

  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

then I have this very simple Websocket connection on the client

app.tsx

import { isServer } from "solid-js/web";

export default function App() {
  if (!isServer) {
    const connection = new WebSocket("ws://localhost:3000/ws");
    connection.onopen = () => {
      console.log("OPENED");
    };
    connection.onmessage = (e) => {
      console.log(JSON.stringify(e.data));
    };
  }
  return <main>Some content</main>;
}

import { isServer } from "solid-js/web";

export default function App() {
  if (!isServer) {
    const connection = new WebSocket("ws://localhost:3000/ws");
    connection.onopen = () => {
      console.log("OPENED");
    };
    connection.onmessage = (e) => {
      console.log(JSON.stringify(e.data));
    };
  }
  return <main>Some content</main>;
}

and here is the proxy

app.config.ts

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {
    server: {
      proxy: {
        "/ws": {
          target: "ws://localhost:8080",
          rewrite: (path) => path.replace(/^\/ws/, ""),
          ws: true,
          rewriteWsOrigin: true,
        },
      },
    },
  },
});

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {
    server: {
      proxy: {
        "/ws": {
          target: "ws://localhost:8080",
          rewrite: (path) => path.replace(/^\/ws/, ""),
          ws: true,
          rewriteWsOrigin: true,
        },
      },
    },
  },
});

Now, the problem is that when trying to establish the ws connection it gets through to the server but gets closed immediately, so the console logs on the server would look like this

New client connected
Client disconnected

New client connected
Client disconnected

on the client it will take some time before eventually getting an error that the connection could not have been established.

I have also tried to recreate the same situation with SvelteKit but there it worked without any problem with the same setup (just edited vite.config directly).

I appreciate your help, thanks.

SolidJS•13mo ago•

29 replies

Zikado

SolidStart Websocket Proxy

const WebSocket = require("ws");

const PORT = 8080;
const wss = new WebSocket.Server({ port: PORT });

wss.on("connection", (ws) => {
  console.log("New client connected");

  ws.send("Hello");

  ws.on("message", (message) => {
    console.log(`Received: ${message}`);
  });

  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

const WebSocket = require("ws");

const PORT = 8080;
const wss = new WebSocket.Server({ port: PORT });

wss.on("connection", (ws) => {
  console.log("New client connected");

  ws.send("Hello");

  ws.on("message", (message) => {
    console.log(`Received: ${message}`);
  });

  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

then I have this very simple Websocket connection on the client

app.tsx

import { isServer } from "solid-js/web";

export default function App() {
  if (!isServer) {
    const connection = new WebSocket("ws://localhost:3000/ws");
    connection.onopen = () => {
      console.log("OPENED");
    };
    connection.onmessage = (e) => {
      console.log(JSON.stringify(e.data));
    };
  }
  return <main>Some content</main>;
}

import { isServer } from "solid-js/web";

export default function App() {
  if (!isServer) {
    const connection = new WebSocket("ws://localhost:3000/ws");
    connection.onopen = () => {
      console.log("OPENED");
    };
    connection.onmessage = (e) => {
      console.log(JSON.stringify(e.data));
    };
  }
  return <main>Some content</main>;
}

and here is the proxy

app.config.ts

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {
    server: {
      proxy: {
        "/ws": {
          target: "ws://localhost:8080",
          rewrite: (path) => path.replace(/^\/ws/, ""),
          ws: true,
          rewriteWsOrigin: true,
        },
      },
    },
  },
});

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {
    server: {
      proxy: {
        "/ws": {
          target: "ws://localhost:8080",
          rewrite: (path) => path.replace(/^\/ws/, ""),
          ws: true,
          rewriteWsOrigin: true,
        },
      },
    },
  },
});

Now, the problem is that when trying to establish the ws connection it gets through to the server but gets closed immediately, so the console logs on the server would look like this

New client connected
Client disconnected

New client connected
Client disconnected

SolidStart Websocket Proxy

SolidStart Websocket Proxy

Similar Threads

Similar Threads

Similar Threads