feat: implement WebSocket support with new SimpleChat component and update environment variables

Author: 0-don

.env

@@ -1,4 +1,3 @@
 SECRET=km12poik3mokpaxnjcojsandfoj1nbjt
 DATABASE_URL="file:../demo.db"
-NEXT_PUBLIC_URL=http://localhost:3000
-NEXT_PUBLIC_WEBSOCKET_URL=ws://localhost:3000/api/ws
+NEXT_PUBLIC_URL=http://localhost:3000

package.json

@@ -9,7 +9,7 @@
     "start": "prisma migrate deploy && next start",
     "lint": "next lint",
     "prisma": "prisma migrate dev --name init && prisma generate",
-    "postinstall": "prisma generate"
+    "postinstall": "prisma generate && next-ws patch"
   },
   "dependencies": {
     "@elysiajs/eden": "1.3.2",
@@ -18,14 +18,17 @@
     "elysia": "1.3.6",
     "jose": "6.0.12",
     "next": "15.4.4",
+    "next-ws": "^2.0.12",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",
     "@types/node": "24.1.0",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
+    "@types/ws": "^8.5.10",
     "eslint": "9.17.0",
     "eslint-config-next": "15.4.4",
     "postcss": "8.5.6",

src/app/(main)/dashboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import ChatComponent from "@/components/chat-component";
+import ChatComponent from "@/components/simple-component";
 import { useMeQuery } from "@/hooks/user-hook";
 import Link from "next/link";
 

src/app/api/ws/route.ts

@@ -0,0 +1,61 @@
+import type { WebSocket } from "ws";
+
+const clients = new Set<WebSocket>();
+
+export function SOCKET(
+  client: WebSocket,
+  request: import("http").IncomingMessage,
+  server: import("ws").WebSocketServer,
+) {
+  console.log("Client connected");
+  clients.add(client);
+
+  // Send welcome message
+  client.send(
+    JSON.stringify({
+      type: "welcome",
+      message: "Connected to WebSocket server",
+    }),
+  );
+
+  client.on("message", (data) => {
+    try {
+      const message = data.toString();
+      console.log("Received:", message);
+
+      // Broadcast to all connected clients
+      const response = JSON.stringify({
+        type: "message",
+        data: message,
+        timestamp: Date.now(),
+      });
+
+      clients.forEach((c) => {
+        if (c.readyState === c.OPEN && c !== client) {
+          c.send(response);
+        }
+      });
+
+      // Echo back to sender
+      client.send(
+        JSON.stringify({
+          type: "echo",
+          data: message,
+          timestamp: Date.now(),
+        }),
+      );
+    } catch (error) {
+      console.error("Message handling error:", error);
+    }
+  });
+
+  client.on("close", () => {
+    console.log("Client disconnected");
+    clients.delete(client);
+  });
+
+  client.on("error", (error) => {
+    console.error("WebSocket error:", error);
+    clients.delete(client);
+  });
+}

src/components/chat-component.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useWebSocket } from "@/hooks/websocket-hook";
+import { useState } from "react";
+
+export default function SimpleChat() {
+  const { isConnected, messages, sendMessage } = useWebSocket();
+  const [input, setInput] = useState("");
+
+  const handleSend = () => {
+    if (input.trim()) {
+      sendMessage(input);
+      setInput("");
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-md p-4">
+      <div className="mb-4 rounded-lg bg-gray-800 p-2">
+        <span
+          className={`text-sm ${isConnected ? "text-green-400" : "text-red-400"}`}
+        >
+          {isConnected ? "● Connected" : "● Disconnected"}
+        </span>
+      </div>
+
+      <div className="mb-4 h-64 overflow-y-auto rounded-lg border border-gray-600 bg-gray-900 p-2">
+        {messages.length === 0 ? (
+          <div className="text-sm text-gray-500">No messages yet...</div>
+        ) : (
+          messages.map((msg, i) => (
+            <div key={i} className="mb-2 text-sm">
+              {msg}
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyPress={(e) => e.key === "Enter" && handleSend()}
+          className="flex-1 rounded border border-gray-600 bg-gray-800 p-2 text-white"
+          placeholder="Type a message..."
+          disabled={!isConnected}
+        />
+        <button
+          onClick={handleSend}
+          disabled={!isConnected || !input.trim()}
+          className="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600 disabled:bg-gray-600"
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/simple-component.tsx

@@ -1,20 +1,58 @@
 import { useEffect, useRef, useState } from "react";
 
+interface WebSocketMessage {
+  type: "welcome" | "message" | "echo";
+  data?: string;
+  message?: string;
+  timestamp?: number;
+}
+
 export function useWebSocket() {
   const [isConnected, setIsConnected] = useState(false);
   const [messages, setMessages] = useState<string[]>([]);
   const ws = useRef<WebSocket | null>(null);
 
   useEffect(() => {
-    ws.current = new WebSocket(process.env.NEXT_PUBLIC_WEBSOCKET_URL);
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${protocol}//${window.location.host}/api/ws`;
+
+    ws.current = new WebSocket(wsUrl);
+
+    ws.current.onopen = () => {
+      console.log("WebSocket connected");
+      setIsConnected(true);
+    };
+
+    ws.current.onclose = () => {
+      console.log("WebSocket disconnected");
+      setIsConnected(false);
+    };
+
+    ws.current.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      setIsConnected(false);
+    };
 
-    ws.current.onopen = () => setIsConnected(true);
-    ws.current.onclose = () => setIsConnected(false);
     ws.current.onmessage = (event) => {
-      setMessages((prev) => [...prev, event.data]);
+      try {
+        const parsed: WebSocketMessage = JSON.parse(event.data);
+
+        if (parsed.type === "welcome") {
+          setMessages((prev) => [...prev, `System: ${parsed.message}`]);
+        } else if (parsed.type === "message") {
+          setMessages((prev) => [...prev, `User: ${parsed.data}`]);
+        } else if (parsed.type === "echo") {
+          setMessages((prev) => [...prev, `Echo: ${parsed.data}`]);
+        }
+      } catch {
+        // Fallback for non-JSON messages
+        setMessages((prev) => [...prev, event.data]);
+      }
     };
 
-    return () => ws.current?.close();
+    return () => {
+      ws.current?.close();
+    };
   }, []);
 
   const sendMessage = (message: string) => {

src/hooks/websocket-hook.ts

@@ -2,7 +2,6 @@ declare namespace NodeJS {
   export interface ProcessEnv {
     SECRET: string;
     NEXT_PUBLIC_URL: string;
-    NEXT_PUBLIC_WEBSOCKET_URL: string;
     DATABASE_URL: string;
   }
 }