Integrating Push Chat
Overview about Push Chat SDK
Integrating Push Chat for any functionality is extremely easy. The Push Chat SDK is divided into the following functionalities:
This guide provides high-level knowledge about function calls and what they do, to dive into code @pushprotocol/restapiâ
ð
Push Chat API is in alpha, please bookmark this page for the new APIs introduction.
For an overview of Push Chat, please go to https://docs.push.org/developers/concepts/push-chat-for-web3.
npm
yarn
npm install @pushprotocol/[email protected] [email protected]^5.6
yarn add @pushprotocol/[email protected] [email protected]^5.6
Each User of Push Chat has a PGP key that is created locally and stored encrypted on Push nodes.
You are required to get the PGP key and decrypt it locally, for which you can use the following SDK functions.
This function will create a new user and return the created userâs information, like the PGP keys. It takes as arguments the address of the wallet and the environment variable.
This function will return all the user information, like the PGP keys. It takes as arguments the address of the wallet and the environment variable.
All chats for a user or all chats request for a user can be fetched in a paginated fashion using the following SDK functions:
This function returns all the latest chats from each address the caller is talking to. Itâs used to build the inbox on a chat application for an address.
This function returns all the requests that wallet addresses sent to a particular address. In Push Chat, the receiver of the messages must always approve the request to start the chat with the other address.
Each conversation between the users or group of users have a conversation hash which is a linked list that contains the encrypted chat messages stored on IPFS. The SDK does the work of fetching, decrypting, and verifying the signature for the messages.
This function returns the conversation hash of the latest message exchanged between the user and the conversation.
This function takes as an argument the conversation hash from a message and then returns the message content decrypted.
This function takes in an argument as the conversation hash from a message and the pagination and then returns the message content decrypted.
The Replying chats require the user to approve the request if it's their first time and then interact normally via the send rest API call.
Use this function to send messages to other addresses.
When receiving a Request, call this function to approve the request so you can start talking back to the address.
Group chats enable multiple wallet to talk to each other for the first time and provide a number of features (Public, Private, Token Gated, NFT Gated, Transaction Gated, Message Gated) for developers to integrate/build on their dApp.
Each group has a chat id associated with them. The chat id is used to do modifications to a group or send messages or approve a group chat request.
Use this function to create group chat between multiple wallets.
Use this function to modify a group name, description, members, etc.
To get info of the group including the chat id which is used to send messages in that group.
To get info of the group including by providing chat id of the group.
To learn more about the API params and how to call the Restful API, please check @pushprotocol/restapiand @pushprotocol/socketâ
ð
ð
npm
yarn
npm install @pushprotocol/socket ethers
yarn add @pushprotocol/socket ethers
import {
createSocketConnection,
EVENTS
} from '@pushprotocol/socket';
To create a socket connection and retain the variable.
const pushSDKSocket = createSocketConnection({
user: 'eip155:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb',
env: 'staging',
socketType: 'chat',
socketOptions: { autoConnect: true, reconnectionAttempts: 3 }
});
- EVENTS.CONNECT - Whenever the socket is connected
- EVENTS.DISCONNECT - Whenever the socket is connected
- EVENTS.CHAT_RECEIVED_MESSAGE - Whenever the user recieves a message or chat requests
Sample Code
pushSDKSocket.on(EVENTS.CONNECT, () => {
â
});
â
pushSDKSocket.on(EVENTS.DISCONNECT, () => {
â
});
â
pushSDKSocket.on(EVENT.CHAT_RECEIVED_MESSAGE, (message) => {
// message is the message object data whenever a new message is received
});
A React component for integrating support chat in DApps.
Installation:
yarn add @pushprotocol/[email protected]
or
npm install @pushprotocol/[email protected]
Note:
styled-components and @pushprotocol/[email protected] are peerDependencies. Please install them in your dApp if you don't have them already!npm
yarn
npm install styled-components
npm install @pushprotocol/[email protected]
yarn add styled-components
yarn add @pushprotocol/[email protected]
1
import { Chat } from "@pushprotocol/uiweb";
2
â
3
<Chat
4
account="0x6430C47973FA053fc8F055e7935EC6C2271D5174" //user address
5
supportAddress="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d" //support address
6
/>