Home
Arduino UNO R4

Arduino WebChat-Beispiel – Interaktives Chat-Interface-Tutorial

WebChat-Beispiel - Installationsanleitung

Überblick

Das WebChat-Beispiel demonstriert, wie man eine interaktive Chat-Schnittstelle zwischen einem Webbrowser und Arduino erstellt. Es ist für die Arduino Uno R4 WiFi- und DIYables STEM V4 IoT-Bildungsplattform mit erweiterten IoT-Fähigkeiten und nahtloser Integration integrierter Sensoren ausgelegt. Der Arduino kann intelligent auf Nachrichten reagieren und Hardware basierend auf Chat-Befehlen steuern.

Arduino WebChat-Beispiel – Tutorial zur interaktiven Chat-Oberfläche

Funktionen

  • Chat in Echtzeit: Sofortnachrichten über WebSocket
  • Intelligente Antworten: Arduino liefert kontextbezogene Antworten
  • LED-Steuerung: Steuerung der integrierten LED über Chat-Befehle
  • Nutzererkennung: Arduino erinnert sich an Ihren Namen
  • Nachrichtenverlauf: Gesprächsverlauf anzeigen
  • Responsives Design: Funktioniert auf Desktop und Mobilgeräten
  • Plattform-Erweiterbarkeit: Derzeit für Arduino Uno R4 WiFi implementiert, kann aber auf andere Hardware-Plattformen erweitert werden. Siehe DIYables_WebApps_ESP32

Erforderliche Hardware

1×Arduino UNO R4 WiFi
1×Alternativ: DIYables STEM V4 IoT
1×USB-Kabel Typ-A zu Typ-C (für USB-A PC)
1×USB-Kabel Typ-C zu Typ-C (für USB-C PC)
1×(Empfohlen) Schraubklemmenblock-Shield für Arduino Uno R4
1×(Empfohlen) Breadboard-Shield für Arduino Uno R4
1×(Empfohlen) Gehäuse für Arduino Uno R4
1×(Empfohlen) Stromverteiler für Arduino Uno R4
1×(Empfohlen) Prototyping-Grundplatte & Breadboard-Kit für Arduino Uno

Oder Sie können die folgenden Kits kaufen:

1×DIYables STEM V4 IoT Starter-Kit (Arduino enthalten)
1×DIYables Sensor-Kit (30 Sensoren/Displays)
1×DIYables Sensor-Kit (18 Sensoren/Displays)
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.

Installationsanleitung

Schnelle Schritte

Folgen Sie diesen Anweisungen Schritt für Schritt:

  • Wenn Sie dies zum ersten Mal verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE.
  • Verbinden Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board über ein USB-Kabel mit Ihrem Computer.
  • Öffnen Sie die Arduino IDE auf Ihrem Computer.
  • Wählen Sie das passende Arduino Uno R4‑Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
  • Navigieren Sie zum Bibliotheken-Symbol in der linken Leiste der Arduino IDE.
  • Suchen Sie "DIYables WebApps", und finden Sie dann die DIYables WebApps-Bibliothek von DIYables.
  • Klicken Sie auf die Installieren-Schaltfläche, um die Bibliothek zu installieren.
Arduino UNO R4 DIYables WebApps-Bibliothek
  • Sie werden dazu aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren.
  • Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
Arduino UNO R4 DIYables Web-Apps-Abhängigkeit
  • In der Arduino IDE gehen Sie zu Datei Beispiele DIYables WebApps WebChat Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein
/* * DIYables WebApp Library - WebChat Example * * This example demonstrates the WebChat feature: * - Interactive chat interface * - Intelligent Arduino responses * - Built-in LED control via chat commands * * Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT * * Setup: * 1. Update WiFi credentials below * 2. Upload the sketch to your Arduino * 3. Open Serial Monitor to see the IP address * 4. Navigate to http://[IP_ADDRESS]/chat */ #include <DIYablesWebApps.h> // WiFi credentials - UPDATE THESE WITH YOUR NETWORK const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create WebApp server and page instances UnoR4ServerFactory serverFactory; DIYablesWebAppServer webAppsServer(serverFactory, 80, 81); DIYablesHomePage homePage; DIYablesWebChatPage chatPage; // Chat variables String userName = ""; int chatCount = 0; void setup() { Serial.begin(9600); delay(1000); Serial.println("DIYables WebApp - WebChat Example"); // Add only home and webchat pages webAppsServer.addApp(&homePage); webAppsServer.addApp(&chatPage); // Optional: Add 404 page for better user experience (local object) webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); // Initialize LED for chat commands pinMode(LED_BUILTIN, OUTPUT); // Start the WebApp server if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) { while (1) { Serial.println("Failed to start WebApp server!"); delay(1000); } } // Set up chat callback chatPage.onChatMessage([](const String& message) { chatCount++; Serial.println("Chat message #" + String(chatCount) + ": " + message); String response = ""; String lowerMessage = message; lowerMessage.toLowerCase(); // Process chat commands if (lowerMessage.indexOf("hello") >= 0 || lowerMessage.indexOf("hi") >= 0) { response = "Hello! I'm your Arduino assistant. Try saying 'led on' or 'led off' to control the LED!"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("led on") >= 0 || lowerMessage.indexOf("light on") >= 0) { digitalWrite(LED_BUILTIN, HIGH); response = "LED is now ON! ✨"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("led off") >= 0 || lowerMessage.indexOf("light off") >= 0) { digitalWrite(LED_BUILTIN, LOW); response = "LED is now OFF! 💡"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("status") >= 0) { String ledStatus = digitalRead(LED_BUILTIN) ? "ON" : "OFF"; response = "Arduino Status: LED is " + ledStatus + ", Uptime: " + String(millis() / 1000) + " seconds"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("help") >= 0) { response = "Available commands: 'led on', 'led off', 'status', 'help'. Just chat with me!"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("time") >= 0) { response = "Arduino has been running for " + String(millis() / 1000) + " seconds."; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("name") >= 0) { response = "I'm your Arduino Uno R4 WiFi! What's your name?"; chatPage.sendToChat(response); return; } // General responses String responses[] = { "That's interesting! Tell me more.", "I understand! As an Arduino, I love processing your messages.", "Cool! I'm here and ready to help.", "Thanks for chatting with me! Try 'led on' to see something happen.", "I'm just an Arduino, but I enjoy our conversation!" }; response = responses[chatCount % 5]; chatPage.sendToChat(response); }); // Send welcome message chatPage.sendToChat("Arduino Chat Bot is online! 🤖"); chatPage.sendToChat("Say 'hello' or 'help' to get started!"); } void loop() { // Handle WebApp server communications webAppsServer.loop(); // Add your main application code here delay(10); }
  • Konfigurieren Sie die WLAN-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
  • Klicken Sie im Arduino IDE auf die Schaltfläche Hochladen, um Code auf Arduino UNO R4/DIYables STEM V4 IoT hochzuladen
  • Öffnen Sie den seriellen Monitor.
  • Überprüfen Sie das Ergebnis im seriellen Monitor. Es sieht so aus, wie unten gezeigt.
COM6
Send
DIYables WebApp - WebChat Example INFO: Added app / INFO: Added app /chat DIYables WebApp Library Platform: Arduino Uno R4 WiFi Network connected! IP address: 192.168.0.2 HTTP server started on port 80 Configuring WebSocket server callbacks... WebSocket server started on port 81 WebSocket URL: ws://192.168.0.2:81 WebSocket server started on port 81 ========================================== DIYables WebApp Ready! ========================================== 📱 Web Interface: http://192.168.0.2 🔗 WebSocket: ws://192.168.0.2:81 📋 Available Applications: 🏠 Home Page: http://192.168.0.2/ 💬 WebChat: http://192.168.0.2/chat ==========================================
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Wenn Sie nichts sehen, starten Sie das Arduino-Board neu.
  • Merken Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
  • Beispiel: http://192.168.0.2
  • Sie sehen die Startseite wie im unten stehenden Bild:
