SDK quickstart
Instant messaging enhances user engagement by enabling users to connect and form a community within the app. Increased engagement can lead to increased user satisfaction and loyalty to your app. An instant messaging feature can also provide real-time support to users, allowing them to get help and answers to their questions quickly. The Chat SDK enables you to embed real-time messaging in any app, on any device, anywhere.
This page guides you through implementing peer-to-peer messaging into your app using the Chat SDK for Web.
Understand the tech
The following figure shows the workflow of sending and receiving peer-to-peer messages using Chat SDK.
- Clients retrieve an authentication token from your app server.
- Users log in to Chat using the app key, their user ID, and token.
- Clients send and receive messages through Chat as follows:
- Client A sends a message to Client B. The message is sent to Chat.
- The server delivers the message to Client B. When Client B receives a message, the SDK triggers an event.
- Client B listens for the event to read and display the message.
Prerequisites
In order to follow the procedure on this page, you must have:
-
A valid Agora account.
-
An Agora project for which you have enabled Chat.
-
The App Key for the project.
-
Internet access.
Ensure that no firewall is blocking your network communication.
- A Windows or macOS computer that meets the following requirements:
- A browser supported by the Agora Chat SDK:
- Internet Explorer 9 or later
- FireFox 10 or later
- Chrome 54 or later
- Safari 6 or later
- Access to the Internet. If your network has a firewall, follow the instructions in Firewall Requirements to access Agora services.
- A browser supported by the Agora Chat SDK:
- Node.js and npm
Project setup
To create the environment necessary to add peer-to-peer messaging into your app, do the following:
- For a new web project, create a new directory and name it
agora_quickstart
. Navigate to this directory in terminal and runnpm init
. This creates apackage.json
file. Then, create the following files:
index.html
, which sets the user interface of the Web appmain.js
, which contains the code for implementing the messaging logic
The project directory now has the following structure:
-
Integrate the Agora Chat SDK into your project through npm. Add 'agora-chat' and 'vite' to the 'package.json' file.
Implement peer-to-peer messaging
This section shows how to use the Chat SDK to implement peer-to-peer messaging in your app, step by step.
Create the UI
Copy the following code to the index.html
file to implement the UI.
<script type="module" src="/main.js"></script>
is used to refer to the main.js
file.
Implement the sending and receiving of messages
To enable your app to send and receive messages between individual users, do the following:
-
Import Chat SDK . Copy the following code to the
main.js
file:If you use typescript, use the following code:
-
Implement peer-to-peer messaging with the core methods provided by Chat SDK . Copy the following code and add them after the import function in the
main.js
file.
Test your implementation
To ensure that you have implemented Peer-to-Peer Messaging in your app:
Use vite to build the project. You can run below commands to run the project.
The following page opens in your browser:
To validate the peer-to-peer messaging you have just integrated into your Web app using Agora Chat:
-
Log in
Fill in the user ID of the sender (Leo
) in the user id box and agora token in the token box, and click Login to log in to the app. -
Send a message
Fill in the user ID of the receiver (Roy
) in the single chat id box and type in the message ("Hi, how are you doing?") to send in the message content box, and click Send to send the message. -
Log out
Click Logout to log out of the app. -
Receive the message
Open the same page in a new window, log in as the receiver (Roy
) and receive the message ("Hi, how are you doing?") sent from Leo.
Reference
This section contains content that completes the information in this page, or points you to documentation that explains other aspects to this product.
- For more code samples, see Samples and demos.
For details:
-
Manual install shows you how to integrate Chat SDK into your project manually.
-
Sample code for getting started with Chat.
-
Install the demo app.
Next steps
In a production environment, best practice is to deploy your own token server. Users retrieve a token from the token server to log in to Chat. To see how to implement a server that generates and serves tokens on request, see Secure authentication with tokens.