- No links found. Add a link below.
-
- )}
+
diff --git a/frontend/src/components/real-time-links.tsx b/frontend/src/components/real-time-links.tsx
new file mode 100644
index 0000000..f7d7e36
--- /dev/null
+++ b/frontend/src/components/real-time-links.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Links } from "@/types/api";
+import { LinkCard } from "@/components/link-card";
+import { useWebSocket } from "@/hooks/useWebSocket";
+
+interface RealTimeLinksProps {
+ initialLinks: Links[];
+ groupId: string;
+}
+
+export function RealTimeLinks({ initialLinks, groupId }: RealTimeLinksProps) {
+ const [links, setLinks] = useState
(initialLinks);
+ const { status, lastMessage } = useWebSocket(groupId);
+
+ useEffect(() => {
+ if (!lastMessage) return;
+
+ console.log("Received WebSocket message:", lastMessage);
+
+ switch (lastMessage.type) {
+ case "link_created": {
+ const newLink = lastMessage.data as any;
+ // Convert backend format to frontend format
+ const formattedLink: Links = {
+ id: newLink.id,
+ user_id: newLink.user_id,
+ url: newLink.url,
+ title: newLink.title || "",
+ comment: newLink.comment || "",
+ created_at: newLink.created_at,
+ };
+ setLinks((prev) => [formattedLink, ...prev]);
+ break;
+ }
+
+ case "link_updated": {
+ const updatedLink = lastMessage.data as any;
+ setLinks((prev) =>
+ prev.map((link) =>
+ link.id === updatedLink.id
+ ? {
+ ...link,
+ comment: updatedLink.comment || "",
+ title: updatedLink.title || "",
+ }
+ : link
+ )
+ );
+ break;
+ }
+
+ case "link_deleted": {
+ const deletedData = lastMessage.data as { id: string };
+ setLinks((prev) => prev.filter((link) => link.id !== deletedData.id));
+ break;
+ }
+ }
+ }, [lastMessage]);
+
+ return (
+ <>
+ {status === "connected" && (
+
+ Real-time updates enabled
+
+ )}
+ {status === "connecting" && (
+
+ Connecting to real-time updates...
+
+ )}
+ {status === "error" && (
+
+ Real-time updates unavailable
+
+ )}
+
+ {links.length > 0 ? (
+ links.map((link: Links) => (
+
+ ))
+ ) : (
+
+ No links found. Add a link below.
+
+ )}
+
+ );
+}
diff --git a/frontend/src/hooks/useWebSocket.ts b/frontend/src/hooks/useWebSocket.ts
new file mode 100644
index 0000000..58a0372
--- /dev/null
+++ b/frontend/src/hooks/useWebSocket.ts
@@ -0,0 +1,143 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import { createClient } from "@/utils/supabase/client";
+
+export type WebSocketMessage = {
+ type: "link_created" | "link_updated" | "link_deleted";
+ data: any;
+};
+
+export type WebSocketStatus = "connecting" | "connected" | "disconnected" | "error";
+
+export function useWebSocket(groupId: string | null) {
+ const [status, setStatus] = useState("disconnected");
+ const [lastMessage, setLastMessage] = useState(null);
+ const wsRef = useRef(null);
+ const reconnectTimeoutRef = useRef(null);
+ const reconnectAttemptsRef = useRef(0);
+ const maxReconnectAttempts = 5;
+
+ const connect = useCallback(async () => {
+ if (!groupId) return;
+
+ try {
+ const supabase = createClient();
+ const {
+ data: { session },
+ } = await supabase.auth.getSession();
+
+ if (!session?.access_token) {
+ console.error("No access token available");
+ setStatus("error");
+ return;
+ }
+
+ // Determine WebSocket URL based on environment
+ const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+ const apiHost =
+ process.env.NODE_ENV === "production"
+ ? "coveapi.egeuysal.com"
+ : "localhost:8080";
+ const wsUrl = `${wsProtocol}//${apiHost}/v1/ws?token=${encodeURIComponent(session.access_token)}`;
+
+ console.log("Connecting to WebSocket");
+ setStatus("connecting");
+
+ // Create WebSocket connection with auth token in URL
+ const ws = new WebSocket(wsUrl);
+ wsRef.current = ws;
+
+ ws.onopen = () => {
+ console.log("WebSocket connected");
+ setStatus("connected");
+ reconnectAttemptsRef.current = 0;
+
+ // Send authentication and subscribe to group
+ ws.send(
+ JSON.stringify({
+ type: "subscribe",
+ groupId: groupId,
+ })
+ );
+ };
+
+ ws.onmessage = (event) => {
+ try {
+ const message = JSON.parse(event.data) as WebSocketMessage;
+ console.log("WebSocket message received:", message);
+ setLastMessage(message);
+ } catch (error) {
+ console.error("Failed to parse WebSocket message:", error);
+ }
+ };
+
+ ws.onerror = (error) => {
+ console.error("WebSocket error:", error);
+ setStatus("error");
+ };
+
+ ws.onclose = () => {
+ console.log("WebSocket disconnected");
+ setStatus("disconnected");
+ wsRef.current = null;
+
+ // Attempt to reconnect with exponential backoff
+ if (reconnectAttemptsRef.current < maxReconnectAttempts) {
+ const delay = Math.min(1000 * Math.pow(2, reconnectAttemptsRef.current), 30000);
+ console.log(`Reconnecting in ${delay}ms...`);
+
+ reconnectTimeoutRef.current = setTimeout(() => {
+ reconnectAttemptsRef.current++;
+ connect();
+ }, delay);
+ }
+ };
+ } catch (error) {
+ console.error("Failed to connect to WebSocket:", error);
+ setStatus("error");
+ }
+ }, [groupId]);
+
+ const disconnect = useCallback(() => {
+ if (reconnectTimeoutRef.current) {
+ clearTimeout(reconnectTimeoutRef.current);
+ reconnectTimeoutRef.current = null;
+ }
+
+ if (wsRef.current) {
+ wsRef.current.close();
+ wsRef.current = null;
+ }
+
+ setStatus("disconnected");
+ reconnectAttemptsRef.current = 0;
+ }, []);
+
+ const sendMessage = useCallback((message: any) => {
+ if (wsRef.current?.readyState === WebSocket.OPEN) {
+ wsRef.current.send(JSON.stringify(message));
+ } else {
+ console.warn("WebSocket is not connected");
+ }
+ }, []);
+
+ useEffect(() => {
+ if (groupId) {
+ connect();
+ } else {
+ disconnect();
+ }
+
+ return () => {
+ disconnect();
+ };
+ }, [groupId, connect, disconnect]);
+
+ return {
+ status,
+ lastMessage,
+ sendMessage,
+ reconnect: connect,
+ };
+}
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index f4df301..61b663f 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -12,4 +12,27 @@ export type Links = {
title: string
comment: string
created_at: string
+}
+
+export type LinkResponse = {
+ id: string
+ group_id: string
+ user_id: string
+ url: string
+ title?: string
+ comment?: string
+ created_at: string
+}
+
+// WebSocket message types
+export type WebSocketMessageType = "link_created" | "link_updated" | "link_deleted"
+
+export type WebSocketMessage = {
+ type: WebSocketMessageType
+ data: LinkResponse | { id: string }
+}
+
+export type SubscribeMessage = {
+ type: "subscribe" | "unsubscribe"
+ groupId: string
}
\ No newline at end of file
diff --git a/nginx/conf.d/backend.conf b/nginx/conf.d/backend.conf
index 6fb6a5c..4e37f8f 100644
--- a/nginx/conf.d/backend.conf
+++ b/nginx/conf.d/backend.conf
@@ -39,5 +39,11 @@ server {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
+
+ # WebSocket support
+ proxy_http_version 1.1;
+ proxy_set_header Upgrade $http_upgrade;
+ proxy_set_header Connection "upgrade";
+ proxy_read_timeout 86400;
}
}
\ No newline at end of file