228 lines
7.8 KiB
HTML
228 lines
7.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>Chat with Websocket</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||
|
|
<style>
|
||
|
|
.chat-box {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 10px;
|
||
|
|
height: 75vh;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea .chat-box::-webkit-scrollbar {
|
||
|
|
width: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-box::-webkit-scrollbar-thumb {
|
||
|
|
background-color: #888;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-box::-webkit-scrollbar-thumb:hover {
|
||
|
|
background-color: #555;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-box::-webkit-scrollbar-track {
|
||
|
|
background: #f1f1f1;
|
||
|
|
}
|
||
|
|
|
||
|
|
form {
|
||
|
|
margin-top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="text"] {
|
||
|
|
width: 100%;
|
||
|
|
margin-right: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
button[type="submit"] {
|
||
|
|
padding: 5px 10px;
|
||
|
|
width: 74px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
|
||
|
|
<div class="container-fluid" style="max-width: 80%">
|
||
|
|
<a class="navbar-brand" href="">Alex-website</a>
|
||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
|
||
|
|
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||
|
|
<ul class="navbar-nav">
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="content" style="padding: 0 10%;">
|
||
|
|
|
||
|
|
<h1>Chat with Websocket</h1>
|
||
|
|
<div>
|
||
|
|
<select id="websocket-select" style="width: 50%;" onchange="change(this)">
|
||
|
|
</select>
|
||
|
|
<button onclick="getWebSocketConnections()">refresh</button>
|
||
|
|
</div>
|
||
|
|
<div class="chat-box" id="chat-box"></div>
|
||
|
|
<form action="">
|
||
|
|
<div class="input-group">
|
||
|
|
<textarea class="form-control" id="messageText" autocomplete="off" placeholder="Type your message..."
|
||
|
|
rows="2" oninput="toggleButtonState()" disabled></textarea>
|
||
|
|
<button type="button" class="btn btn-primary" id="sendButton" disabled><i
|
||
|
|
class="fa-regular fa-paper-plane fa-2xl" style="color: #ffffff;"
|
||
|
|
onclick="sendMessage()"></i></button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://kit.fontawesome.com/1cfcd63e7f.js" crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var pseudo = prompt("Entrez votre nom", "");
|
||
|
|
document.title = "Chat with Websocket : " + pseudo;
|
||
|
|
var chatBox = document.getElementById('chat-box');
|
||
|
|
var ws = new WebSocket(`wss://192.168.1.33:8000/ws/${pseudo}`);
|
||
|
|
|
||
|
|
ws.onmessage = function (event) {
|
||
|
|
var message = event.data;
|
||
|
|
console.log(event)
|
||
|
|
appendMessage(message, true);
|
||
|
|
const data = new URLSearchParams();
|
||
|
|
data.append("message", message);
|
||
|
|
fetch("/onmessage", {
|
||
|
|
method: "POST",
|
||
|
|
body: data,
|
||
|
|
})
|
||
|
|
.then((response) => {
|
||
|
|
if (response.ok) {
|
||
|
|
return response.text();
|
||
|
|
} else {
|
||
|
|
throw new Error("Erreur lors de l'envoi des données.");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then((responseText) => {
|
||
|
|
console.log(responseText); // La réponse du serveur
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
function change(e) {
|
||
|
|
if (e.value == "None") {
|
||
|
|
document.getElementById('messageText').disabled = true;
|
||
|
|
} else {
|
||
|
|
document.getElementById('messageText').disabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleButtonState() {
|
||
|
|
const messageText = document.getElementById('messageText');
|
||
|
|
const sendButton = document.getElementById('sendButton');
|
||
|
|
if (messageText.value.trim() === '') {
|
||
|
|
sendButton.disabled = true;
|
||
|
|
} else {
|
||
|
|
sendButton.disabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendMessage() {
|
||
|
|
const sendButton = document.getElementById('sendButton');
|
||
|
|
sendButton.disabled = true;
|
||
|
|
var message = document.getElementById("messageText").value;
|
||
|
|
|
||
|
|
const select = document.getElementById("websocket-select");
|
||
|
|
let id = select.selectedIndex - 1;
|
||
|
|
const options = select.options;
|
||
|
|
if (id === options.length - 2) {
|
||
|
|
id = "Broadcast"
|
||
|
|
}
|
||
|
|
const data = new URLSearchParams();
|
||
|
|
data.append("message", message);
|
||
|
|
data.append("id", id);
|
||
|
|
data.append("who", pseudo);
|
||
|
|
appendMessage(message, false);
|
||
|
|
ws.send(data)
|
||
|
|
fetch("/onmessage", {
|
||
|
|
method: "POST",
|
||
|
|
body: data,
|
||
|
|
})
|
||
|
|
.then((response) => {
|
||
|
|
if (response.ok) {
|
||
|
|
return response.text();
|
||
|
|
} else {
|
||
|
|
throw new Error("Erreur lors de l'envoi des données.");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then((responseText) => {
|
||
|
|
console.log(responseText); // La réponse du serveur
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
document.getElementById("messageText").value = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
function appendMessage(message, isResponse) {
|
||
|
|
var messageElement = document.createElement('p');
|
||
|
|
messageElement.className = isResponse ? 'text-success' : 'text-primary';
|
||
|
|
messageElement.textContent = isResponse ? message : pseudo + ': ' + message;
|
||
|
|
chatBox.appendChild(messageElement);
|
||
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
function displayConnections(connections) {
|
||
|
|
var websocketSelect = document.getElementById("websocket-select");
|
||
|
|
websocketSelect.innerHTML = "";
|
||
|
|
var option = document.createElement("option");
|
||
|
|
option.value = "None";
|
||
|
|
option.textContent = "Sélectionnez une WebSocket"
|
||
|
|
websocketSelect.appendChild(option);
|
||
|
|
|
||
|
|
if (connections && Array.isArray(connections.connections)) {
|
||
|
|
connections.connections.forEach(function (connection, index) {
|
||
|
|
var option = document.createElement("option");
|
||
|
|
option.value = connection;
|
||
|
|
option.textContent = "Connection " + index + ": " + connection;
|
||
|
|
websocketSelect.appendChild(option);
|
||
|
|
});
|
||
|
|
var option = document.createElement("option");
|
||
|
|
option.value = "Broadcast";
|
||
|
|
option.textContent = "Broadcast"
|
||
|
|
websocketSelect.appendChild(option);
|
||
|
|
} else {
|
||
|
|
console.error("Les connexions ne sont pas au format attendu.");
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function getWebSocketConnections() {
|
||
|
|
fetch("https://192.168.1.33:8000/get_connections")
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
displayConnections(data.connections);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
getWebSocketConnections()
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|