An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
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 integrate a cursor-chat with your 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_IDApp_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.
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. To do that, run the following command:
npm run dev
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!
Original Link: https://dev.to/sayanta66/cursor-chat-integration-with-presencejs-3ejc
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To