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

Channel: Defines the root Id you are tracking the changes of.
Action: A key in the payload that defines the kind of update.
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

Standards Node Tests