Cursor-chat integration with presencejs

Technology evolves daily, and the urge to implement innovative solutions to our existing problems increases. The innovative solutions solve the problem and increase our productivity and excellence. In this article, we will discuss such a technology that can revolutionize the art of collaborative working.

Without any further ado, let's start!

What is cursor-chat?

Cursor-chat is a live chat accompanied cursor on a web page that helps in real-time conversations with peers. We can create it within a concise amount of time with the help of a react component known as presencejs.

How does cursor-chat works?

We now live in a world where people always associate themselves with other people's companies. Still, people can't always communicate in real-time while doing several things in collaboration, such as shopping, designing, pair programming, etc. To mitigate this problem comes cursor-chat, which will allow you to chat with your peers with real-time streaming under your cursor.

You will chat with your peers in any collaborative space with cursor-chat. You can open the input box by pressing the / button and close it by pressing the ESC button. Also, with the help of cursor-chat, you will be able to see the location of your peers during any collaboration.

Now, you might be thinking, what is presencejs? Let's take a look at that.

What is Presencejs?

Presencejs is a javascript library developed by Yomo that helps build a real-time web application quickly. It also provides secure, low-latency, and high-performance geo-distributed services to deploy an application.

With the help of presencejs, you can make and deploy a cursor-chat within 3 minutes. In addition, the easy integration of the component with your project makes it dependable.

Integration of a cursor-chat

We will follow a few steps to complete the integration of cursor-chat with our project.

Getting started with a free dev account on presencejs

Firstly, to get initiated with the integration of cursor chat with a project, we must get a free developer test account with presencejs. You will be asked to log in with your GitHub account (If you don't have a GitHub account, get one by clicking here). Authorize your account and get an App ID and an App Secret Key. It will look something like this:

Then, create a file with the name .env.local and store the App ID and Secret key. The contents of the file should be similar to the one shown below:

App_ID = demo_ID
App_Secret_Key = demo_secret_key

Note – Replace the demo_ID and demo_secret_key with the App_ID and App_Secret_Key that you will get from your presencejs console.

Creating a React application

We will create a simple single-page react application as our project for this tutorial. Before getting started with the creation, you have to download and install node.js in your local machine. You can download node.js from the offcial website depending on your operating system.

After downloading, open your terminal and run the following command:

npx create-react-app <app_name>

Replace <app_name> with the name of your application. This command will create a sample react application.

Integrating with your application

After saving the environment file, find the index.js file of your project and add the following code block within the import section of the file:

import CursorChat from '@yomo/react-cursor-chat';
import '@yomo/react-cursor-chat/dist/hairy-green.css';

After that, add the following code block in the body:

const App = () => {
    return (
        <div className="main">
            <img className="logo" src={logo} alt="logo" />
            <p className="tips">
                Press <span>/</span> to bring up the input box <br /> Press{' '}
                <span>ESC</span> to close the input box
            </p>
            <CursorChat
                presenceURL="https://prsc.yomo.dev"
                presenceAuthEndpoint="/api/auth"
                avatar="https://cursor-chat-example.vercel.app/_next/image?url=%2Flogo.png&w=256&q=75"
            />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

If you want to add a feature that will show you the latency rate of the cursor, then you can add the following code inside the <CursorChat..../> section of the above code:

showLatency={true}

Styling the cursor-chat

You can style the cursor-chat with several themes. If the colour of the cursor-chat gets a similar as that of your application background, then it will be a bit difficult for users to understand and will lead to confusion.

There are two built-in styles within the @yomo/react-cursor-chat component, such as apricot-yellow and hairy-green.

If you want to import the apricot-yellow style, then add the following code in the import section of the index.js file:

import '@yomo/react-cursor-chat/dist/hairy-green.css';

The cursor styling for the above style will look like the below picture.

If you want to import the apricot-yellow style, then add the following code in your file:

import '@yomo/react-cursor-chat/dist/apricot-yellow.css;

You can see this styling in the picture below:

Moreover, if you want to add custom background colours with CSS, you can do that by overriding online-cursor-wrapper__tail-box and adding the following code in the .css file of your project:

/* The css file in your project */
.online-cursor-wrapper__tail-box {
    background-color: #fe6ded; /* Your preferred background color */
}

Note - You can change the background colour by putting a colour code of your choice.

Adding the API authentication file

For the next step, create a folder named API, or if you already have one, you don't have to create one. Inside the folder, create a file and name it auth.js.

Add the following code block inside the newly created file:

export default async function handler(req, res) {
    if (req.method === 'GET') {
        try {
            const response = await fetch('https://prsc.yomo.dev/api/v1/auth', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    app_id: process.env.APP_ID,
                    app_secret: process.env.APP_SECRET,
                }),
            });
            const data = await response.json();
            const token = data.data;
            if (token) {
                res.status(200).json(token);
            } else {
                res.status(400).json({ msg: data.message });
            }
        } catch (error) {
            if (typeof error === 'string') {
                res.status(500).json({ msg: error });
            } else if (error instanceof Error) {
                res.status(500).json({ msg: error.message });
            }
        }
    } else {
        // Handle any other HTTP method
    }
}

Running the application

The last and final step is to run the application in a deployed state or in a localhost. If you want to run the application, go to the application source folder by running the below command:

cd <app_name>

After entering the directory, run the following command:

npm run dev

The command will run the application in a development server in localhost. You will be automatically directed to the server url, or you can access it through http://localhost:3000/.

Conclusion

With this article, we have learned what cursor-chat is and how we can integrate it with the help of presencejs into our project through a guided tutorial. Hopefully, the technology and the usage seemed interesting and you are craving to try it out. Get your hands dirty and play around with it in your newly built or prospective project. I will see you all in the next one. Happy learning!