zeph1665
zeph166515mo ago

web socket keeps on disconnecting and connecting

Hi! Its my first time using web sockets. The first code snippet is my socket code. The second code snippet is where I create context to use in the applyWSSHandler. My issue is that in my createContext function. When I try to use the getUser function, the socket keeps on connecting and disconnecting rapidly (like every few milliseconds). But the moment I remove that function, everything works fine. Any idea what could be issue? The create context has no issue without running the socket. Thank you!
import { createContext } from "./context";
import { appRouter } from "./router";
import { applyWSSHandler } from "@trpc/server/adapters/ws";
import ws from "ws";
const wss = new ws.Server({
port: 3002,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext });

wss.on("connection", (ws) => {
console.log(`➕➕ Connection (${wss.clients.size})`);
ws.once("close", () => {
console.log(`➖➖ Connection (${wss.clients.size})`);
});
});

wss.on("error", (err) => {
console.error("WebSocket error", err);
});
console.log("✅ WebSocket Server listening on ws://localhost:3002");

process.on("SIGTERM", () => {
console.log("SIGTERM");
handler.broadcastReconnectNotification();
wss.close();
});
import { createContext } from "./context";
import { appRouter } from "./router";
import { applyWSSHandler } from "@trpc/server/adapters/ws";
import ws from "ws";
const wss = new ws.Server({
port: 3002,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext });

wss.on("connection", (ws) => {
console.log(`➕➕ Connection (${wss.clients.size})`);
ws.once("close", () => {
console.log(`➖➖ Connection (${wss.clients.size})`);
});
});

wss.on("error", (err) => {
console.error("WebSocket error", err);
});
console.log("✅ WebSocket Server listening on ws://localhost:3002");

process.on("SIGTERM", () => {
console.log("SIGTERM");
handler.broadcastReconnectNotification();
wss.close();
});
import { auth } from "@clerk/nextjs/app-beta";
type IUserProps = {
user: User | null;
};

const ee = new EventEmitter();
export const createContextInner = async ({ user }: IUserProps) => {
return {
ee,
user,
prisma,
};
};

async function getUser() {
// get userId from request
const { userId } = auth();
// get full user object
const user = userId ? await clerkClient.users.getUser(userId) : null;
return user;
}

export const createContext = async () => {
const user = await getUser();
return await createContextInner({ user });
};

export type Context = inferAsyncReturnType<typeof createContext>;
import { auth } from "@clerk/nextjs/app-beta";
type IUserProps = {
user: User | null;
};

const ee = new EventEmitter();
export const createContextInner = async ({ user }: IUserProps) => {
return {
ee,
user,
prisma,
};
};

async function getUser() {
// get userId from request
const { userId } = auth();
// get full user object
const user = userId ? await clerkClient.users.getUser(userId) : null;
return user;
}

export const createContext = async () => {
const user = await getUser();
return await createContextInner({ user });
};

export type Context = inferAsyncReturnType<typeof createContext>;
4 Replies
Alex / KATT 🐱
Alex / KATT 🐱15mo ago
my thinking is that your create context fails and throws an error maybe the auth doesn't work with WSS
zeph1665
zeph166515mo ago
I see! In that case, I'll just try using Pusher instead. Thank you!
ManuRodgers
ManuRodgers15mo ago
hey mate, can you give me some code or link to show me how to integrate Pusher or Ably with tRPC?Thanks in advance
zeph1665
zeph166514mo ago
You can checkout this youtube video: https://www.youtube.com/watch?v=Dw4vF2nftAE Jump to the 10min mark
Scalable Scripts
YouTube
Build a Realtime Chat App with React
👉 Check our website: https://scalablescripts.com Learn how to create a Realtime Chat App with React and Pusher. Source Code: https://github.com/scalablescripts/react-chat This video can be combined with other videos: React and NodeJS Chat App: https://www.youtube.com/playlist?list=PLlameCF3cMEvB8N2bhctdqCMfj1q5aiZh React and NestJS Chat App:...