Initial commit
This commit is contained in:
78
Esp32_Client/Esp32_Client.ino
Normal file
78
Esp32_Client/Esp32_Client.ino
Normal file
@@ -0,0 +1,78 @@
|
||||
#include <Arduino.h>
|
||||
#include <SPIFFS.h>
|
||||
#include <WiFi.h>
|
||||
#include <AsyncTCP.h>
|
||||
#include <ESPAsyncWebSrv.h>
|
||||
|
||||
const char* ssid = "Box-gut-2.4G";
|
||||
const char* password = "Rut@b@g@93";
|
||||
AsyncWebServer server(80);
|
||||
|
||||
void connectToWiFi() {
|
||||
WiFi.begin(ssid, password);
|
||||
|
||||
Serial.print("Connexion en cours au réseau Wi-Fi...");
|
||||
while (WiFi.status() != WL_CONNECTED) {
|
||||
delay(1000);
|
||||
Serial.print(".");
|
||||
}
|
||||
Serial.println("\nConnecté au réseau Wi-Fi");
|
||||
}
|
||||
|
||||
|
||||
|
||||
void setupSPIFFS() {
|
||||
if (SPIFFS.begin()) {
|
||||
Serial.println("Système de fichiers SPIFFS monté avec succès");
|
||||
} else {
|
||||
Serial.println("Erreur lors du montage du système de fichiers SPIFFS");
|
||||
}
|
||||
if (SPIFFS.exists("/new_img.h")) {
|
||||
|
||||
|
||||
if (SPIFFS.remove("/current_img.h")) {
|
||||
Serial.println("Le fichier a été supprimé avec succès.");
|
||||
} else {
|
||||
Serial.println("Erreur lors de la suppression du fichier.");
|
||||
}
|
||||
|
||||
if (SPIFFS.rename("/new_img.h", "/current_img.h")) {
|
||||
Serial.println("Le fichier a été renommé avec succès.");
|
||||
esp_restart();
|
||||
} else {
|
||||
Serial.println("Erreur lors du renommage du fichier.");
|
||||
}
|
||||
|
||||
} else {
|
||||
Serial.println("Le fichier spécifique n'existe pas.");
|
||||
}
|
||||
|
||||
}
|
||||
void setup()
|
||||
{
|
||||
|
||||
Serial.begin(115200);
|
||||
setupSPIFFS();
|
||||
connectToWiFi();
|
||||
|
||||
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
|
||||
request->send(SPIFFS, "/index.html");
|
||||
});
|
||||
|
||||
server.on("/onmessage", HTTP_POST, [](AsyncWebServerRequest *request){
|
||||
// Obtenir le corps de la requête JSON
|
||||
|
||||
String message = request->getParam("message", true)->value();;
|
||||
Serial.println(message);
|
||||
|
||||
request->send(200, "text/plain", "Données JSON reçues avec succès !");
|
||||
});
|
||||
|
||||
|
||||
server.begin();
|
||||
}
|
||||
|
||||
|
||||
void loop()
|
||||
{
|
||||
}
|
||||
228
Esp32_Client/data/index.html
Normal file
228
Esp32_Client/data/index.html
Normal file
@@ -0,0 +1,228 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user