Skip to content
This repository was archived by the owner on Nov 22, 2023. It is now read-only.

Latest commit

 

History

History
340 lines (207 loc) · 11.3 KB

integrating-push-chat.md

File metadata and controls

340 lines (207 loc) · 11.3 KB
description
Overview about Push Chat SDK

Integrating Push Chat

Integrating Push Chat for any functionality is extremely easy. The Push Chat SDK is divided into the following functionalities:

{% hint style="success" %} This guide provides high-level knowledge about function calls and what they do, to dive into code 👉 epnsproject-sdk-restapi {% endhint %}

{% hint style="success" %} Web sockets for Push Chat are live now 👉 pushprotocol-socket {% endhint %}

{% hint style="info" %} Push Chat API is in alpha, please bookmark this page for the new APIs introduction. {% endhint %}

For an overview of Push Chat, please go to https://docs.push.org/developers/concepts/push-chat-for-web3.

Rest API Calls

Installation

{% tabs %} {% tab title="npm" %}

npm install @pushprotocol/restapi@latest ethers@^5.6

{% endtab %}

{% tab title="yarn" %}

yarn add @pushprotocol/restapi@latest ethers@^5.6

{% endtab %} {% endtabs %}

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.md

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.md

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.md

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.md

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.md

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.md

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.md

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.md

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.md

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.

{% hint style="info" %} 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. {% endhint %}

To create a group (sdk.chat.createGroup)

Use this function to create group chat between multiple wallets.

Read in detail 👉 group-chat.md

To modify a group (sdk.chat.updateGroup)

Use this function to modify a group name, description, members, etc.

Read in detail 👉 group-chat.md

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.md

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.md

{% hint style="success" %} To learn more about the API params and how to call the Restful API, please check 👉 epnsproject-sdk-restapiand 👉 pushprotocol-socket {% endhint %}

Socket API Calls

Installation

{% tabs %} {% tab title="npm" %}

npm install @pushprotocol/socket ethers

{% endtab %}

{% tab title="yarn" %}

yarn add @pushprotocol/socket ethers

{% endtab %} {% endtabs %}

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 receives 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/uiweb@latest

or

npm install @pushprotocol/uiweb@latest

Note: styled-components and @pushprotocol/[email protected] are peerDependencies. Please install them in your dApp if you don't have them already!

{% tabs %} {% tab title="npm" %}

npm install styled-components 
npm install @pushprotocol/restapi@latest

{% endtab %}

{% tab title="yarn" %}

yarn add styled-components
yarn add @pushprotocol/restapi@latest

{% endtab %} {% endtabs %}

Support Chat component Usage

{% code overflow="wrap" lineNumbers="true" %}

import { Chat } from "@pushprotocol/uiweb";

<Chat 
    account="0x6430C47973FA053fc8F055e7935EC6C2271D5174" //user address             
    supportAddress="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d" //support address          
/>

{% endcode %}