rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP BroadCast working on console... needs more work

Browse source
This commit is contained in:
NigeParis 2025-11-19 18:46:43 +01:00 • committed by Maix0
parent d89c21dd2c
commit 98631be918
13 changed files with 467 additions and 871 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/api/generated/.openapi-generator/FILES
View file

@ -1,7 +1,6 @@
apis/OpenapiOtherApi.ts
apis/index.ts
index.ts
models/ChatTest200Response.ts
models/DisableOtp200Response.ts
models/DisableOtp401Response.ts
models/DisableOtp500Response.ts

82
frontend/src/api/generated/apis/OpenapiOtherApi.ts
View file

@ -15,7 +15,6 @@
import * as runtime from '../runtime';
import type {
ChatTest200Response,
DisableOtp200Response,
DisableOtp401Response,
DisableOtp500Response,
@ -47,8 +46,6 @@ import type {
StatusOtp500Response,
} from '../models/index';
import {
ChatTest200ResponseFromJSON,
ChatTest200ResponseToJSON,
DisableOtp200ResponseFromJSON,
DisableOtp200ResponseToJSON,
DisableOtp401ResponseFromJSON,
@ -130,85 +127,6 @@ export interface SigninRequest {
*/
export class OpenapiOtherApi extends runtime.BaseAPI {
/**
*/
async apiChatSocketIoGetRaw(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<void>> {
const queryParameters: any = {};
const headerParameters: runtime.HTTPHeaders = {};
let urlPath = `/api/chat/socket.io`;
const response = await this.request({
path: urlPath,
method: 'GET',
headers: headerParameters,
query: queryParameters,
}, initOverrides);
// CHANGED: Handle all status codes defined in the OpenAPI spec, not just 2xx responses
// This allows typed access to error responses (4xx, 5xx) and other status codes.
// The code routes responses based on the actual HTTP status code and returns
// appropriately typed ApiResponse wrappers for each status code.
if (response.status === 200) {
// No body response for status 200
return new runtime.VoidApiResponse(response);
}
// CHANGED: Throw error if status code is not handled by any of the defined responses
// This ensures all code paths return a value and provides clear error messages for unexpected status codes
// Only throw if responses were defined but none matched the actual status code
throw new runtime.ResponseError(response, `Unexpected status code: ${response.status}. Expected one of: 200`);
}
/**
*/
async apiChatSocketIoGet(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<void> {
await this.apiChatSocketIoGetRaw(initOverrides);
}
/**
*/
async chatTestRaw(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<ChatTest200Response | StatusOtp401Response>> {
const queryParameters: any = {};
const headerParameters: runtime.HTTPHeaders = {};
let urlPath = `/api/chat/test`;
const response = await this.request({
path: urlPath,
method: 'GET',
headers: headerParameters,
query: queryParameters,
}, initOverrides);
// CHANGED: Handle all status codes defined in the OpenAPI spec, not just 2xx responses
// This allows typed access to error responses (4xx, 5xx) and other status codes.
// The code routes responses based on the actual HTTP status code and returns
// appropriately typed ApiResponse wrappers for each status code.
if (response.status === 200) {
// Object response for status 200
return new runtime.JSONApiResponse(response, (jsonValue) => ChatTest200ResponseFromJSON(jsonValue));
}
if (response.status === 401) {
// Object response for status 401
return new runtime.JSONApiResponse(response, (jsonValue) => StatusOtp401ResponseFromJSON(jsonValue));
}
// CHANGED: Throw error if status code is not handled by any of the defined responses
// This ensures all code paths return a value and provides clear error messages for unexpected status codes
// Only throw if responses were defined but none matched the actual status code
throw new runtime.ResponseError(response, `Unexpected status code: ${response.status}. Expected one of: 200, 401`);
}
/**
*/
async chatTest(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<ChatTest200Response | StatusOtp401Response> {
const response = await this.chatTestRaw(initOverrides);
return await response.value();
}
/**
*/
async disableOtpRaw(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<DisableOtp200Response | DisableOtp401Response | DisableOtp500Response>> {

1
frontend/src/api/generated/models/index.ts
View file

@ -1,6 +1,5 @@
/* tslint:disable */
/* eslint-disable */
export * from './ChatTest200Response';
export * from './DisableOtp200Response';
export * from './DisableOtp401Response';
export * from './DisableOtp500Response';

2
frontend/src/pages/chat/chat.html
View file

@ -6,7 +6,7 @@
<h1 class="text-3xl font-bold text-gray-800">
Chat Box <span id="t-username"></span>
</h1><br>
<button id="b-logout" class="btn-style absolute top-6 right-6">Kill Server</button>
<button id="b-logout" class="btn-style absolute top-6 right-6">Clear Text</button>

86
frontend/src/pages/chat/chat.ts
View file

@ -2,7 +2,7 @@ import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn }
import { showError } from "@app/toast";
import authHtml from './chat.html?raw';
import client from '@app/api'
import { updateUser } from "@app/auth";
import { getUser, updateUser } from "@app/auth";
import io from "socket.io-client";
@ -18,10 +18,11 @@ const socket = io("wss://localhost:8888", {
socket.on("connect", async () => {
console.log("I AM Connected to the server: ", socket.id);
// Emit a custom event 'coucou' with some data
socket.emit("coucou", { message: "Hello Nigel from coucou!" });
//socket.emit("coucou", { message: " Nigel from coucou!" });
console.log('sent console.log coucou');
//socket.emit('testend', socket.id);
// Send a message to the server
socket.send("Hello from the client: " + `${socket.id}`);
//socket.send(" from the client: " + `${socket.id}`);
});
@ -53,39 +54,70 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const sendButton = document.getElementById('b-send') as HTMLButtonElement;
const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement;
const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement;
const blogout = document.getElementById('b-logout') as HTMLButtonElement;
const clearText = document.getElementById('b-logout') as HTMLButtonElement;
const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
const username = document.getElementById('username') as HTMLDivElement;
const value = await client.chatTest();
if (value.kind === "success") {
console.log(value.payload);
}
else if (value.kind === "notLoggedIn") {
// const value = await client.chatTest();
// if (value.kind === "success") {
// console.log(value.payload);
// }
// else if (value.kind === "notLoggedIn") {
} else {
console.log('unknown response: ', value);
}
// } else {
// console.log('unknown response: ', value);
// }
// Add a new message to the chat display
const addMessage = (text: any) => {
const messageElement = document.createElement('div');
messageElement.textContent = JSON.stringify(text, null, 2);
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight; //puts scroll to the bottom
};
// Helper to add a message locally
sendButton!.addEventListener('click', async () => {
let msgtext: string = sendtextbox.value;
const addMessage = (text: string) => {
if (!chatWindow) return;
const messageElement = document.createElement("div");
messageElement.textContent = text;
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
};
if (msgtext) {
addMessage(msgtext);
sendtextbox.value = "";
}
});
// Send button
sendButton?.addEventListener("click", () => {
if (sendtextbox && sendtextbox.value.trim()) {
const msgText = sendtextbox.value.trim();
addMessage(msgText);
chatWindow.textContent = "helloWorld";
const user = getUser();
if (user && socket?.connected) {
const message = {
type: "chat",
user: user.name,
id: document.cookie,
text: msgText,
timestamp: Date.now(),
userID: socket.id,
};
socket.send(JSON.stringify(message));
}
sendtextbox.value = "";
}
});
// Clear Text button
clearText?.addEventListener("click", () => {
if (chatWindow) {
chatWindow.innerHTML = '';
}
});
// Enter key to send message
sendtextbox!.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
sendButton?.click();
}
});
chatWindow.textContent = "World";
// Whoami button to display user name
bwhoami?.addEventListener('click', async () => {

72
frontend/src/pages/chat/socket_client.ts
View file

@ -1,48 +1,48 @@
////WORKING ON THE SEPARATE NONO FUCTIONNELING SOCKET CLIENT TO BE IMPORTED INTO CHAT.TS////
import io from "socket.io-client";
// import io from "socket.io-client";
// const socket = io("wss://localhost:8888");
// // const socket = io("wss://localhost:8888");
export const socket = io("wss://localhost:8888", {
path: "/api/chat/socket.io/",
secure: false,
transports: ["websocket"],
});
// export const socket = io("wss://localhost:8888", {
// path: "/api/chat/socket.io/",
// secure: false,
// transports: ["websocket"],
// });
// Listen for the 'connect' event
socket.on("connect", async () => {
console.log("I AM Connected to the server: ", socket.id);
// Emit a custom event 'coucou' with some data
socket.emit("MsgObjectClient", { message: "Hello Nigel from coucou!" });
console.log('sent console.log coucou');
// Send a message to the server
socket.send("Hello from the client: " + `${socket.id}`);
console.log("MESSAGE REPLY RETURNED FROM SERVER =====>: ", socket.emit("Hello", {hello: "Hello Nigel from coucou!"}).id);
});
// // Listen for the 'connect' event
// socket.on("connect", async () => {
// console.log("I AM Connected to the server: ", socket.id);
// // Emit a custom event 'coucou' with some data
// socket.emit("MsgObjectClient", { message: " Nigel from coucou!" });
// console.log('sent console.log coucou');
// // Send a message to the server
// socket.send(" from the client: " + `${socket.id}`);
// console.log("MESSAGE REPLY RETURNED FROM SERVER =====>: ", socket.emit("", {: " Nigel from coucou!"}).id);
// });
// Listen for messages from the server
socket.on("MsgObjectServer", (data) => {
console.log("Message from server:", data);
});
// // Listen for messages from the server
// socket.on("MsgObjectServer", (data) => {
// console.log("Message from server:", data);
// });
socket.on("Hello", (data) => {
console.log("MESSAGE REPLY RETURNED FROM SERVER =====>:", data);
});
// socket.on("", (data) => {
// console.log("MESSAGE REPLY RETURNED FROM SERVER =====>:", data);
// });
// Disconnected
socket.on("disconnect", (reason) => {
console.log("Socket disconnected:", reason);
});
// // Disconnected
// socket.on("disconnect", (reason) => {
// console.log("Socket disconnected:", reason);
// });
// Socket.IO connection errors
socket.on("connect_error", (err) => {
console.error("Connection error:", err.message);
});
// // Socket.IO connection errors
// socket.on("connect_error", (err) => {
// console.error("Connection error:", err.message);
// });
// Server-side errors
socket.on("error", (err) => {
console.error("Socket error:", err);
});
// // Server-side errors
// socket.on("error", (err) => {
// console.error("Socket error:", err);
// });