Arduino UNO R4 DIYables Web-App-Startseite mit Web-Chat-App
  • Klicken Sie auf den Chat-Link; Sie sehen die Benutzeroberfläche der Web-Chat-App wie unten dargestellt:
Arduino UNO R4 DIYables Web-App Web-Chat-App
  • Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /chat. Zum Beispiel: http://192.168.0.2/chat
  • Beginnen Sie mit Ihrem Arduino zu chatten! Geben Sie Ihren Namen ein, wenn Sie dazu aufgefordert werden, und probieren Sie Befehle wie "led on", "hello" oder "help" aus, um mit Ihrem Arduino zu interagieren.

Wie man es verwendet

Ein Gespräch beginnen

  1. Öffne die Chat-Oberfläche in deinem Browser
  2. Gib deinen Namen ein, wenn du dazu aufgefordert wirst
  3. Beginne mit dem Chatten mit deinem Arduino!

Chatbefehle

Der Arduino erkennt diese speziellen Befehle:

LED-Steuerung
  • "LED an" oder "LED einschalten" → Schaltet die eingebaute LED ein
  • "LED aus" oder "LED ausschalten" → Schaltet die eingebaute LED aus
  • "blinken" oder "LED blinken" → Lässt die LED blinken
Befehle zur Information
  • "Hallo" oder "Hi" → Freundliche Begrüßung
  • "Hilfe" → Zeigt verfügbare Befehle
  • "Zeit" → Zeigt Arduino-Betriebszeit
  • "Status" → Zeigt Systemstatus
Fragen
  • "Wie geht es dir?" → Arduino teilt seinen Status
  • "Was kannst du tun?" → Listet Fähigkeiten auf
  • "Wie heißt du?" → Arduino stellt sich vor

Beispielgespräch

You: Hello Arduino: Hi there! I'm your Arduino assistant. What's your name? You: My name is John Arduino: Nice to meet you, John! I'm ready to help. You: led on Arduino: LED turned ON for you, John! 💡 You: what can you do? Arduino: I can control LEDs, respond to your messages, and remember your name. Try saying 'help' for commands! You: help Arduino: Available commands: * 'led on/off' - Control LED * 'blink' - Blink LED * 'status' - Show system info * 'time' - Show uptime

Kreative Anpassung – Baue deinen interaktiven Assistenten

Verwandle dieses einfache Chat-Beispiel in etwas Erstaunliches! Das modulare Design ermöglicht es dir, die Funktionalität anzupassen und zu erweitern, um deinen eigenen einzigartigen interaktiven Arduino-Assistenten zu erstellen.

Code-Struktur

Hauptkomponenten

  1. WebApp-Server: Verwaltet HTTP- und WebSocket-Verbindungen
  2. Chat-Seite: Stellt die Weboberfläche bereit
  3. Nachrichten-Handler: Verarbeitet eingehende Chat-Nachrichten
  4. Antwortgenerator: Erstellt intelligente Antworten

Kernfunktionen

// Handle incoming chat messages void handleChatMessage(String message, String clientId) { // Process message and generate response } // Send message to web interface void sendChatResponse(String response, String clientId) { // Send response via WebSocket }

Benutzerdefinierte Befehle hinzufügen

Um neue Chatbefehle hinzuzufügen, passen Sie die Funktion handleChatMessage an:

