Display website visitor locations in real-time using Nuxt and NuxtHub.
https://multiplayer-globe.nuxthub.workers.dev
Inspired by Cloudflare's multiplayer-globe-template.
- 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
When the first request is made, the server store the user's location (latitude and longitude) using the useState composable in the app/plugins/location.server.ts file.
A /ws/visitors websocket endpoint is created in the server/routes/ws/visitors.ts file using the defineWebSocketHandler function.
When the index.vue page 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.
Make sure to install the dependencies with pnpm:
pnpm installStart the development server on http://localhost:3000:
pnpm devTip
A random location is generated in development as we don't have access to Cloudflare's geolocation data on the incoming request.
Build the application for production:
pnpm buildDeploy with one command on your Cloudflare account with:
npx nuxthub deployLearn more on https://hub.nuxt.com