Next.js Discord

Discord Forum

Has anyone got websockets working yet?

Unanswered
Patrick MacDonald posted this in #help-forum
Open in Discord
I have installed vercel functions and I have the vercel cli, I admit I used AI to get a working poc but I'm kinda stuck, has anyone got this working yet?
//route.ts
import {
  experimental_upgradeWebSocket,
  type WebSocketData,
} from '@vercel/functions';

export async function GET() {
  return experimental_upgradeWebSocket((ws) => {
    ws.on('message', (data: WebSocketData) => {
      ws.send(data);
    });
  });
}
//page.tsx
"use client";

import { useEffect, useState } from "react";

export default function Home() {
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState<string[]>([]);
  const [connected, setConnected] = useState(false);
  const [ws, setWs] = useState<WebSocket | null>(null);

  useEffect(() => {
    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
    const websocket = new WebSocket(
      `${protocol}//${window.location.host}/api/ws`,
    );

    websocket.onopen = () => {
      console.log("✅ Connected");
      setConnected(true);
    };

    websocket.onmessage = (event) => {
      setMessages((prev) => [...prev, event.data]);
    };

    websocket.onclose = () => {
      console.log("❌ Disconnected");
      setConnected(false);
    };

    websocket.onerror = (error) => {
      console.error("⚠️ Error:", error);
    };

    setWs(websocket);

    return () => websocket.close();
  }, []);

  const handleSend = () => {
    if (!message.trim() || !ws) return;
    ws.send(message);
    setMessage("");
  };

  return (
...

1 Reply