Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SvelteKit Websocket doesn't work #18191

Open
lts20050703 opened this issue Mar 14, 2025 · 3 comments
Open

SvelteKit Websocket doesn't work #18191

lts20050703 opened this issue Mar 14, 2025 · 3 comments
Labels
bug Something isn't working web:websocket

Comments

@lts20050703
Copy link

lts20050703 commented Mar 14, 2025

What version of Bun is running?

1.2.5

What platform is your computer?

Linux 6.11.0-19-generic x86_64 x86_64

What steps can reproduce the bug?

  1. Create a new SvelteKit project with bunx sv create
  2. Remove the default packages
    bun remove @sveltejs/kit @sveltejs/adapter-auto
  3. Install the SvelteKit Websocket PR feat: native support for Websocket packages
    bun add -D https://pkg.pr.new/sveltejs/kit/@sveltejs/kit@1998d7b6de1c8e3e67a52d9f387a64d3683f5045
    bun add -D https://pkg.pr.new/sveltejs/kit/@sveltejs/adapter-node@1998d7b6de1c8e3e67a52d9f387a64d3683f5045
  4. Update svelte.config.js to use @sveltejs/adapter-node
// svelte.config.js
- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-node';
  1. Create a folder named ws in src/routes
  2. Create a file named +server.js in src/routes/ws/ with the following content
// src/routes/ws/+server.js
/** @type {import('@sveltejs/kit').Socket} **/
export const socket = {
	upgrade(req) {
		console.log('upgrade');
	},

	open(peer) {
		console.log('open');
	},

	message(peer, message) {
		console.log('message', message);
	},

	close(peer, event) {
		console.log('close');
	},

	error(peer, error) {
		console.log('error');
	}
};
  1. Edit src/routes/+page.svelte to be the following
<!-- src/routes/+page.svelte -->
<script>
	import { onMount } from 'svelte';
	onMount(() => {
		// To connect to src/routes/ws/+server.js
		const socket = new WebSocket(`/ws`);
		socket.addEventListener("open", (event) => {
			console.log("WebSocket opened!")
			socket.send("Hello Server!");
		});
		socket.addEventListener("close", (event) => {
			console.log("WebSocket closed!", event)
		})
	});
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
  1. Run the dev server: bunx run dev or bunx vite dev
  2. Visit localhost:5173

What is the expected behavior?

✅ The server upgrade and connected successfully (logs "upgrade" and "open" to the terminal)
✅ The server receive the "Hello server!" message from the client (logs "Message: Hello server!" to the terminal)
✅ The client successfully connect to the WebSocket server (logs "WebSocket opened!" to the console)

What do you see instead?

✅ The server upgrade and connected successfully (logs "upgrade", "open" to the terminal)
❌ The server did not receive the "Hello server!" message from the client
❌ The client timeout and emit a close event after a while (nothing is logged, after a while, "WebSocket closed!" is logged to the console)

Additional information

I am aware that there is svelte-adapter-bun, but the last update was made 5 months ago.

The problem with svelte-adapter-bun is that WebSocket only work for production build, not dev server, whereas the SvelteKit WebSocket PR works with @sveltejs/adapter-node and node both in production build and dev server.

This issue mentions that Bun is "heading in the direction of high node compatability", and mentions that the sveltekit Deno adapter has been deprecated. That's why I want to check if using the SvelteKit Websocket PR with @sveltejs/adapter-node with Bun works.

@lts20050703 lts20050703 added bug Something isn't working needs triage labels Mar 14, 2025
@nerg4l
Copy link

nerg4l commented Mar 14, 2025

Interestingly, I don't experience the same when I follow the provided instructions.

Logs on the server:

upgrade
open
message { data: <Buffer 48 65 6c 6c 6f 20 53 65 72 76 65 72 21> }

On the browser

Hello Server! | 13 | 10:25:13.111

@lts20050703
Copy link
Author

lts20050703 commented Mar 15, 2025

@nerg4l Interesting...
May I ask what OS are you using? In my case, I'm using KDE Neon 6.3 (Based on Ubuntu 24.04 Noble Numbat)

I also tested both Zen (Firefox-based) and Brave Browser (Chromium-based) and both doesn't work...

More info
  System:
    OS: Linux 6.11 KDE neon 6.3 6.3
    CPU: (12) x64 AMD Ryzen 5 7640U w/ Radeon 760M Graphics
    Memory: 13.99 GB / 27.21 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    bun: 1.2.5 - /tmp/bun-node-013fdddc6/bun
  Browsers:
    Brave Browser: 134.1.76.74
"@sveltejs/adapter-node": "https://pkg.pr.new/sveltejs/kit/@sveltejs/adapter-node@1998d7b6de1c8e3e67a52d9f387a64d3683f5045",
"@sveltejs/kit": "https://pkg.pr.new/sveltejs/kit/@sveltejs/kit@1998d7b6de1c8e3e67a52d9f387a64d3683f5045",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"svelte": "^5.23.0",
"svelte-check": "^4.1.5",
"typescript": "^5.8.2",
"vite": "^6.2.2"

@nerg4l
Copy link

nerg4l commented Mar 15, 2025

macOS 15.3

$ uname -a
Darwin xxx 24.3.0 Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:16 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6000 arm64

I tested with Firefox Developer Edition 137.0b4 and Google Chrome 134.0.6998.89.
The bun binary shows version 1.2.5.

"@sveltejs/adapter-node": "https://pkg.pr.new/sveltejs/kit/@sveltejs/adapter-node@1998d7b6de1c8e3e67a52d9f387a64d3683f5045",
"@sveltejs/kit": "https://pkg.pr.new/sveltejs/kit/@sveltejs/kit@1998d7b6de1c8e3e67a52d9f387a64d3683f5045",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^6.0.0"

I hope this helps. Feel free to ask if you need anything else or if I should test something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working web:websocket
Projects
None yet
Development

No branches or pull requests

3 participants