PresenceJS: The Simplest Way to Power Realtime Experience in My Collaborative Apps

As a frontend developer, I have been working on building collaborative apps, in which the realtime performance of multiplayer features is especially important. It needs to synchronize the state of users in less than 100ms between two users.

In this article, I would like to demonstrate how "presencejs" helped me to implement these multiplayer features within 2 hours. Furthermore, presencejs is totally open source, and also does well in security, low-latency, and geo-distributed deployment. Throughout my experience using this library, I have been impressed by its power and capabilities.

Therefore, I have decided to write this blog to introduce this excellent forward-looking JavaScript library to you. Presencejs is a JavaScript library that enables the creation of real-time multiplayer/ collaboration web applications that supporting WebTransport.

It provides many ready-made components like Cursor-Chat, Live-Cursor, Grouphug etc. Certainly, we can create more functional custom components using the basic functions and API of presencejs. Through the ready-made components, I created a nextjs real-time web application demo in minutes.

• Presencejs: https://github.com/yomorun/presencejs

• Demo: https://cursorchat-grouphug-demo.vercel.app/

  
  

How did I create this demo?

For this demo, I used the Presencejs library to create a real-time multi-user collaborative web application. I chose a simple but effective design for the demo. I opted for a clean and modern look with a subtle color scheme that wouldn't distract from the content. Presencejs provides several pre-built components such as Cursor Chat, Realtime Cursor, and Grouphug. I used these components along with some custom features to build this demo. Here's a brief overview of how I created it:

• First, I installed and imported the Presencejs library into my code.

npm install @yomo/cursor-chat-react
npm install @yomo/group-hug-react

import CursorChat from '@yomo/cursor-chat-react'; import GroupHug from '@yomo/group-hug-react';

• Next, I used the components provided by Presencejs to build my application. For this demo, I used Cursor-Chat, and Grouphug components.

  
  

// other code

import CursorChat from '@yomo/cursor-chat-react';
import GroupHug from '@yomo/group-hug-react';


export default function Home(){
// other code

return(

// other code

<CursorChat />
<Grouphug />

// other code

)
}

• Then, I added some custom features . I got a public_key from AllegroCloud.io and created a file .env in the main path. I entered the code below:

PUBLIC_KEY=****

And I saved this file, then ran the demo locally. Finally, I deployed my application online using Next.js so that others can access it.

Overall, creating a real-time web application using Presencejs is straightforward. Presencejs provides many pre-built components that allow developers to quickly build their own applications.

Additionally, Presencejs supports custom development, which allows advanced developers to create more complex features. I hope this demo inspires more developers to try using Presencejs to create their own real-time web applications.

The special benefits of presencejs

From my experience with it, presencejs has been particularly helpful to me in the following ways:

• The support to WebTransport makes presencejs show better performance than other collaboration js lib.
• Compatible with websocket
• Ready-made components and customized development.
• Geo-distributed architecture lets me build amazing and fast response web applications.
• Both serverless and self-hosting.

Benefits in detail:

• Support for WebTransport: Presencejs supports WebTransport, which is a newer real-time application protocol based on the QUIC protocol. It establishes reliable, secure, low-latency connections without requiring handshakes and negotiations like websocket. It also supports advanced features such as multiplexing and connection migration. This provides faster connection establishment speed, data transfer speed, and latency.

• Compatible with websocket: Presencejs also supports websocket. When the user's browser doesn't support WebTransport, presencejs will replace the communication protocol with websocket.

• Ready-made components and customized development: Presencejs provides ready-made components like grouphug, livecursor, and cursorchat, which allow real-time web applications. For advanced developers, the complete toolkit can be used to create custom components.

• Geo-distributed architecture backend: Presencejs is a serverless architecture framework using the YoMo framework for real-time data processing. This provides faster response speed, stable performance, and secure service.

• Both serverless and self-hosting: Presencejs supports self-hosting, which provides greater control over data and applications.

  
  

Final Notes and Thoughts

In conclusion, presencejs offers a variety of benefits that make it an excellent choice for developers looking to build real-time web applications. Its support for WebTransport and websocket protocols, ready-made components, customizable development, geo-distributed architecture, and serverless or self-hosting options provide developers with a versatile toolkit to create amazing applications.

By adopting presencejs, developers can ensure their applications have faster response times, greater stability, and improved security. Furthermore, as an open-source product, presencejs will continue to improve and evolve in the coming years. Overall, presencejs is a forward-thinking product that can meet the real-time needs of the web today and in the future.

As a developer experience personnel of AllegroCloud and a frontend developer, I am fully aware of the shortcomings of Presence. However, as an open-source product, Presence possesses a more robust vitality and a more transparent technological reserve. In the coming years, Presence will continue to be updated and iterated, providing even higher-quality services.