{"id":24922974,"url":"https://github.com/lilnasy/multiplayer-globe","last_synced_at":"2025-04-14T23:14:33.067Z","repository":{"id":274763460,"uuid":"923929205","full_name":"lilnasy/multiplayer-globe","owner":"lilnasy","description":"Display website visitor locations in real-time using Cloudflare Pages and Valkey.","archived":false,"fork":false,"pushed_at":"2025-01-31T15:42:38.000Z","size":129,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T23:14:22.934Z","etag":null,"topics":["astro","cloudflare","cobe","realtime","svelte","websocket","workers"],"latest_commit_sha":null,"homepage":"https://multiplayer-globe.pages.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lilnasy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-29T04:51:39.000Z","updated_at":"2025-04-02T20:56:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"881b404c-5ed9-475c-99df-1e6505224c6d","html_url":"https://github.com/lilnasy/multiplayer-globe","commit_stats":null,"previous_names":["lilnasy/multiplayer-globe"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilnasy%2Fmultiplayer-globe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilnasy%2Fmultiplayer-globe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilnasy%2Fmultiplayer-globe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilnasy%2Fmultiplayer-globe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lilnasy","download_url":"https://codeload.github.com/lilnasy/multiplayer-globe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975330,"owners_count":21192210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","cloudflare","cobe","realtime","svelte","websocket","workers"],"created_at":"2025-02-02T11:34:14.426Z","updated_at":"2025-04-14T23:14:33.061Z","avatar_url":"https://github.com/lilnasy.png","language":"TypeScript","readme":"# Multiplayer Globe App with Astro\nDisplay website visitor locations in real-time using Cloudflare and Redis.\n\n\u003cp align=center\u003e\n  \u003ca href=\"https://multiplayer-globe.pages.dev\"\u003eSee it live at multiplayer-globe.pages.dev\u003c/a\u003e | \u003ca href=\"https://github.com/codespaces/new?skip_quickstart=true\u0026repo=923929205\u0026ref=main\u0026machine=premiumLinux\"\u003eStart hacking on it in a dev container\u003c/a\u003e\n\u003c/p\u003e\n\n![Screenshot](https://github.com/user-attachments/assets/501eb849-b6cc-459d-a243-38de64776463)\n\n## Credits\n\nInspired by \u003ca href=\"https://github.com/cloudflare/templates/tree/main/multiplayer-globe-template\"\u003eCloudflare's multiplayer-globe-template\u003c/a\u003e and the \u003ca href=\"https://github.com/nuxt-hub/multiplayer-globe\"\u003eNuxtHub implementation\u003c/a\u003e.\n\n## Features\n🪶**Lightweight**: production build ships just 16.7kb of JS, including the WebGL renderer, svelte runtime, and realtime communication.\n\n## How it works\nA `/visitors` websocket endpoint is created in the [src/pages/visitors.ts](./src/pages/visitors.ts) file.\nThe endpoint uses `locals.upgradeWebSocket()` provided by the `astro-cloudflare-websocket` adapter.\n\nWhen the [app.svelte](./src/components/app.svelte) component is loaded on the browser, it connects to the `/visitors` websocket endpoint.\nThe endpoint uses the visitor location provided by Cloudflare and aggregates it in a ValKey (open source Redis) server.\n\nEverytime a location is added or removed, the ValKey server broadcasts an event to all connected workers, acting as the single point of coordination.\nEach worker then forwards the locations of currently connected visitors to its connected browser over the websocket connection.\n\n## Setup\nMake sure to install the dependencies with [pnpm](https://pnpm.io/installation#using-corepack):\n```bash\npnpm install\n```\nStart a valkey server with the following command:\n```bash\ndocker run --rm -p 6379:6379 valkey/valkey:8.0.2-alpine3.21\n```\nIf 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)):\n```bash\nVALKEY_HOST=db.local\nVALKEY_PORT=6379\nVALKEY_USERNAME=multiplayer-app\nVALKEY_PASSWORD=multiplayer_password\nVALKEY_DB=0\n```\nSee [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.\n\n## Development Server\nStart the development server on `http://localhost:4321`:\n```bash\npnpm dev\n```\n\n## Previewing Locally\nThe 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.\n```bash\npnpm exec astro build\npnpm exec wrangler pages dev\n```\n\n## Deploying to Cloudflare Network\n```bash\npnpm exec astro build\npnpm exec wrangler pages deploy\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flilnasy%2Fmultiplayer-globe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flilnasy%2Fmultiplayer-globe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flilnasy%2Fmultiplayer-globe/lists"}