Complete WebSocket

frontend/src/auth.ts

@@ -4,7 +4,7 @@ import { API_BASE_URL } from "./config";
 
 // Authentication and navigation handling
 export let currentUser: User | null = null;
-let authToken: string | null = null;
+export let authToken: string | null = null;
 
 
 // Helper function to get auth headers
@@ -39,6 +39,7 @@ export function showChat() {
     document.getElementById('login-form')!.style.display = 'none';
     document.getElementById('register-form')!.style.display = 'none';
     document.getElementById('chat-interface')!.style.display = 'block';
+    loadMessages();
 }
 
 // Clear all alerts

frontend/src/config.ts

@@ -1 +1,2 @@
-export const API_BASE_URL: string = '/api';
+export const API_BASE_URL: string = '/api';
+export const API_FULL_BASE_URL: string = "localhost:8301/api"

frontend/src/main.ts

@@ -1,9 +1,11 @@
 import './css/style.scss';
-import { showLogin, getAuthHeaders } from './auth';
-import { API_BASE_URL } from './config';
-import type { Message, Messages } from './types';
+import { showLogin, getAuthHeaders, authToken } from './auth';
+import { API_BASE_URL, API_FULL_BASE_URL } from './config';
+import type { Message, Messages, WebSocketMessage } from './types';
 import "./links";
 
+const websocket = new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`);
+
 
 // Функция для форматирования времени
 function formatTime(dateString: string) {
@@ -91,30 +93,47 @@ export function sendMessage() {
     const message = input.value.trim();
 
     if (message) {
-        fetch(`${API_BASE_URL}/send_message`, {
-            method: 'POST',
-            headers: getAuthHeaders(),
-            body: JSON.stringify({ content: message })
-        }).then(response => {
-            if (response.ok) {
-                input.value = '';
+        const payload: WebSocketMessage = {
+            data: {
+                content: message
+            }, 
+            credentials: {
+                scheme: "Bearer", 
+                credentials: authToken!
+            },
+            type: "sendMessage"
+        }
+
+        let callback: ((e: MessageEvent) => void) | null = null
+        callback = (e) => {
+            websocket.removeEventListener("message", callback!);
+            const response: WebSocketMessage = JSON.parse(e.data)
+            console.log(response)
+            if (!response.error) {
+                input.value = "";
             }
-        });
+        }
+        websocket.addEventListener("message", callback);
+
+        websocket.send(JSON.stringify(payload));
     }
 }
 
 
-// Initialization
+websocket.addEventListener("message", (e) => {
+    const message: WebSocketMessage = JSON.parse(e.data);
+    switch (message.type) {
+        case "newMessage": {
+            const newMessage: Message = message.data;
+            addMessage(newMessage, newMessage.is_author);
+            break;
+        }
+    }
+});
+
+showLogin();
+
 document.getElementById('message-form')!.addEventListener('submit', (e) => {
     e.preventDefault();
     sendMessage();
-});
-
-// Проверка новых сообщений каждые 2 секунды (only when chat is visible)
-setInterval(() => {
-    if (document.getElementById('chat-interface')!.style.display !== 'none') {
-        loadMessages();
-    }
-}, 2000);
-
-showLogin();
+});

frontend/src/types.ts

@@ -44,4 +44,25 @@ export interface RegisterRequest {
 export interface LoginResponse {
     username: string;
     token: string;
+}
+
+// ---------------
+// WebSocket types
+// ---------------
+
+export interface WebSocketMessage {
+    type: string;
+    credentials?: WebSocketCredentials;
+    data?: any;
+    error?: WebSocketError;
+}
+
+export interface WebSocketError {
+    code: number;
+    detail: string;
+}
+
+export interface WebSocketCredentials {
+    scheme: string;
+    credentials: string;
 }

frontend/vite.config.ts

@@ -25,7 +25,8 @@ export default defineConfig({
             "/api": {
                 target: "http://127.0.0.1:8300/",
                 changeOrigin: true,
-                rewrite: (path) => path.replace(/^\/api/, "")
+                rewrite: (path) => path.replace(/^\/api/, ""),
+                ws: true
             }
         },
     },