Socket
Socket
Sign inDemoInstall

@pushprotocol/socket

Package Overview
Dependencies
3
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pushprotocol/socket


Version published
Maintainers
1
Created

Readme

Source

socket

This package gives access to Push Protocol (Push Nodes) using Websockets built on top of Socket.IO. Visit Developer Docs or Push.org to learn more.

Index

How to use in your app?

Installation

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

or

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

Import SDK

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

About blockchain agnostic address format

In any of the below methods (unless explicitly stated otherwise) we accept either -

  • CAIP format: for any on chain addresses We strongly recommend using this address format. Learn more about the format and examples. (Example : eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb)

  • ETH address format: only for backwards compatibility. (Example: 0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb)

Chat blockchain agnostic address format

Note - For chat related apis, the address is in the format: eip155:<address> instead of eip155:<chainId>:<address>, we call this format Partial CAIP (Example : eip155:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb)

Socket SDK Features

Creating a socket connection object

For notification

const pushSDKSocket = createSocketConnection({
  user: 'eip155:11155111:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb', // CAIP, see below
  env: 'staging',
  socketOptions: { autoConnect: false }
});

For chat

const pushSDKSocket = createSocketConnection({
    user: 'eip155:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb',
    env: 'staging',
    socketType: 'chat',
    socketOptions: { autoConnect: true, reconnectionAttempts: 3 }
});

IMPORTANT: create the connection object in your app only when you have the user address available since its mandatory.

autoConnect: Generally if we don't pass autoConnect: false then the socket connection is automatic once the object is created. Now since we may or may not have the account address handy and wish to start the connection during instantiation so this option makes it easier for us to choose when we want to connect or not!

Allowed Options (params with * are mandatory)

ParamTypeDefaultRemarks
user*string-user account address (CAIP)
envstring'prod'API env - 'prod', 'staging', 'dev'
socketType'notification' | 'chat''notification'socket type
socketOptionsobject-supports the same as SocketIO Options

Connect the socket connection object

pushSDKSocket.connect();

Disconnect the socket connection object

pushSDKSocket.disconnect();

Subscribing to Socket Events

pushSDKSocket.on(EVENTS.CONNECT, () => {

});

pushSDKSocket.on(EVENTS.DISCONNECT, () => {

});

pushSDKSocket.on(EVENTS.USER_FEEDS, (feedItem) => {
  // feedItem is the notification data when that notification was received
});

pushSDKSocket.on(EVENT.CHAT_RECEIVED_MESSAGE, (message) => {
  // message is the message object data whenever a new message is received
});

pushSDKSocket.on(EVENT.CHAT_GROUPS, (message) => {
  // message is the message object data whenever a group is created or updated
});

Supported EVENTS

EVENT nameWhen is it triggered?
EVENTS.CONNECTwhenever the socket is connected
EVENTS.DISCONNECTwhenever the socket is disconneted
EVENTS.USER_FEEDSwhenever a new notification is received by the user after the last socket connection
EVENTS.USER_SPAM_FEEDSwhenever a new spam notification is received by the user after the last socket connection
EVENT.CHAT_RECEIVED_MESSAGEwhenever a new message is received
EVENT.CHAT_GROUPSwhenever a group is created or updated

Examples

Basic example of using SDK sockets in a React App

import { useState, useEffect } from "react";
import { createSocketConnection, EVENTS } from '@pushprotocol/socket';

const user = '0xD8634C39BBFd4033c0d3289C4515275102423681';
const chainId = 11155111;

const userCAIP = `eip155:${chainId}:${user}`;

function App() {
  const [sdkSocket, setSDKSocket] = useState<any>(null);
  const [isConnected, setIsConnected] = useState(sdkSocket?.connected);

  const addSocketEvents = () => {
    sdkSocket?.on(EVENTS.CONNECT, () => {
      setIsConnected(true);
    })

    sdkSocket?.on(EVENTS.DISCONNECT, () => {
      setIsConnected(false);
    })

    sdkSocket?.on(EVENTS.USER_FEEDS, (feedItem) => {
      /**
       * "feedItem" is the latest notification received
       */
      console.log(feedItem);
    })
  };

  const removeSocketEvents = () => {
    sdkSocket?.off(EVENTS.CONNECT);
    sdkSocket?.off(EVENTS.DISCONNECT);
  };

  const toggleConnection = () => {
    if (sdkSocket?.connected) {
      sdkSocket.disconnect();
    } else {
      sdkSocket.connect();
    }
  };


  useEffect(() => {
    if (sdkSocket) {
      addSocketEvents();
    }
    return () => {
      removeSocketEvents();
    };
  }, [sdkSocket]);

  useEffect(() => {
    const connectionObject = createSocketConnection({
      user: userCAIP,
      env: 'dev',
      socketOptions: { autoConnect: false }
    });


    setSDKSocket(connectionObject);

    return () => {
      if (sdkSocket) {
        sdkSocket.disconnect();
      }
    };
  }, []);

  return (
    <div>
      <h1>Socket Hello World</h1>

      <div>
        <p>Connection Status : {JSON.stringify(isConnected)}</p>

        <button onClick={toggleConnection}>{isConnected ? 'disconnect' : 'connect'}</button>
      </div>
    </div>
  );
}

export default App;

Please note connecting with sockets and maintaining the state of the connection object in your DAPP might have a different setup like first getting the user account and chainId and then connecting with socket. You can use React Context for state management.

FAQs

Last updated on 15 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc