Albastru•2y ago

eventemitter not having any listeners on websocket

Hi, I have a app router project with TRPC but I created a websocket server alongside and a websocket client with the approuter and usecontext modified to work, the problem is that first of all (i don't know if this is normal) it says there are two connections when i load a page the next problem is that nothing gets emitted back from if i access a query diretly on my browser which is supposed to (as a test) send data back to the client. the problem in the WS is that there are two weird responses which i don't understand This is my code

import { EventEmitter } from "events";
import { initTRPC } from "@trpc/server";
import { observable } from "@trpc/server/observable";

const ee = new EventEmitter();

const t = initTRPC.create();

export const wsRouter = t.router({
   onAdd: t.procedure.subscription(() => {
      return observable((emit) => {
         const onAdd = (data: any) => {
            console.log("EMIT BABY!");
            emit.next(data);
         };
         ee.on("add", onAdd);
         return () => {
            ee.off("add", onAdd);
         };
      });
   }),
   add: t.procedure.query(async () => {
      const post = "hi";
      ee.emit("add", post);
      return post;
   }),
});

import { EventEmitter } from "events";
import { initTRPC } from "@trpc/server";
import { observable } from "@trpc/server/observable";

const ee = new EventEmitter();

const t = initTRPC.create();

export const wsRouter = t.router({
   onAdd: t.procedure.subscription(() => {
      return observable((emit) => {
         const onAdd = (data: any) => {
            console.log("EMIT BABY!");
            emit.next(data);
         };
         ee.on("add", onAdd);
         return () => {
            ee.off("add", onAdd);
         };
      });
   }),
   add: t.procedure.query(async () => {
      const post = "hi";
      ee.emit("add", post);
      return post;
   }),
});

and this is what i have in the client

"use client";

import { useEffect } from "react";

import { client } from "~/trpc/ws";

const Page = () => {
   useEffect(() => {
      const subscription = client.ws.onAdd.subscribe(undefined, {
         onData(data) {
            console.log(data);
         },
      });
   }, []);

   return (
      <div>
         <h1>hi</h1>
      </div>
   );
};

export default Page;

"use client";

import { useEffect } from "react";

import { client } from "~/trpc/ws";

const Page = () => {
   useEffect(() => {
      const subscription = client.ws.onAdd.subscribe(undefined, {
         onData(data) {
            console.log(data);
         },
      });
   }, []);

   return (
      <div>
         <h1>hi</h1>
      </div>
   );
};

export default Page;

6 Replies

haardik | LearnWeb3•15mo ago

@Albastru were you able to fix this? going through the same right now.

AlbastruOP•15mo ago

i just completely gave up on that and started to use Pusher i managed to get it working using redis but in production it kept crashing after a while WS really needs to be rethought in the next release it would bring a lot of new opportunities to apps using tRPC

haardik | LearnWeb3•15mo ago

Mmm okay thank you

Alex / KATT 🐱•15mo ago

the problem you're seeing is likely because the websocket server and the rest of the api runs in two different processes locally you should likely use redis or something so they can share state try swapping all communication to use websockets in the client to verify

haardik | LearnWeb3•15mo ago

hmmm that makes sense. is there a way to share context between the two without 100% switching over to WS Links and without using Redis? Redis feels a bit overkill for my needs and I'd love to simply be able to share an event emitter instance between the two routes i have (one mutation and one subscription)

Alex / KATT 🐱•15mo ago

Yes you can run them as the same server