DEV Community

murumuru
murumuru

Posted on

3

PresenceJS: The Simplest Way to Power Realtime Experience in My Collaborative Apps , From Current to The Future

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 that how "presencejs" help me to implement these multiplayer features within 2 hours. Furthermore, presencejs is totally open source, and also does well in security, low-latency, 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.

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
Enter fullscreen mode Exit fullscreen mode

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

)
}
Enter fullscreen mode Exit fullscreen mode
  • - 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=****

Enter fullscreen mode Exit fullscreen mode

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.

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay