Links

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
Web sockets for Push Chat are live now
👉
@pushprotocol/socket
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.

Rest API Calls

Installation

npm
yarn
npm install @pushprotocol/[email protected] [email protected]^5.6
yarn add @pushprotocol/[email protected] [email protected]^5.6

Get User Information

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.
To create the User (sdk.user.create)
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.
Read in detail 👉 Initializing User
To get the User (sdk.user.get)
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.
Read in detail 👉 Initializing User

Fetching Chats for a User

All chats for a user or all chats request for a user can be fetched in a paginated fashion using the following SDK functions:
To Fetch a list of all chats of a User (sdk.chat.chats)
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.
Read in detail 👉 Fetching Chats
To Fetch a list of all chats request of a User (sdk.chat.requests)
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.
Read in detail 👉 Fetching Chats

Fetching individual messages in a specific Chat

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.
Getting conversation hash of a single chat or group (sdk.chat.conversationHash)
This function returns the conversation hash of the latest message exchanged between the user and the conversation.
Read in detail 👉 Fetching Chats
Getting just the latest message from a single chat or group (sdk.chat.latest)
This function takes as an argument the conversation hash from a message and then returns the message content decrypted.
Read in detail 👉 Fetching Chats
Getting the history of a single chat or group (sdk.chat.history)
This function takes in an argument as the conversation hash from a message and the pagination and then returns the message content decrypted.
Read in detail 👉 Fetching Chats

Replying to Chats

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.
To chat with a user or group (sdk.chat.send)
Use this function to send messages to other addresses.
Read in detail 👉 Sending Chat
To approve a chat request of user or group (only required for first time) (sdk.chat.approve)
When receiving a Request, call this function to approve the request so you can start talking back to the address.
Read in detail 👉 Sending Chat

For Group Chat

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.
To create a group (sdk.chat.createGroup)
Use this function to create group chat between multiple wallets.
Read in detail 👉 Group Chat
To modify a group (sdk.chat.updateGroup)
Use this function to modify a group name, description, members, etc.
Read in detail 👉 Group Chat
To fetch a group by group name (sdk.chat.getGroupByName)
To get info of the group including the chat id which is used to send messages in that group.
Read in detail 👉 Group Chat
To fetch a group by chat id (sdk.chat.getGroup)
To get info of the group including by providing chat id of the group.
Read in detail 👉 Group Chat
To learn more about the API params and how to call the Restful API, please check
👉
@pushprotocol/restapiand
👉
@pushprotocol/socket

Socket API Calls

Installation

npm
yarn
npm install @pushprotocol/socket ethers
yarn add @pushprotocol/socket ethers

Import

import {
createSocketConnection,
EVENTS
} from '@pushprotocol/socket';

Creating a socket connection object

To create a socket connection (createSocketConnection)
To create a socket connection and retain the variable.
const pushSDKSocket = createSocketConnection({
user: 'eip155:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb',
env: 'staging',
socketType: 'chat',
socketOptions: { autoConnect: true, reconnectionAttempts: 3 }
});

Connect and Disconnect

To connect the socket (pushSDKSocket.connect())
Establishes a socket connection to stream all incoming chat requests, messages, etc.
To disconnect the socket (pushSDKSocket.connect())
Disconnects the socket connection.

Subscribing to Socket Events

To subscribe to and react to socket events (pushSDKSocket.on)
  • 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
});

Push Support Chat

A React component for integrating support chat in DApps.

How to use it in your app?

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]

Support Chat component Usage

1
import { Chat } from "@pushprotocol/uiweb";
2
3
<Chat
4
account="0x6430C47973FA053fc8F055e7935EC6C2271D5174" //user address
5
supportAddress="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d" //support address
6
/>