Fix not correctly getting socket handler on custom servers

.changeset/loose-mugs-work.md

@@ -0,0 +1,5 @@
+---
+"next-ws": patch
+---
+
+Fix not correctly getting socket handler on custom servers

examples/chat-room-with-custom-server/app/chat/_shared/message-submit.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback } from 'react';
 import type { Message } from './message';
 

examples/chat-room-with-custom-server/app/chat/_shared/websocket.ts

@@ -0,0 +1,62 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { Message } from './message';
+
+export function useMessaging(url: () => string) {
+  const ref = useRef<WebSocket>(null);
+  const target = useRef(url);
+
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    if (ref.current) return;
+    const socket = new WebSocket(target.current());
+    ref.current = socket;
+
+    const controller = new AbortController();
+
+    socket.addEventListener(
+      'message',
+      async (event) => {
+        console.log('Incoming event:', event);
+        const payload =
+          typeof event.data === 'string' ? event.data : await event.data.text();
+        const message = JSON.parse(payload) as Message;
+        console.log('Incoming message:', message);
+        setMessages((p) => [...p, message]);
+      },
+      controller,
+    );
+
+    socket.addEventListener(
+      'error',
+      () => {
+        const content = 'An error occurred while connecting to the server';
+        setMessages((p) => [...p, { author: 'System', content }]);
+      },
+      controller,
+    );
+
+    socket.addEventListener(
+      'close',
+      (event) => {
+        if (event.wasClean) return;
+        const content = 'The connection to the server was closed unexpectedly';
+        setMessages((p) => [...p, { author: 'System', content }]);
+      },
+      controller,
+    );
+
+    return () => controller.abort();
+  }, []);
+
+  const sendMessage = useCallback((message: Message) => {
+    if (!ref.current || ref.current.readyState !== ref.current.OPEN) return;
+    console.log('Outgoing message:', message);
+    ref.current.send(JSON.stringify(message));
+    setMessages((p) => [...p, { ...message, author: 'You' }]);
+  }, []);
+
+  return [messages, sendMessage] as const;
+}

examples/chat-room-with-custom-server/app/chat/dynamic/[language]/socket/route.ts

@@ -11,14 +11,15 @@ export function SOCKET(
   server: import('ws').WebSocketServer,
   { params }: { params: { language: string } },
 ) {
-  for (const other of server.clients)
-    if (client !== other && other.readyState === other.OPEN)
-      other.send(
-        JSON.stringify({
-          author: 'System',
-          content: `A new user joined the chat, their language is ${params.language}`,
-        }),
-      );
+  for (const other of server.clients) {
+    if (client === other || other.readyState !== other.OPEN) continue;
+    other.send(
+      JSON.stringify({
+        author: 'System',
+        content: `A new user joined the chat, their language is ${params.language}`,
+      }),
+    );
+  }
 
   client.on('message', (message) => {
     // Forward the message to all other clients
@@ -35,13 +36,14 @@ export function SOCKET(
   );
 
   return () => {
-    for (const other of server.clients)
-      if (client !== other && other.readyState === other.OPEN)
-        other.send(
-          JSON.stringify({
-            author: 'System',
-            content: 'A user left the chat',
-          }),
-        );
+    for (const other of server.clients) {
+      if (client === other || other.readyState !== other.OPEN) continue;
+      other.send(
+        JSON.stringify({
+          author: 'System',
+          content: 'A user left the chat',
+        }),
+      );
+    }
   };
 }

examples/chat-room-with-custom-server/app/chat/dynamic/page.tsx

@@ -1,47 +1,19 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { Message } from '../_shared/message';
 import { MessageList } from '../_shared/message-list';
 import { MessageSubmit } from '../_shared/message-submit';
+import { useMessaging } from '../_shared/websocket';
 
 export default function Page() {
-  const socketRef = useRef<WebSocket | null>(null);
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const language = navigator.language;
-    const url = `ws://${window.location.host}/chat/dynamic/${language}/socket`;
-    socketRef.current = new WebSocket(url);
-    return () => {
-      socketRef.current?.close();
-      socketRef.current = null;
-    };
-  }, []);
-
-  const [messages, setMessages] = useState<Message[]>([]);
-  const onMessage = useCallback((message: Message) => {
-    socketRef.current?.send(JSON.stringify(message));
-    setMessages((messages) => [...messages, { ...message, author: 'You' }]);
-  }, []);
-
-  useEffect(() => {
-    async function handleMessage(event: MessageEvent) {
-      const payload =
-        typeof event.data === 'string' ? event.data : await event.data.text();
-      const message = JSON.parse(payload) as Message;
-      setMessages((p) => [...p, message]);
-    }
-
-    socketRef.current?.addEventListener('message', handleMessage);
-    return () =>
-      socketRef.current?.removeEventListener('message', handleMessage);
-  }, []);
+  const [messages, sendMessage] = useMessaging(
+    () =>
+      `ws://${window.location.host}/chat/dynamic/${navigator.language}/socket`,
+  );
 
   return (
     <div style={{ maxWidth: '50vh' }}>
       <MessageList messages={messages} />
-      <MessageSubmit onMessage={onMessage} />
+      <MessageSubmit onMessage={sendMessage} />
     </div>
   );
 }

examples/chat-room-with-custom-server/app/chat/simple/page.tsx

@@ -1,46 +1,18 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { Message } from '../_shared/message';
 import { MessageList } from '../_shared/message-list';
 import { MessageSubmit } from '../_shared/message-submit';
