Has anyone got websockets working yet?
Unanswered
Patrick MacDonald posted this in #help-forum
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 (
...