eventemitter not having any listeners on websocket

AAlbastru

7/4/2023

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;

Hhaardik

9/29/2023

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

AAlbastru

9/29/2023

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

Hhaardik

9/29/2023

Mmm okay thank you

AKAlex / KATT 🐱

9/29/2023

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

Hhaardik

9/29/2023

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)

AKAlex / KATT 🐱

9/29/2023

Yes you can run them as the same server

Looking for more? Join the community!

tRPC

eventemitter not having any listeners on websocket

Join Server

tRPC

eventemitter not having any listeners on websocket

Join Server

Recommended Posts

tRPC + cls-hookedHi, im trying to implement `cls-hooked` library with trpc's protectedProcedure, but it doesnt seem t trpc + fastify POST request not workingI have a trpc mutation like this: ``` create: publicProcedure .input(z.object({ title: z.string problem with useContext (likely easy fix)```tsx function userCard( user: { id: string; name: string | null; image: string | nul I think i found an TRPC BUGI am using TRPC With Fastify and bun (node.js alternative) if you try to call any .mutation route th useMutation in useEffect dependency array causes infinite loopI had a very unexpected issue today when testing out some code. I have a simple `sum` method in tRPC how does batching work?My understanding is that batching basically combines multiple requests in a single network request, Links vs MiddlewaresWhat is the difference between a middleware and a link? These two seems to behave the same?Setting up tRPC with Supabase and DrizzleHi! 😄 Is there someone that has any recommendations on how I should setup tRPC with Supabase Auth a Requests running multiple times after it's failing Cannot read properties of undefined (reading 'trpc')I keep getting that when trying to make an api request with my next.js page. I am using the latest N Does SSG / ServerSideHelpers allow for mutations in getServerSideProps Nextjs ?Hi, I have a use case where I send the user to a payment portal, and the payment portal can send the Can someone explain MiddlewareFunction?I am trying to create a custommiddleware.ts file and I would like some explanation on what goes into How do I get the queries and mutations list in v10?Hello, In tRPC v9 I can do: ``` const queries = Object.keys(appRouter._def.queries); const mutati Issues with subrouters being treated as any on clientI have 3 sub routers, all with a hello query just returning an object with world. I'm using nextjs w tRPC + Express + Open TelemetryI'm wondering if anyone has experience using tRPC in conjunction with Express and Open Telemetry. I'Strange trpc typesHello, I just installed a fresh `trpc` project with `prisma` and `next`. I have a prisma schema such Is there a version of tRPC v10 that works with Next 12?Hi, is there a version of tRPC that works with Next 12 and React 17? We want to incrementally adopt Running TRPC on Vercel with custom serialization failsHi all, I'm having some difficulties with the serialization of my objects when I run on vercel. I'm How to prefetch data on the client into the cache?To simplify a bit, lets say I'm making an app that allows users to view a project. I have a top leve It's possible to upload a zip file through trpc?I'm doing a screen where I need to upload a zip with pdfs files, it is possible with trpc? or I need