if (message.indexOf("your_command") >= 0) { response = "Your custom response"; // Add your custom action here }

Anpassungsoptionen

Arduino-Persönlichkeit anpassen

Bearbeiten Sie die Antwortnachrichten, um die Persönlichkeit von Arduino zu ändern:

String greetings[] = { "Hello! How can I help you today?", "Hi there! Ready to chat?", "Greetings! What's on your mind?" };

Hardware-Steuerung hinzufügen

Erweitern Sie die LED-Steuerung auf andere Komponenten:

// Control servo motor if (message.indexOf("move servo") >= 0) { servo.write(90); response = "Servo moved to 90 degrees!"; } // Read sensor data if (message.indexOf("temperature") >= 0) { float temp = getTemperature(); response = "Current temperature: " + String(temp) + "°C"; }

Design der Weboberfläche ändern

Die Chat-Oberfläche lässt sich durch das Ändern von CSS in den Bibliotheksdateien anpassen:

  • Farben: Farbverläufe bearbeiten
  • Schriftarten: Schriftarten ändern
  • Layout: Abstände und Größen anpassen

Fehlerbehebung

Häufige Probleme

  1. Arduino reagiert nicht auf Nachrichten
  • Überprüfe den seriellen Monitor auf Fehlermeldungen
  • Überprüfe den Status der WebSocket-Verbindung
  • Lade die Browserseite neu

2. WLAN-Verbindung fehlgeschlagen

  • SSID und Passwort erneut überprüfen
  • Stellen Sie sicher, dass das 2,4-GHz-Netzwerk verwendet wird (nicht 5-GHz)
  • Signalstärke überprüfen
  1. Kann nicht auf die Chat-Seite zugreifen
  • Überprüfe, ob die IP-Adresse korrekt ist
  • Prüfe, ob der Arduino noch mit dem WLAN verbunden ist
  • Versuche zuerst, die Startseite zu erreichen: http://[IP]/

4. LED reagiert nicht auf Befehle

  • Verdrahtung prüfen (integrierte LED sollte standardmäßig funktionieren)
  • Befehle auf korrekte Schreibweise prüfen
  • Seriellen Monitor auf Debug-Nachrichten prüfen

Debugging-Tipps

Aktiviere den Debug-Modus, indem du diese Zeile in setup() hinzufügst:

Serial.println("Debug mode enabled");

Serielle Ausgabe überwachen, um Folgendes zu sehen:

  • Eingehende Nachrichten
  • Befehlsparsing
  • Antwortgenerierung
  • Hardware-Aktionen

Erweiterte Funktionen

Unterstützung mehrerer Clients

Der Chat unterstützt mehrere Benutzer gleichzeitig:

  • Jeder Benutzer hat eine einzigartige Sitzung
  • Arduino merkt sich individuelle Namen
  • Broadcast-Nachrichten an alle Benutzer senden

Nachrichtenpersistenz

Nachrichtenprotokollierung zum EEPROM hinzufügen:

#include <EEPROM.h> void saveMessage(String message) { // Save to EEPROM for persistence }

Integration mit Sensoren

Sensoren anschließen und sie über den Chat zugänglich machen:

// Temperature sensor if (message.indexOf("temperature") >= 0) { float temp = analogRead(A0) * 0.1; // Example conversion response = "Temperature: " + String(temp) + "°C"; }

Nächste Schritte

Nachdem Sie das Chat-Beispiel gemeistert haben, versuchen Sie es:

  1. WebMonitor - Zur Fehlersuche und Entwicklung
  2. DigitalPins - Zur Steuerung mehrerer Ausgänge
  3. Joystick - Zur Richtungssteuerung
  4. MultipleWebApps - Alle Funktionen kombinieren

Unterstützung

Für weitere Hilfe:

  • Überprüfen Sie die API-Referenzdokumentation
  • Besuchen Sie die DIYables-Tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
  • Arduino-Community-Foren

Verwandte Tutorials

※ UNSERE NACHRICHTEN

  • Sie können gerne den Link zu diesem Tutorial teilen. Bitte verwenden Sie jedoch unsere Inhalte nicht auf anderen Websites. Wir haben viel Mühe und Zeit in die Erstellung der Inhalte investiert, bitte respektieren Sie unsere Arbeit!
OFFENLEGUNG
Newbiely.de ist Teilnehmer des Amazon Services LLC Associates Program, einem Affiliate-Werbeprogramm, das entwickelt wurde, um Websites eine Möglichkeit zu bieten, Werbegebühren durch Werbung und Verlinkung zu Amazon.com, Amazon.it, Amazon.de, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl und Amazon.se zu verdienen
Copyright © 2025 Newbiely.de. Alle Rechte vorbehalten.
Allgemeine Geschäftsbedingungen | Datenschutzrichtlinie
Email: newbiely.com@gmail.com