WIP BroadCast working on console... needs more work
This commit is contained in:
NigeParis
Maix0
parent
d89c21dd2c
commit
98631be918
13 changed files with 467 additions and 871 deletions
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// });
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue