https://github.com/nuxt-hub/multiplayer-globe
Display website visitor locations in real-time using Nuxt and NuxtHub.
https://github.com/nuxt-hub/multiplayer-globe
cloudflare cobe durable-objects nuxt nuxthub realtime
Last synced: 2 months ago
JSON representation
Display website visitor locations in real-time using Nuxt and NuxtHub.
- Host: GitHub
- URL: https://github.com/nuxt-hub/multiplayer-globe
- Owner: nuxt-hub
- License: mit
- Created: 2025-01-28T18:31:07.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-04-14T23:16:04.000Z (6 months ago)
- Last Synced: 2025-04-14T23:26:32.976Z (6 months ago)
- Topics: cloudflare, cobe, durable-objects, nuxt, nuxthub, realtime
- Language: Vue
- Homepage: https://multiplayer-globe.nuxthub.workers.dev
- Size: 493 KB
- Stars: 64
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-nuxt - Multiplayer Globe App with Nuxt
README
# Multiplayer Globe App with Nuxt
Display website visitor locations in real-time using [Nuxt](https://nuxt.com) and [NuxtHub](https://hub.nuxt.com).
[https://multiplayer-globe.nuxthub.workers.dev](https://multiplayer-globe.nuxthub.workers.dev)
[](https://admin.hub.nuxt.com/new?template=multiplayer-globe)
## Credits
Inspired by Cloudflare's multiplayer-globe-template.
## Features
- Server-Side rendering on Cloudflare Workers
- ESLint setup
- Ready to add a database, blob and KV storage
- One click deploy on 275+ locations for free
## How it works
When the first request is made, the server store the user's location (latitude and longitude) using the [`useState`](https://nuxt.com/docs/api/composables/use-state) composable in the [`app/plugins/location.server.ts`](./app/plugins/location.server.ts) file.
A `/ws/visitors` websocket endpoint is created in the [`server/routes/ws/visitors.ts`](./server/routes/ws/visitors.ts) file using the [`defineWebSocketHandler`](https://nitro.build/guide/websocket) function.
When the [`index.vue` page](./app/pages/index.vue) is mounted on client-side, it connects to the `/ws/visitors` websocket endpoint with its location as query parameters to the server.
The websocket endpoints send back the user locations to the client-side.
## Setup
Make sure to install the dependencies with [pnpm](https://pnpm.io/installation#using-corepack):
```bash
pnpm install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
pnpm dev
```
> [!TIP]
> A random location is generated in development as we don't have access to Cloudflare's geolocation data on the incoming request.
## Production
Build the application for production:
```bash
pnpm build
```
## Deploy
Deploy with one command on your Cloudflare account with:
```bash
npx nuxthub deploy
```
Learn more on https://hub.nuxt.com