Skip to content
✨ Learn more about Convo Space & Omnid →
  • Docs
  • Convo API
  • WebSocket

WebSocket

Introduction

Websockets allow you to subscribe to a threadId and receive updates for new messsages. Here is how you can add them to your application.

Manual Setup

Step 1 - Install Dependencies

yarn add ably

Step 2 - Setup your code

Let's create a file that'll have our React hook named Ably.js.

import Ably from "ably/promises";
import { useEffect } from 'react'
 
const ably = new Ably.Realtime.Promise({ authUrl: 'https://theconvo.space/api/getAblyAuth?apikey=apikey' });
 
export function useChannel(channelName, callbackOnMessage) {
    const channel = ably.channels.get(channelName);
 
    const onMount = () => {
        channel.subscribe(msg => { callbackOnMessage(msg); });
    }
 
    const onUnmount = () => {
        channel.unsubscribe();
    }
 
    const useEffectHook = () => {
        onMount();
        return () => { onUnmount(); };
    };
 
    useEffect(useEffectHook);
 
    return [channel, ably];
}

Step 3 - Subscribe to a Channel.

import { useChannel } from "@/hooks/Ably";
 
// the threadId you want to track.
const threadId = "KIGZUnR4RzXDFheXoOwo"
const [channel, ably] = useChannel(threadId, (newMessage) => {
    // Function called when a new message comes in.
    console.log(newMessage);
});

Using the SDK

Step 1 - Install & Setup the SDK

yarn add @theconvospace/react
import { subscribe } from "@theconvospace/react"

Read more details on installing and Setting up the SDK here

Step 2 - Use the subscribe React Hook.

Syntax,

const [channelDetails, ablyInstance] = subscribe('api-key','threadId', callback);

Example,

const [channelDetails, ablyInstance] = subscribe('CONVO', 'KIGZUnR4RzXDFheXoOwo', (newMessage)=>{
    alert('Got a new Message', newMessage.text);
});

Tracking Events

  1. Channel: Defines the root Id you are tracking the changes of.
  2. Action: A key in the payload that defines the kind of update.
  3. Data: The Payload data that is retured on the WS Trigger.

New Comment

  • Channel: Thread Id
  • Action: commentCreate
  • Data: New Comment Data.

Update Comment

  • Channel: Thread Id
  • Action: commentUpdate
  • Data: Updated Comment Data.

Delete Comment

  • Channel: Thread Id
  • Action: commentDelete
  • Data: Deleted Comment Data.

Toggle Votes

  • Channel: Thread Id
  • Action: toggleUpvote, toggleDownvote
  • Data: Updated Comment Data (inc Vote Data).

Comments

Last updated on September 8, 2022