Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yomorun/presencejs
Edge Infra for realtime web applications, geo-distributed architecture.
https://github.com/yomorun/presencejs
presencejs realtime realtime-collaboration websocket webtransport
Last synced: 3 months ago
JSON representation
Edge Infra for realtime web applications, geo-distributed architecture.
- Host: GitHub
- URL: https://github.com/yomorun/presencejs
- Owner: yomorun
- Created: 2023-09-20T01:14:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-10T01:47:12.000Z (about 1 year ago)
- Last Synced: 2024-10-29T16:21:25.166Z (4 months ago)
- Topics: presencejs, realtime, realtime-collaboration, websocket, webtransport
- Language: Go
- Homepage: https://presence.js.org
- Size: 273 KB
- Stars: 15
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README-original.md
- Funding: .github/FUNDING.yml
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
## 🧬 Introduction
`Presencejs` is a JavaScript library that enables the creation of real-time web
applications with a secure, low-latency, and high-performance geo-distributed
architecture.
Key Features:
- **Geo-distributed Architecture**: Deploy your real-time backend close to users
all over the world for better performance.
- **WebTransport Support**: WebTransport is an new API that offers low-latency,
bidirectional, client-server messaging.
- **Secure**, **low-latency**, and **high-performance**: PresenceJS prioritizes
security, speed, and performance for a seamless user experience.
- **Real-time and collaborative experience**: With PresenceJS, components
receive data flow in real time, ensuring fast and reactive UI by offering the
flexibility to send either unreliable or reliable data
- **Easy to use**: PresenceJS is simple to implement, making it an accessible
solution for developers.
- **Free for self-managed hosting**: PresenceJS is free to use for self-managed
hosting, making it an affordable choice for projects of any size.
## 🌟 Showcase
These React Serverless Components are built with `presencejs`:
### 👯♀️ GroupHug
> Live collaborator avatars for multiplayer web apps
- [Preview](https://allegrocloud.io/preview/clewfjysp0008osvwuina6qnf)
- Source code: [./components/react/grouphug-react](./components/react/group-hug)
## 🥷🏼 Quick Start
### 1. Add `presencejs` to your web app
Using npm
```
$ npm i --save @yomo/presence
```
Using yarn
```
$ yarn add @yomo/presence
```
Using pnpm
```
$ pnpm i @yomo/presence
```
#### Create a `Presence` instance
```js
import createPresence from "@yomo/presence";
// create an instance.
const presencePromise = createPresence("https://prsc.yomo.dev", {
publicKey: process.env.NEXT_PUBLIC_PRESENCE_PUBLIC_KEY,
id,
debug: true,
});
presencePromise.then((presence) => {
console.log("Presence: ", presence);
});
// or
// (async () => {
// const presence = await presencePromise;
// })()
```
#### Create `Channel`
add subscribe to peers online event:
```js
const channel = presence.joinChannel('group-hug', myState);
// join multiple channels
// const channel2 = presence.joinChannel('live-cursor', myState);
// const channel3 = presence.joinChannel('cursor-chat', myState);
channel.subscribePeers((peers) => {
peers.forEach((peer) => {
console.log(peer + " is online")
}
});
```
#### Broadcast messages to all peers in this channel
```js
const cb = () => {
const state = document.hidden ? "away" : "online";
c.broadcast("hidden-state-change", { state });
};
document.addEventListener("visibilitychange", cb);
```
#### Subscribe messages from the other peers
```js
const unsubscribe = channel.subscribe(
"hidden-state-change",
({ payload, peerState }) => {
console.log(`${peerState.id} change visibility to: ${payload}`);
},
);
unsubscribe();
```
### 2. Start `prscd` backend service
see [prscd](./prscd)
## 🤹🏻♀️ API
See docs: https://presence.js.org
## 👩🏼🔬 Development
- frontend project: `bun install`
- `packages/presence`: `bun run build`
- `packages/group-hug-react`: `bun run build:js`
- local backend dev server: [see prscd](./prscd)
## 🏡 Self-managed hosting
Docs: https://presence.js.org
## License
The [MIT License](./LICENSE).