https://github.com/sandros94/nuxt-reactive-ws
A real-time demo showcasing WebSockets to reactively update multiple states across different browsers/devices.
https://github.com/sandros94/nuxt-reactive-ws
nuxt websocket
Last synced: 8 months ago
JSON representation
A real-time demo showcasing WebSockets to reactively update multiple states across different browsers/devices.
- Host: GitHub
- URL: https://github.com/sandros94/nuxt-reactive-ws
- Owner: sandros94
- Created: 2025-01-09T00:57:26.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-22T21:18:29.000Z (10 months ago)
- Last Synced: 2025-01-22T21:28:36.540Z (10 months ago)
- Topics: nuxt, websocket
- Language: TypeScript
- Homepage: https://reactive-ws.s94.dev
- Size: 684 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-nuxt - Nuxt Reactive WebSocket Demo
README
# Nuxt Reactive WebSocket Demo
A real-time cursor tracking demo built with Nuxt showcasing the ability to use WebSockets to reactively update multiple states across different browsers/devices.
### Features
- Basic user session management
- Connection status indicators
- Real-time cursor position tracking
- Toast notifications for user connections/disconnections
### Tech Stack
- Nuxt
- [`@sandros94/lab`](https://github.com/sandros94/lab) for WebSocket handling (using [`crossws`](https://github.com/unjs/crossws) under the hood)
- VueUse for mouse tracking and window size utilities
### Setup
```bash
# Install dependencies
pnpm install
# Run development server
pnpm run dev
```
### How it Works
1. Each client gets a unique ID and sends cursor positions to the server
2. Server broadcasts cursor positions to all connected clients
3. Clients render cursor positions relative to their viewport
### Dependencies
Built ontop of my own [`@sandros94/lab`](https://github.com/sandros94/lab) Nuxt module for WebSocket functionality (`useWS` composable and `useWebSocketHandler` utility).