+import { useMessaging } from '../_shared/websocket';
 
 export default function Page() {
-  const socketRef = useRef<WebSocket | null>(null);
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const url = `ws://${window.location.host}/chat/simple/socket`;
-    socketRef.current = new WebSocket(url);
-    return () => {
-      socketRef.current?.close();
-      socketRef.current = null;
-    };
-  }, []);
-
-  const [messages, setMessages] = useState<Message[]>([]);
-  const onMessage = useCallback((message: Message) => {
-    socketRef.current?.send(JSON.stringify(message));
-    setMessages((messages) => [...messages, { ...message, author: 'You' }]);
-  }, []);
-
-  useEffect(() => {
-    async function handleMessage(event: MessageEvent) {
-      const payload =
-        typeof event.data === 'string' ? event.data : await event.data.text();
-      const message = JSON.parse(payload) as Message;
-      setMessages((p) => [...p, message]);
-    }
-
-    socketRef.current?.addEventListener('message', handleMessage);
-    return () =>
-      socketRef.current?.removeEventListener('message', handleMessage);
-  }, []);
+  const [messages, sendMessage] = useMessaging(
+    () => `ws://${window.location.host}/chat/simple/socket`,
+  );
 
   return (
     <div style={{ maxWidth: '50vh' }}>
       <MessageList messages={messages} />
-      <MessageSubmit onMessage={onMessage} />
+      <MessageSubmit onMessage={sendMessage} />
     </div>
   );
 }

examples/chat-room-with-custom-server/app/chat/simple/socket/route.ts

@@ -10,14 +10,15 @@ export function SOCKET(
   _request: import('node:http').IncomingMessage,
   server: import('ws').WebSocketServer,
 ) {
-  for (const other of server.clients)
-    if (client !== other && other.readyState === other.OPEN)
-      other.send(
-        JSON.stringify({
-          author: 'System',
-          content: 'A new user joined the chat',
-        }),
-      );
+  for (const other of server.clients) {
+    if (client === other || other.readyState !== other.OPEN) continue;
+    other.send(
+      JSON.stringify({
+        author: 'System',
+        content: 'A new user joined the chat',
+      }),
+    );
+  }
 
   client.on('message', (message) => {
     // Forward the message to all other clients
@@ -34,13 +35,14 @@ export function SOCKET(
   );
 
   return () => {
-    for (const other of server.clients)
-      if (client !== other && other.readyState === other.OPEN)
-        other.send(
-          JSON.stringify({
-            author: 'System',
-            content: 'A user left the chat',
-          }),
-        );
+    for (const other of server.clients) {
+      if (client === other || other.readyState !== other.OPEN) continue;
+      other.send(
+        JSON.stringify({
+          author: 'System',
+          content: 'A user left the chat',
+        }),
+      );
+    }
   };
 }

examples/chat-room-with-custom-server/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "start": "next start",
-    "dev": "next dev",
+    "start": "NODE_ENV=production tsx server.ts",
+    "dev": "tsx server.ts",
     "prepare": "next-ws patch"
   },
   "dependencies": {
@@ -14,6 +14,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.8"
+    "@types/react": "^19.0.8",
+    "tsx": "^4.19.3"
   }
 }

examples/chat-room-with-custom-server/server.ts

@@ -11,7 +11,7 @@ setWebSocketServer(webSocketServer);
 
 const dev = process.env.NODE_ENV !== 'production';
 const hostname = 'localhost';
-const port = 3000;
+const port = Number.parseInt(process.env.PORT ?? '3000');
 const app = next({ dev, hostname, port, customServer: true });
 const handle = app.getRequestHandler();
 

examples/chat-room-with-custom-server/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "include": ["app/**/*", "server.ts", ".next/types/**/*.ts"],
   "exclude": ["node_modules"],
-
   "compilerOptions": {
     "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
@@ -12,10 +11,11 @@
     "incremental": true,
     "module": "esnext",
     "esModuleInterop": true,
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "plugins": [{ "name": "next" }]
+    "plugins": [{ "name": "next" }],
+    "forceConsistentCasingInFileNames": true
   }
 }

examples/chat-room/app/chat/_shared/message-submit.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback } from 'react';
 import type { Message } from './message';
 

examples/chat-room/app/chat/_shared/websocket.ts

@@ -0,0 +1,62 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { Message } from './message';
+
+export function useMessaging(url: () => string) {
+  const ref = useRef<WebSocket>(null);
+  const target = useRef(url);
+
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    if (ref.current) return;
+    const socket = new WebSocket(target.current());
+    ref.current = socket;
+
+    const controller = new AbortController();
+
+    socket.addEventListener(
+      'message',
+      async (event) => {
+        console.log('Incoming event:', event);
+        const payload =
+          typeof event.data === 'string' ? event.data : await event.data.text();
+        const message = JSON.parse(payload) as Message;
+        console.log('Incoming message:', message);
+        setMessages((p) => [...p, message]);
+      },
+      controller,
+    );
+
+    socket.addEventListener(
+      'error',
+      () => {
+        const content = 'An error occurred while connecting to the server';
+        setMessages((p) => [...p, { author: 'System', content }]);
+      },
+      controller,
+    );
+
+    socket.addEventListener(
+      'close',
+      (event) => {
+        if (event.wasClean) return;
+        const content = 'The connection to the server was closed unexpectedly';
+        setMessages((p) => [...p, { author: 'System', content }]);
+      },
+      controller,
+    );
+
+    return () => controller.abort();
+  }, []);
+
+  const sendMessage = useCallback((message: Message) => {
+    if (!ref.current || ref.current.readyState !== ref.current.OPEN) return;
+    console.log('Outgoing message:', message);
+    ref.current.send(JSON.stringify(message));
+    setMessages((p) => [...p, { ...message, author: 'You' }]);
+  }, []);
+
+  return [messages, sendMessage] as const;
+}