https://github.com/lilnasy/multiplayer-globe
Display website visitor locations in real-time using Cloudflare Pages and Valkey.
https://github.com/lilnasy/multiplayer-globe
astro cloudflare cobe realtime svelte websocket workers
Last synced: 22 days ago
JSON representation
Display website visitor locations in real-time using Cloudflare Pages and Valkey.
- Host: GitHub
- URL: https://github.com/lilnasy/multiplayer-globe
- Owner: lilnasy
- Created: 2025-01-29T04:51:39.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-01-31T15:42:38.000Z (3 months ago)
- Last Synced: 2025-04-14T23:14:22.934Z (22 days ago)
- Topics: astro, cloudflare, cobe, realtime, svelte, websocket, workers
- Language: TypeScript
- Homepage: https://multiplayer-globe.pages.dev/
- Size: 126 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Multiplayer Globe App with Astro
Display website visitor locations in real-time using Cloudflare and Redis.
See it live at multiplayer-globe.pages.dev | Start hacking on it in a dev container
## Credits
Inspired by Cloudflare's multiplayer-globe-template and the NuxtHub implementation.
## Features
🪶**Lightweight**: production build ships just 16.7kb of JS, including the WebGL renderer, svelte runtime, and realtime communication.
## How it works
A `/visitors` websocket endpoint is created in the [src/pages/visitors.ts](./src/pages/visitors.ts) file.
The endpoint uses `locals.upgradeWebSocket()` provided by the `astro-cloudflare-websocket` adapter.
When the [app.svelte](./src/components/app.svelte) component is loaded on the browser, it connects to the `/visitors` websocket endpoint.
The endpoint uses the visitor location provided by Cloudflare and aggregates it in a ValKey (open source Redis) server.
Everytime a location is added or removed, the ValKey server broadcasts an event to all connected workers, acting as the single point of coordination.
Each worker then forwards the locations of currently connected visitors to its connected browser over the websocket connection.
## Setup
Make sure to install the dependencies with [pnpm](https://pnpm.io/installation#using-corepack):
```bash
pnpm install
```
Start a valkey server with the following command:
```bash
docker run --rm -p 6379:6379 valkey/valkey:8.0.2-alpine3.21
```
If the valkey server is not running on the same device as the development server, you can provide the options as the following variables in `.dev.vars` (see [Local Development with Secrets | Cloudflare Docs](https://developers.cloudflare.com/workers/configuration/secrets/#local-development-with-secrets)):
```bash
VALKEY_HOST=db.local
VALKEY_PORT=6379
VALKEY_USERNAME=multiplayer-app
VALKEY_PASSWORD=multiplayer_password
VALKEY_DB=0
```
See [Secrets on deployed Workers | Cloudflare Docs](https://developers.cloudflare.com/workers/configuration/secrets/#secrets-on-deployed-workers) for information on setting up secrets for the production environment.
## Development Server
Start the development server on `http://localhost:4321`:
```bash
pnpm dev
```
## Previewing Locally
The production code runs on Cloudflare's `workerd` runtime instead of Node.js. You can preview the website realistically with `wrangler` which can run the production build locally.
```bash
pnpm exec astro build
pnpm exec wrangler pages dev
```
## Deploying to Cloudflare Network
```bash
pnpm exec astro build
pnpm exec wrangler pages deploy
```