Soketi is not working with Strapi and Next JS

[DezyNation]

Hey everyone!
I'm using NextJS (with pusher-js) on frontend and Strapi (pusher) on backend.
Strapi is based on KoaJS and earlier I was using Pusher to handle realtime events. Everything was working fine until I switched to Soketi.
My Soketi server is at soketi.krishnaconsciousnesssociety.com and it gives ok response when I hit this endpoint. I tested the connection with a few Websocket clients as well and the connection through them is happening smoothly (at wss://soketi.krishnaconsciousnesssociety.com/app/app-key)
But my neither my Strapi code is sending any realtime events nor my NextJS app is receiving any of them. Here are my code snippets:

Backend Code - Strapi

// pusher.js
"use strict";
const Pusher = require("pusher");

const pusher = new Pusher({
  host: process.env.PUSHER_BASE_URL,
  port: process.env.PUSHER_PORT,
  appId: process.env.PUSHER_APP_ID,
  key: process.env.PUSHER_APP_KEY,
  secret: process.env.PUSHER_SECRET_KEY,
  useTLS: true,
});

module.exports = pusher;

// Sessions Controller

"use strict";
const { default: pusher } = require("../../../../helpers/pusher");

...
await pusher.trigger(`session-${sessionId}`, "sessionUpdate", {
        data: data,
        status: result?.status,
      }).then(res =>{
        console.log("Sent pusher event sessionUpdate")
        console.log(res)
      }).catch(err =>{
        console.log("Err sending pusher event sessionUpdate")
        console.log(err)
      });
...

Please Note: All the variables used (like sessionId, result etc.) are properly defined.

My Frontend Code - NextJS

// pusher.js
import Pusher from "pusher-js";
const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, {
    wsHost: process.env.NEXT_PUBLIC_PUSHER_BASE_URL,
    wsPort: 443,
    wssPort: 443,
    forceTLS: true,
    enabledTransports: ['wss', 'ws'],
    cluster: 'ap2'
    
});
export default pusher

// sessions>join/[id]/page.jsx

useEffect(() => {
    if (!sessionInfo?.id) return;
    const channel = pusher.subscribe(`session-${sessionInfo?.id}`);
    channel.bind("sessionUpdate", ({ data, status }) => {
      if (status == "ended") {
        Toast({
          title: "The session has ended.",
          description: "Let's meet again soon!",
        });
        setTimeout(() => {
          window.location?.replace(`/dashboard?active_side_item=dashboard`);
        }, 1000);
      } else {
        console.log(data);
        setSessionInfo((prev) => ({
          ...prev,
          ...(typeof data?.qnaStatus == "boolean" && {
            qnaStatus: data?.qnaStatus,
          }),
          ...(typeof data?.audioStatus == "boolean" && {
            audioStatus: data?.audioStatus,
          }),
          ...(typeof data?.videoStatus == "boolean" && {
            videoStatus: data?.videoStatus,
          }),
          ...(typeof data?.donationStatus == "boolean" && {
            donationStatus: data?.donationStatus,
          }),
        }));
      }
    });

    return () => {
      channel.unbind("sessionUpdate");
      pusher.unsubscribe(`session-${sessionInfo?.id}`);
    };
  }, [sessionInfo]);

Please let me know what am I doing wrong here?

[DezyNation]

Okay so I figured out... Strapi wasn't recognising my helpers folder and that's why I was receiving error saying pusher is undefined. I put my entire pusher.js code inside the config folder and it started working!
Anyone who faces similar issues, can reach out to me. I'll be glad to help.