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.
These React Serverless Components are built with presencejs
:
Live collaborator avatars for multiplayer web apps
- Preview
- Source code: ./components/react/grouphug-react
Using npm
$ npm i --save @yomo/presence
Using yarn
$ yarn add @yomo/presence
Using pnpm
$ pnpm i @yomo/presence
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;
// })()
add subscribe to peers online event:
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")
}
});
const cb = () => {
const state = document.hidden ? 'away' : 'online';
c.broadcast('hidden-state-change', { state });
};
document.addEventListener('visibilitychange', cb)
const unsubscribe = channel.subscribe(
'hidden-state-change',
({ payload, peerState }) => {
console.log(`${peerState.id} change visibility to: ${payload}`)
})
unsubscribe()
see prscd
joinChannel
: return aChannel
object
subscribePeers
: observe peers online and offline events., return aunsubscribePeers
function.broadcast
: broadcast events to all other peers.subscribe
: observe events indicated, return aunsubscribe
function.leave
: leave from aChannel
.
- frontend project:
pnpm i
- local backend server: see prscd
Docs: https://presence.js.org
The MIT License.