"use strict";(self.webpackChunkwebserial_docs=self.webpackChunkwebserial_docs||[]).push([[162],{3905:(e,n,i)=>{i.d(n,{Zo:()=>d,kt:()=>b});var t=i(7294);function r(e,n,i){return n in e?Object.defineProperty(e,n,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[n]=i,e}function a(e,n){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),i.push.apply(i,t)}return i}function l(e){for(var n=1;n<arguments.length;n++){var i=null!=arguments[n]?arguments[n]:{};n%2?a(Object(i),!0).forEach((function(n){r(e,n,i[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):a(Object(i)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(i,n))}))}return e}function s(e,n){if(null==e)return{};var i,t,r=function(e,n){if(null==e)return{};var i,t,r={},a=Object.keys(e);for(t=0;t<a.length;t++)i=a[t],n.indexOf(i)>=0||(r[i]=e[i]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)i=a[t],n.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(r[i]=e[i])}return r}var o=t.createContext({}),c=function(e){var n=t.useContext(o),i=n;return e&&(i="function"==typeof e?e(n):l(l({},n),e)),i},d=function(e){var n=c(e.components);return t.createElement(o.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return t.createElement(t.Fragment,{},n)}},u=t.forwardRef((function(e,n){var i=e.components,r=e.mdxType,a=e.originalType,o=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),u=c(i),b=r,S=u["".concat(o,".").concat(b)]||u[b]||p[b]||a;return i?t.createElement(S,l(l({ref:n},d),{},{components:i})):t.createElement(S,l({ref:n},d))}));function b(e,n){var i=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=i.length,l=new Array(a);l[0]=u;var s={};for(var o in n)hasOwnProperty.call(n,o)&&(s[o]=n[o]);s.originalType=e,s.mdxType="string"==typeof e?e:r,l[1]=s;for(var c=2;c<a;c++)l[c]=i[c];return t.createElement.apply(null,l)}return t.createElement.apply(null,i)}u.displayName="MDXCreateElement"},9390:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>o,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>c});var t=i(7462),r=(i(7294),i(3905));const a={title:"Getting Started",sidebar_label:"Getting Started",sidebar_position:3},l="Getting Started",s={unversionedId:"getting-started",id:"getting-started",title:"Getting Started",description:"This guide will help you integrate WebSerial into your project. WebSerial allows you to log, monitor or debug your firmware without being connected by wire.",source:"@site/docs/getting-started.md",sourceDirName:".",slug:"/getting-started",permalink:"/getting-started",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Getting Started",sidebar_label:"Getting Started",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Installation",permalink:"/installation"},next:{title:"Examples",permalink:"/examples"}},o={},c=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Step-by-Step Guide",id:"step-by-step-guide",level:2},{value:"1. Include Necessary Libraries",id:"1-include-necessary-libraries",level:3},{value:"2. Create Server Instance",id:"2-create-server-instance",level:3},{value:"3. Define WiFi Credentials",id:"3-define-wifi-credentials",level:3},{value:"4. Setup Function",id:"4-setup-function",level:3},{value:"5. Loop Function",id:"5-loop-function",level:3},{value:"Full Example Code",id:"full-example-code",level:3}],d={toc:c};function p(e){let{components:n,...i}=e;return(0,r.kt)("wrapper",(0,t.Z)({},d,i,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"getting-started"},"Getting Started"),(0,r.kt)("p",null,"This guide will help you integrate WebSerial into your project. WebSerial allows you to log, monitor or debug your firmware without being connected by wire."),(0,r.kt)("h2",{id:"prerequisites"},"Prerequisites"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"A supported wireless microcontroller ( Check list ",(0,r.kt)("a",{parentName:"li",href:"https://github.com/ayushsharma82/WebSerial/tree/master?tab=readme-ov-file#supported-mcus"},"here")," )"),(0,r.kt)("li",{parentName:"ul"},"Arduino IDE with the necessary board packages installed"),(0,r.kt)("li",{parentName:"ul"},"WebSerial dependencies installed")),(0,r.kt)("h2",{id:"step-by-step-guide"},"Step-by-Step Guide"),(0,r.kt)("h3",{id:"1-include-necessary-libraries"},"1. Include Necessary Libraries"),(0,r.kt)("p",null,"Start by including the required libraries in your code. This ensures your code can use WiFi and WebSerial functionalities."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cpp"},"#include <Arduino.h>\n#if defined(ESP8266)\n  #include <ESP8266WiFi.h>\n  #include <ESPAsyncTCP.h>\n#elif defined(ESP32)\n  #include <WiFi.h>\n  #include <AsyncTCP.h>\n#endif\n#include <ESPAsyncWebServer.h>\n#include <WebSerial.h>\n")),(0,r.kt)("h3",{id:"2-create-server-instance"},"2. Create Server Instance"),(0,r.kt)("p",null,"Create an instance of ",(0,r.kt)("inlineCode",{parentName:"p"},"AsyncWebServer")," to handle HTTP requests."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cpp"},"AsyncWebServer server(80);\n")),(0,r.kt)("h3",{id:"3-define-wifi-credentials"},"3. Define WiFi Credentials"),(0,r.kt)("p",null,"Set your WiFi credentials."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cpp"},'const char* ssid = "your-SSID";       // Your WiFi SSID\nconst char* password = "your-PASSWORD"; // Your WiFi Password\n')),(0,r.kt)("h3",{id:"4-setup-function"},"4. Setup Function"),(0,r.kt)("p",null,"In the ",(0,r.kt)("inlineCode",{parentName:"p"},"setup")," function, connect to WiFi and initialize WebSerial."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cpp"},'void setup() {\n  Serial.begin(115200);\n  WiFi.mode(WIFI_STA);\n  WiFi.begin(ssid, password);\n  \n  if (WiFi.waitForConnectResult() != WL_CONNECTED) {\n    Serial.printf("WiFi Failed!\\n");\n    return;\n  }\n  \n  Serial.print("IP Address: ");\n  Serial.println(WiFi.localIP());\n  \n  // Serve a simple webpage\n  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {\n    request->send(200, "text/plain", "Hi! This is WebSerial demo. You can access the WebSerial interface at http://" + WiFi.localIP().toString() + "/webserial");\n  });\n\n  // Initialize WebSerial\n  WebSerial.begin(&server);\n\n  // Attach a callback function to handle incoming messages\n  WebSerial.onMessage([](uint8_t *data, size_t len) {\n    Serial.printf("Received %lu bytes from WebSerial: ", len);\n    Serial.write(data, len);\n    Serial.println();\n    WebSerial.println("Received Data...");\n    String d = "";\n    for(size_t i = 0; i < len; i++){\n      d += char(data[i]);\n    }\n    WebSerial.println(d);\n  });\n\n  // Start the server\n  server.begin();\n}\n')),(0,r.kt)("h3",{id:"5-loop-function"},"5. Loop Function"),(0,r.kt)("p",null,"In the ",(0,r.kt)("inlineCode",{parentName:"p"},"loop")," function, print some information periodically and call ",(0,r.kt)("inlineCode",{parentName:"p"},"WebSerial.loop()"),"."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cpp"},'void loop() {\n  static unsigned long last_print_time = millis();\n  \n  // Print every 2 seconds (non-blocking)\n  if ((unsigned long)(millis() - last_print_time) > 2000) {\n    WebSerial.print(F("IP address: "));\n    WebSerial.println(WiFi.localIP());\n    WebSerial.printf("Uptime: %lums\\n", millis());\n    WebSerial.printf("Free heap: %u\\n", ESP.getFreeHeap());\n    last_print_time = millis();\n  }\n\n  WebSerial.loop();\n}\n')),(0,r.kt)("h3",{id:"full-example-code"},"Full Example Code"),(0,r.kt)("p",null,"Here is the complete code for reference:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cpp"},'/*\n  WebSerial Demo\n  ------\n  This example code works for both ESP8266 & ESP32 Microcontrollers\n  WebSerial is accessible at your ESP\'s <IPAddress>/webserial URL.\n\n  Author: Ayush Sharma\n  Checkout WebSerial Pro: https://webserial.pro\n*/\n\n#include <Arduino.h>\n#if defined(ESP8266)\n  #include <ESP8266WiFi.h>\n  #include <ESPAsyncTCP.h>\n#elif defined(ESP32)\n  #include <WiFi.h>\n  #include <AsyncTCP.h>\n#endif\n#include <ESPAsyncWebServer.h>\n#include <WebSerial.h>\n\nAsyncWebServer server(80);\n\nconst char* ssid = ""; // Your WiFi SSID\nconst char* password = ""; // Your WiFi Password\n\nvoid setup() {\n  Serial.begin(115200);\n  WiFi.mode(WIFI_STA);\n  WiFi.begin(ssid, password);\n  \n  if (WiFi.waitForConnectResult() != WL_CONNECTED) {\n      Serial.printf("WiFi Failed!\\n");\n      return;\n  }\n  \n  // Once connected, print IP\n  Serial.print("IP Address: ");\n  Serial.println(WiFi.localIP());\n\n  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {\n    request->send(200, "text/plain", "Hi! This is WebSerial demo. You can access webserial interface at http://" + WiFi.localIP().toString() + "/webserial");\n  });\n\n  // WebSerial is accessible at "<IP Address>/webserial" in browser\n  WebSerial.begin(&server);\n\n  /* Attach Message Callback */\n  WebSerial.onMessage([&](uint8_t *data, size_t len) {\n    Serial.printf("Received %lu bytes from WebSerial: ", len);\n    Serial.write(data, len);\n    Serial.println();\n    WebSerial.println("Received Data...");\n    String d = "";\n    for(size_t i=0; i < len; i++){\n      d += char(data[i]);\n    }\n    WebSerial.println(d);\n  });\n\n  // Start server\n  server.begin();\n}\n\nvoid loop() {\n  static unsigned long last_print_time = millis();\n\n  // Print every 2 seconds (non-blocking)\n  if ((unsigned long)(millis() - last_print_time) > 2000) {\n    WebSerial.print(F("IP address: "));\n    WebSerial.println(WiFi.localIP());\n    WebSerial.printf("Uptime: %lums\\n", millis());\n    WebSerial.printf("Free heap: %u\\n", ESP.getFreeHeap());\n    last_print_time = millis();\n  }\n\n  WebSerial.loop();\n}\n')))}p.isMDXComponent=!0}}]);