https://github.com/partykit/example-link-counter
https://github.com/partykit/example-link-counter
collaborative connections counter multiplayer presence reactions real-time realtime
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/partykit/example-link-counter
- Owner: partykit
- Created: 2023-09-12T16:10:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-15T09:56:33.000Z (about 2 years ago)
- Last Synced: 2025-02-04T11:06:14.347Z (about 1 year ago)
- Topics: collaborative, connections, counter, multiplayer, presence, reactions, real-time, realtime
- Language: TypeScript
- Homepage: https://example-reactions.jevakallio.partykit.dev/
- Size: 4.32 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🎈 connection-counter
This is a [Partykit](https://partykit.io) application, demonstrating an advanced use of [multi-party communication](https://docs.partykit.io/guides/using-multiple-parties-per-project/).
## Demo
The [demo](https://connection-counter.jevakallio.partykit.dev) is a website that shows how many people are currently viewing any of the pages linked from the the current page.
## Architecture
This example app consists of two PartyKit parties:
### counter.ts
- We create one global instance of this party for the whole application
- Keeps track of current connection counts for all pages in the app
- When [**page.ts**](#pagets) sends an `"update"` request to this party, it notifies each subscribed [**page.ts**](#pagets) party instance of the latest update count
- Communicates with the [**page.ts**](#pagets) party via HTTP POST messages
### page.ts
- We create a room for each unique page id within the site
- When a user sends a `"subscribe"` WebSocket message with a list of linked page ids, sends a message to the [**counter.ts**](#counterts) party to subscribe itself to updates
- When a user connects to this room via WebSockets, it notifies the **counter.ts** room of the current connection count
### Party-to-party communication
The below diagram shows the data flow between user, the [**page.ts**](#pagets) party, and the [**counter.ts**](#counterts) party.
### Storage
- [**counter.ts**](#counterts) persists state to party storage, and cleans inactive rooms once per hour.
- [**page.ts**](#pagets) persists state to party storage, and deletes its storage after one hour of inactivity.
### Further optimization opportunities
- [**page.ts**](#pagets) sends a subscription message on every connection, even when it's already subscribed. This is useful for when page links update, but causes unnecessary chattiness.