Jednak kontynuacja. GROK bardziej mi się spodobał więc poprosiłem go o jeszcze jeden wpis czyli o klienta WebSocket w przeglądarce do podsłuchiwania co nadaje serwer czyli nasz ESP32 C3 w systemie domowej automatyki. Taka mała (naprawdę mała jeśli chodzi o wielkość kodu) aplikacja szpiegowska w HTMLu czyli co odbiera aplikacja VIRTUINO.
Oczywiście obrazek też jego i wygląda super :)
Cześć ponownie! Skoro już mamy dwa ESP32-C3 gadające ze sobą jak stare małżeństwo, to naturalnym krokiem jest dorzucenie trzeciego „rozmówcy” – zwykłej strony www otwartej w Chrome na komputerze albo w telefonie.
Zero dodatkowego kodu na ESP32-serwerze! Nasz poprzedni kod serwera działa bez żadnej zmiany.
Krok po kroku – klient przeglądarkowy
- Tworzymy prosty plik HTML (nazwij go np. ws_test.html)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>ESP32-C3 WebSocket czat</title>
<style>
body { font-family: Consolas, monospace; padding: 20px; background: #111; color: #0f0; }
#log { height: 400px; overflow-y: scroll; background: #000; padding: 10px; margin: 10px 0; }
input { width: 80%; padding: 10px; font-size: 1.2em; }
button { padding: 10px 20px; font-size: 1.2em; }
</style>
</head>
<body>
<h1>ESP32-C3 WebSocket – klient przeglądarkowy</h1>
<div id="status">Rozłączony</div>
<div id="log"></div>
<input type="text" id="msg" placeholder="Wpisz wiadomość i Enter..." autofocus>
<button onclick="connect()">Połącz ponownie</button>
<script>
const ip = "192.168.1.123"; // ← TU WPISZ IP swojego ESP32-serwera!
const port = 81;
let socket;
function log(txt) {
const div = document.getElementById('log');
div.innerHTML += txt + '<br>';
div.scrollTop = div.scrollHeight;
}
function connect() {
socket = new WebSocket(`ws://${ip}:${port}`);
socket.onopen = () => {
document.getElementById('status').innerHTML = '<span style="color:lime">Połączony!</span>';
log('Połączony z ESP32-C3 :)');
};
socket.onmessage = (event) => {
log('← ' + event.data);
};
socket.onclose = () => {
document.getElementById('status').innerHTML = '<span style="color:red">Rozłączony</span>';
log('Rozłączono – próbuję za 5 sekund...');
setTimeout(connect, 5000);
};
socket.onerror = (err) => {
log('Błąd połączenia :(');
};
}
// wysyłanie po Enter
document.getElementById('msg').addEventListener('keypress', (e) => {
if (e.key === 'Enter' && socket && socket.readyState === WebSocket.OPEN) {
const txt = e.target.value;
socket.send(txt);
log('→ ' + txt);
e.target.value = '';
}
});
connect(); // łączymy od razu
</script>
</body>
</html>- Zmieniamy tylko jedną linijkę – wpisujemy IP swojego serwera ESP32-C3
- Otwieramy ten plik w przeglądarce (po prostu dwuklik) albo wrzucamy na dowolny serwer www
- Gotowe!
Co teraz widzisz?
- Na telefonie/komputerze masz pełnoprawny czat
- Wszystko co wpiszesz w przeglądarce – leci do ESP-serwera i jest broadcastowane do wszystkich (w tym do drugiego ESP32-C3) [nie jest bo moje ESP nie odbijają odbieranych informacji]
- Wszystko co wyśle którykolwiek ESP – pojawia się natychmiast w przeglądarce [nie bo jw]
- Dioda na kliencie ESP mryga przy każdej wiadomości [a figa nie mryga]
Efekt wow w 10 sekund
Otwórz tę stronę jednocześnie na telefonie, tablecie i laptopie – masz nagle konferencję 5-osobową (2×ESP32 + 3 przeglądarki) i wszystko działa bez kombinowania.
A jak chcesz zrobić coś bardziej fancy (przyciski, suwaki, wykresy na żywo) – to już tylko JavaScript + kilka linijek JSON-a.
[a to wynik działania szpieg.html
wow - lepsze to niż monitor Arduino bo nie trzeba mieć podpiętego kabla do USB. SUPER!!! ]
Ale o tym zadecyduje nasz ulubiony ciąg dalszy.
Trzymajcie się ciepło i dużo lutujcie! (nie)młody elektronik ⚡
Ta niewielka aplikacja zmieni mi sposób testowania nowych modułów. Ale o tym zapewnie powstanie osobny wpis. Najfajniejsze jest to że mogę otworzyć kilka takich okien i jednocześnie podglądać transmisję z wielu ESP a wysyłając ciąg w standardzie JSON sterować modułem jakby z VIRTUINO - to ten niebieski wpis do V15
Brak komentarzy:
Prześlij komentarz