![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/ESP32-WebSerial-Remote-Serial-Monitor-Web-basedl.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\nWe have a similar tutorial for the ESP8266 board: ESP8266 NodeMCU WebSerial Web-based Remote Serial Monitor <\/a><\/p>\n\n\n\n In most of your ESP32 projects, you use the serial monitor to output debugging messages that help you better understand what’s happening with the microcontroller.<\/p>\n\n\n\n You create a Serial communication between your board and your computer, and then you can visualize the messages using the serial monitor. However, when your board is not connected to your computer, you can’t see the debugging messages. <\/p>\n\n\n\n A workaround for this issue is to use a web-based serial monitor\u2014the ESP32 hosts a web server that serves a page to visualize the messages as you would with the “regular” serial monitor. The WebSerial web page also allows you to send data from the web page to your board.<\/p>\n\n\n\n For this tutorial, we’ll use the WebSerial library<\/a>.<\/p>\n\n\n\n If you like this library and you’ll use it in your projects, consider supporting the developer’s work<\/a>.<\/p>\n\n\n\n List of WebSerial features:<\/p>\n\n\n\n Using WebSerial is similar to use the serial monitor. Its main functions are print()<\/span> and println()<\/span>:<\/p>\n\n\n\n For this project, we’ll use the WebSerial.h library<\/a>. To install the library:<\/p>\n\n\n\n You also need to install the ESPAsyncWebServer <\/a>and the AsyncTCP<\/a> libraries. Click the following links to download the libraries’ files.<\/p>\n\n\n\n To install these libraries, click on the previous links to download the libraries’ files. Then, in your Arduino IDE, go to Sketch <\/strong>> Include Library<\/strong> > Add .ZIP Library…<\/strong><\/p>\n\n\n\n If you\u2019re using VS Code with the PlatformIO extension, copy the following to the platformio.ini<\/span> file to include the libraries.<\/p>\n\n\n\n The library provides a simple example about creating the Web Serial Monitor to output and receive messages. We’ve modified the example a bit to make it more interactive.<\/p>\n\n\n\n This example prints Hello!<\/span> to the web-based serial monitor every two seconds. Additionally, you can send messages from the web-based serial monitor to the board. You can send the message ON<\/span> to light up the board’s built-in LED or the message OFF<\/span> to turn it off.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Before uploading the code to your board, don’t forget to insert your network credentials.<\/p>\n\n\n\n In this example, the ESP32 is in station mode. This example also works in access point mode. To learn how to set up your ESP32 as an access point, read:<\/p>\n\n\n\n Continue reading to learn how the code works or skip to the demonstration section<\/a>.<\/p>\n\n\n\n First, you need to include the required libraries for WebSerial. The WiFi.h<\/span> library is needed to connect the ESP32 to a Wi-Fi network.<\/p>\n\n\n\n The WebSerial<\/span> library uses the AsyncTCP<\/span> and the ESPAsyncWebServer<\/span> libraries to create the web-based serial monitor. <\/p>\n\n\n\n Finally, the WebSerial<\/span> library provides easy methods to build the web-based serial monitor.<\/p>\n\n\n\n Create a variable called LED<\/span> for the built-in LED on GPIO 2.<\/p>\n\n\n\n Initialize an AsyncWebServer<\/span> object on port 80 to set up the web server.<\/p>\n\n\n\n Insert your network credentials in the following variables:<\/p>\n\n\n\n The following function receives incoming messages sent from the web-based serial monitor. The message is saved on the d<\/span> variable. Then, it is printed on the web serial monitor using WebSerial.println(d)<\/span>.<\/p>\n\n\n\n Next, we check if the content of the d<\/span> variable is ON<\/span> or OFF<\/span> and light up the LED accordingly.<\/p>\n\n\n\n In the setup()<\/span>, set the LED<\/span> as an OUTPUT<\/span>.<\/p>\n\n\n\n Connect your board to your local network:<\/p>\n\n\n\n Initialize the web-based serial monitor with the begin()<\/span> method on the WebSerial<\/span> object. This function accepts as an argument an AsyncWebServer<\/span> object.<\/p>\n\n\n\n Register the recvMsg()<\/span> as a callback function using the msgCallback()<\/span> method on the WebSerial<\/span> object. The recvMsg()<\/span> function will run whenever you send a message from the monitor to the board.<\/p>\n\n\n\n Finally, initialize the server.<\/p>\n\n\n\n It is just after calling this line that the web-based serial monitor will start working.<\/p>\n\n\n\n In the loop()<\/span>, print the Hello!<\/span> message every 2000 milliseconds (2 seconds) using the println()<\/span> function on the WebSerial<\/span> object.<\/p>\n\n\n\n After inserting your network credentials, you can upload the code to your board.<\/p>\n\n\n\n After uploading, open the “regular” serial monitor at a baud rate of 115200. The board’s IP address will be printed.<\/p>\n\n\n\n Now, open a browser on your local network and type the ESP IP address followed by \/webserial<\/span>. For example, in my case:<\/p>\n\n\n\n The WebSerial page should load.<\/p>\n\n\n\n As you can see, it is printing Hello!<\/span> every two seconds. Additionally, you can send commands to the ESP32. All the commands that you send are printed back on the web serial monitor. You can send the ON<\/span> and OFF<\/span> commands to control the built-in LED.<\/p>\n\n\n\n This was just a simple example showing how you can use the WebSerial library to create a web-based serial monitor to send and receive data.<\/p>\n\n\n\n Now, you can easily add a web-based serial monitor to any of your projects using the WebSerial library<\/a>.<\/p>\n\n\n\n In this quick tutorial, you learned how to create a web-based serial monitor. This is especially useful if your project is not connected to your computer via Serial communication and you still want to visualize debugging messages. The communication between the web-based serial monitor and the ESP32 uses WebSocket protocol.<\/p>\n\n\n\n We hope you find this tutorial useful. We have other web server tutorials you may like:<\/p>\n\n\n\n Learn more about the ESP32 with our resources:<\/p>\n\n\n\n Thank you for reading.<\/p>\n","protected":false},"excerpt":{"rendered":" In this guide, you’ll learn how to create and use a web-based “Serial Monitor” for your ESP32 projects using the WebSerial library. This creates a web-based interface to output debugging … <\/p>\nWeb-based Serial Monitor<\/h2>\n\n\n\n
![\"WebSerial](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/WebSerial-library-ESP32-ESP8266.png?resize=508%2C499&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\nWebSerial Features<\/h3>\n\n\n\n
WebSerial Functions<\/h3>\n\n\n\n
Installing the WebSerial Library<\/h2>\n\n\n\n
![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/Install-Web-Serial-Library.png?resize=786%2C443&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\nlib_deps = ESP Async WebServer\n ayushsharma82\/WebSerial @ ^1.1.0<\/code><\/pre>\n\n\n\nESP32 WebSerial Example<\/h2>\n\n\n\n
\/*\n Rui Santos\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-webserial-library\/\n \n This sketch is based on the WebSerial library example: ESP32_Demo\n https:\/\/github.com\/ayushsharma82\/WebSerial\n*\/\n\n#include <Arduino.h>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <WebSerial.h>\n\n#define LED 2\n\nAsyncWebServer server(80);\n\nconst char* ssid = "REPLACE_WITH_YOUR_SSID"; \/\/ Your WiFi SSID\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD"; \/\/ Your WiFi Password\n\nvoid recvMsg(uint8_t *data, size_t len){\n WebSerial.println("Received Data...");\n String d = "";\n for(int i=0; i < len; i++){\n d += char(data[i]);\n }\n WebSerial.println(d);\n if (d == "ON"){\n digitalWrite(LED, HIGH);\n }\n if (d=="OFF"){\n digitalWrite(LED, LOW);\n }\n}\n\nvoid setup() {\n Serial.begin(115200);\n pinMode(LED, OUTPUT);\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n if (WiFi.waitForConnectResult() != WL_CONNECTED) {\n Serial.printf("WiFi Failed!\\n");\n return;\n }\n Serial.print("IP Address: ");\n Serial.println(WiFi.localIP());\n \/\/ WebSerial is accessible at "<IP Address>\/webserial" in browser\n WebSerial.begin(&server);\n WebSerial.msgCallback(recvMsg);\n server.begin();\n}\n\nvoid loop() {\n WebSerial.println("Hello!");\n delay(2000);\n}\n<\/code><\/pre>\n\tHow the Code Works<\/h3>\n\n\n\n
#include <WiFi.h><\/code><\/pre>\n\n\n\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h><\/code><\/pre>\n\n\n\n#include <WebSerial.h><\/code><\/pre>\n\n\n\n#define LED 2<\/code><\/pre>\n\n\n\nAsyncWebServer server(80);<\/code><\/pre>\n\n\n\nconst char* ssid = \"REPLACE_WITH_YOUR_SSID\"; \/\/ Your WiFi SSID\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\"; \/\/ Your WiFi Password<\/code><\/pre>\n\n\n\nHandling Received Messages<\/h4>\n\n\n\n
void recvMsg(uint8_t *data, size_t len){\n WebSerial.println(\"Received Data...\");\n String d = \"\";\n for(int i=0; i < len; i++){\n d += char(data[i]);\n }\n WebSerial.println(d);<\/code><\/pre>\n\n\n\nif (d == \"ON\"){\n digitalWrite(LED, HIGH);\n}\nif (d==\"OFF\"){\n digitalWrite(LED, LOW);\n}<\/code><\/pre>\n\n\n\nsetup()<\/h4>\n\n\n\n
pinMode(LED, OUTPUT);<\/code><\/pre>\n\n\n\nWiFi.mode(WIFI_STA);\nWiFi.begin(ssid, password);\nif (WiFi.waitForConnectResult() != WL_CONNECTED) {\n Serial.printf(\"WiFi Failed!\\n\");\n return;\n}\nSerial.print(\"IP Address: \");\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\nWebSerial.begin(&server);<\/code><\/pre>\n\n\n\nWebSerial.msgCallback(recvMsg);<\/code><\/pre>\n\n\n\nserver.begin();<\/code><\/pre>\n\n\n\nloop()<\/h4>\n\n\n\n
void loop() {\n WebSerial.println(\"Hello!\");\n delay(2000);\n}<\/code><\/pre>\n\n\n\nDemonstration<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/get-IP-address.png?resize=601%2C525&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n192.168.1.85\/webserial<\/strong><\/code><\/pre>\n\n\n\n![\"Testing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/07\/testing-webserial-basic-example-demonstration.png?resize=604%2C637&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-board-Built_in-LED-turned-on-HIGH.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\nWrapping Up<\/h2>\n\n\n\n