https://github.com/ubermanu/sveltekit-websocket
A websocket implementation for SvelteKit
https://github.com/ubermanu/sveltekit-websocket
sveltekit websocket ws
Last synced: 5 months ago
JSON representation
A websocket implementation for SvelteKit
- Host: GitHub
- URL: https://github.com/ubermanu/sveltekit-websocket
- Owner: ubermanu
- Created: 2023-04-29T10:13:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-05T09:37:52.000Z (5 months ago)
- Last Synced: 2025-05-06T21:08:21.100Z (5 months ago)
- Topics: sveltekit, websocket, ws
- Language: JavaScript
- Homepage:
- Size: 205 KB
- Stars: 23
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @ubermanu/sveltekit-websocket
This is a small websocket plugin for SvelteKit. It uses [ws](https://github.com/websockets/ws) under the hood.
## Install
pnpm i @ubermanu/sveltekit-websocket -D
## Config
Use the patched `node-adapter` in `svelte.config.js`:
```js
import adapter from '@ubermanu/sveltekit-websocket'
const config = {
kit: {
adapter: adapter(),
},
}
export default config
```
Use the websocket dev server in `vite.config.js`:
```js
import { sveltekit } from '@sveltejs/kit/vite'
import { websocket } from '@ubermanu/sveltekit-websocket/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [sveltekit(), websocket()],
})
```
## Usage
Create your websocket handler in `src/hooks.server.js`:
```js
/** @type {import('@ubermanu/sveltekit-websocket').HandleWebsocket} */
export function handleWebsocket({ socket }) {
socket.on('message', () => {
socket.send('something')
})
}
```
Connect to the endpoint using any websocket client:
```svelte
import { browser } from '$app/environment'
import { page } from '$app/state'
const socket = browser ? new WebSocket(`ws://${page.url.host}`) : null
let connected = $state(false)
socket?.addEventListener('open', () => (connected = true))
socket?.addEventListener('close', () => (connected = false))
Websocket connection status: {connected ? '🟢' : '🔴'}
```