T
tRPC

eventemitter not having any listeners on websocket

eventemitter not having any listeners on websocket

AAlbastru7/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;
Hhaardik9/29/2023
@Albastru were you able to fix this? going through the same right now.
AAlbastru9/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
Hhaardik9/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
Hhaardik9/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!

T
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 ttrpc + fastify POST request not workingI have a trpc mutation like this: ``` create: publicProcedure .input(z.object({ title: z.stringproblem with useContext (likely easy fix)```tsx function userCard( user: { id: string; name: string | null; image: string | nulI think i found an TRPC BUGI am using TRPC With Fastify and bun (node.js alternative) if you try to call any .mutation route thuseMutation 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 tRPChow 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 aRequests running multiple times after it's failingCannot 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 NDoes 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 theCan someone explain MiddlewareFunction?I am trying to create a custommiddleware.ts file and I would like some explanation on what goes intoHow 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 mutatiIssues 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 wtRPC + 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 suchIs 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 adoptRunning 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 leveIt'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