"Fast Refresh" messing with my WebSocketServer in Next.js development

I got my websockets up and running in tRPC + Next.js with this code:

import { WebSocketServer } from 'ws'
import { applyWSSHandler } from '@trpc/server/adapters/ws'

// [...]

const wss = new WebSocketServer({
  port: 3001,
})

const handler = applyWSSHandler({
  wss,
  router: appRouter,
  createContext,
})

import { WebSocketServer } from 'ws'
import { applyWSSHandler } from '@trpc/server/adapters/ws'

// [...]

const wss = new WebSocketServer({
  port: 3001,
})

const handler = applyWSSHandler({
  wss,
  router: appRouter,
  createContext,
})

import { WebSocketServer } from 'ws'
import { applyWSSHandler } from '@trpc/server/adapters/ws'

// [...]

const wss = new WebSocketServer({
  port: 3001,
})

const handler = applyWSSHandler({
  wss,
  router: appRouter,
  createContext,
})

import { WebSocketServer } from 'ws'
import { applyWSSHandler } from '@trpc/server/adapters/ws'

// [...]

const wss = new WebSocketServer({
  port: 3001,
})

const handler = applyWSSHandler({
  wss,
  router: appRouter,
  createContext,
})

...and it's working like a charm. But when I change something in any server file and reload my webapp, I get this error in my server console:

WebSocket Server error Error: listen EADDRINUSE: address already in use :::3001
[...]

WebSocket Server error Error: listen EADDRINUSE: address already in use :::3001
[...]

WebSocket Server error Error: listen EADDRINUSE: address already in use :::3001
[...]

WebSocket Server error Error: listen EADDRINUSE: address already in use :::3001
[...]

So I guess Next.js is re-running the files and trying to re-create the server. Is there any way I can prevent Next.js of doing that? Or is there any way to close de server just before the hot-reload? Am I doing something wrong, or is there any other possible solution?

Thanks!

"Fast Refresh" messing with my WebSocketServer in Next.js development

Similar Threads

Similar Threads

Similar Threads