websocket?

backend/handlers/handle_websocket.go

@@ -1,11 +1,8 @@
 package handlers
 
 import (
-	"time"
-
 	"adam-french.co.uk/backend/services"
 	"github.com/gin-gonic/gin"
-	"github.com/gorilla/websocket"
 )
 
 func (store *Store) ConnectWebSocket(ctx *gin.Context) {
@@ -14,9 +11,6 @@ func (store *Store) ConnectWebSocket(ctx *gin.Context) {
 		ctx.JSON(500, gin.H{"error": err.Error()})
 		return
 	}
-	defer conn.Close()
+
-	for {
+	services.HandleWebSocket(conn)
-		conn.WriteMessage(websocket.TextMessage, []byte("Hello Websocket!"))
-		time.Sleep(time.Second)
-	}
 }

backend/models/models.go

@@ -26,3 +26,12 @@ type Post struct {
 	Author    *User          `gorm:"foreignKey:AuthorID" json:"author"`
 	Content   string         `json:"content"`
 }
+
+type Message struct {
+	ID        uint           `gorm:"primarykey" json:"id"`
+	Content   string         `json:"text"`
+	AuthorID  uint           `json:"-"`
+	Author    *User          `gorm:"foreignKey:AuthorID" json:"author"`
+	CreatedAt time.Time      `json:"createdAt"`
+	DeletedAt gorm.DeletedAt `gorm:"index" json:"deletedAt"`
+}

backend/services/websocket.go

@@ -1,6 +1,11 @@
 package services
 
 import (
+	"sync"
+	"time"
+
+	"adam-french.co.uk/backend/models"
+
 	"github.com/gorilla/websocket"
 )
 
@@ -8,3 +13,52 @@ var Upgrader = websocket.Upgrader{
 	ReadBufferSize:  1024,
 	WriteBufferSize: 1024,
 }
+
+var (
+	clients  = make(map[*websocket.Conn]bool)
+	messages = make([]models.Message, 0)
+	mu       sync.Mutex
+)
+
+func HandleWebSocket(conn *websocket.Conn) {
+	defer conn.Close()
+
+	mu.Lock()
+	clients[conn] = true
+
+	// Send existing message history to new client
+	for _, msg := range messages {
+		if err := conn.WriteJSON(msg); err != nil {
+			mu.Unlock()
+			return
+		}
+	}
+	mu.Unlock()
+
+	// Read loop
+	for {
+		var incoming models.Message
+		if err := conn.ReadJSON(&incoming); err != nil {
+			break // client disconnected
+		}
+
+		incoming.CreatedAt = time.Now()
+
+		// Store and broadcast
+		mu.Lock()
+		messages = append(messages, incoming)
+
+		for client := range clients {
+			if err := client.WriteJSON(incoming); err != nil {
+				client.Close()
+				delete(clients, client)
+			}
+		}
+		mu.Unlock()
+	}
+
+	// Cleanup on disconnect
+	mu.Lock()
+	delete(clients, conn)
+	mu.Unlock()
+}

nginx/vue/src/components/quick/Chat.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+// Connect to websocket
+const url = "/api/ws";
+
+const socket = ref(null);
+const messages = ref([]);
+const messageInput = ref("");
+
+onMounted(() => {
+    socket.value = new WebSocket(url);
+
+    socket.value.addEventListener("message", (event) => {
+        const message = JSON.parse(event.data);
+        messages.value.push(message);
+    });
+});
+
+function sendMessage() {
+    socket.value.send(JSON.stringify({ content: messageInput.value }));
+    messageInput.value = "";
+}
+
+onUnmounted(() => {
+    socket.value?.close();
+});
+</script>
+
+<template>
+    <div>
+        <div class="flex-col">
+            <p v-for="message in messages" :key="message.id">
+                {{ message.content }}
+            </p>
+        </div>
+        <div class="flex-row">
+            <input v-model="messageInput" @keyup.enter="sendMessage" />
+            <button @click="sendMessage">Send</button>
+        </div>
+    </div>
+</template>

nginx/vue/src/views/Home.vue

@@ -1,6 +1,7 @@
 <script setup>
 import Timer from "@/components/quick/Timer.vue";
 import Time from "@/components/quick/Time.vue";
+import Chat from "@/components/quick/Chat.vue";
 
 import Intro from "@/components/home/Intro.vue";
 import Stamps from "@/components/home/Stamps.vue";
@@ -19,6 +20,7 @@ import Watching from "@/components/home/Watching.vue";
         <div class="flex-col tr">
             <Time class="bdr-2 bg-primary" />
             <Timer class="bdr-2 bg-primary" />
+            <Chat class="bdr-2 bg-primary" />
         </div>
     </div>
     <div class="background halftone" />