ESP8266 Web Server and Websockets Using Arduino IDE (Mac OSX and Windows) | vs. AJAX and HTTP

Поделиться
HTML-код
  • Опубликовано: 12 сен 2018
  • • Your support helps me post videos more frequently:
    / acrobotic
    www.paypal.me/acrobotic
    buymeacoff.ee/acrobotic
    BTC: 1ZpLvgETofMuzCaKoq5XJZKSwe5UNkwLM
    ==========
    • Find me on:
    / acrobotic
    / acrobotic
    / acrobotic
    ==========
    • My shops:
    acrobotic.com/shop
    amazon.com/shops/acrobotic
    ==========
    • Description:
    In this video I show you how to get started with WebSockets, one of the latest web technologies for exchanging data between web clients and web servers.
    We've seen how to use HTTP requests from a web browser to request data from a web server running on the ESP8266 ( • ESP8266 Web Server HTM... ). A problem is that every time the client sends a request, the entire webpage needs to be reloaded. We saw how using XML HTTP requests and AJAX allowed for dynamically updating parts of the webpage ( • ESP8266 Web Server HTM... ).
    With websockets the data exchange between a client and server is much easier, faster, and doesn't need a request to be made by the client.
    In this tutorial, I build a webpage that:
    1. Allows me to display text data sent from the server using the Serial Monitor for text input.
    2. Allows me to send text data to the server using the Serial Monitor as a display output.
    3. Allows me to change the value of a slider to set the brightness value of an LED that's controlled by the web server running on the ESP8266.
    ==========
    • Project parts:
    ACROBOTIC WeMos Development Kit for ESP8266:
    acrobotic.com/products/acr-00027
    amzn.to/2PBK2KE (affiliate)
    ACROBOTIC WeMos D1 Mini V2 Development Board for ESP8266:
    acrobotic.com/products/acr-00017
    amzn.to/2D3KiA6 (affiliate)
    ==========
    • Project code:
    Firmware for the Arduino IDE:
    github.com/acrobotic/Ai_Tips_...
    Websockets library for Arduino (best installed through library manager):
    github.com/Links2004/arduinoW...
    ==========
    • Tutorials:
    Detailed guide for getting started with the WeMos ESP8266 Development Board:
    learn.acrobotic.com/tutorials...
    • Getting Started | ESP8...
    ==========
    • Music:
    Music by andyclassical. audiojungle.net/user/andyclas.... Envato's Music Standard License
    ==========
    #ESP8266 #Arduino #Tutorial
  • НаукаНаука

Комментарии • 224

  • @safrijulfahreza391
    @safrijulfahreza391 5 лет назад +27

    Finally, web socket tutorial
    I've been waiting for this
    Thank you very much

    • @datasith
      @datasith  5 лет назад +3

      This was a highly requested topic so I'm happy I finally had the time to do it. I'm glad you liked it!

  • @NoobOnTour024
    @NoobOnTour024 3 года назад

    Great video!
    Everything important well explained, skipped the unimportant stuff. Good examples.
    Glad you added the brightness socket to show how to handle multiple sockets at the same time.
    Subscribed!

  • @zigoto213
    @zigoto213 5 лет назад +3

    Your method of transmitting your knowledge is second to none. Great job !

    • @datasith
      @datasith  5 лет назад +1

      Thanks Ali, it's been a learning process for me and I'm glad it works for some of the viewers!

  • @dozog
    @dozog 5 лет назад +11

    Amazing clarity.
    Love the way you go over explaining the code as you write it.

    • @datasith
      @datasith  5 лет назад +2

      Awesome! I'm glad you found the info useful, thanks for stopping by!

    • @HeliosFire9ll
      @HeliosFire9ll 2 года назад

      @@datasith Hey Ruis, what's the camera that you used? Is there a tutorial on how to program it?

    • @domain3973
      @domain3973 5 месяцев назад

      It can work all over the world?

  • @kafftass30
    @kafftass30 4 года назад

    Thank you Cisco, your way to explain IT content is realy amazing. Making supposed complex stuff easy.

  • @BenDover-pq8xj
    @BenDover-pq8xj 5 лет назад

    You Sir are a Grand Master, absolutely brilliant, clear, concise, no waffle, straight to the point, if I could give multiple 'thumbs up' i would gladly do so. Thank You.

    • @datasith
      @datasith  5 лет назад

      It's been a learning process for me on how to best present the material, I'm glad you find it useful!

  • @mikegofton1
    @mikegofton1 2 года назад

    really concise and well structured tutorial, great work !

  • @willofirony
    @willofirony 5 лет назад +6

    The best video you have uploaded!!! Well done, you!!

    • @datasith
      @datasith  5 лет назад +1

      Thank you, Michael. I'm very glad you liked it!

  • @mayanklunayach5576
    @mayanklunayach5576 5 лет назад +8

    Mate, you are a legend! You explained WebSockets so nicely and it really helped me in my college project. Keep going please...

    • @datasith
      @datasith  5 лет назад +1

      Lol thanks! I'm super glad you found it useful. I always love seeing related projects (it also helps me come up w ideas) so if you ever post any stuff you build by all means tag me!

    • @mayanklunayach5576
      @mayanklunayach5576 5 лет назад

      Sure!

  • @ericBcreator
    @ericBcreator 3 года назад

    Great hands on tutorial how websockets work, what they can be used for and how to do it. Subscribed.

  • @frustino1979
    @frustino1979 3 года назад

    Thank you so much for this very useful tutorial.
    Very clear and professional explanation, I love how you explain the code and system architecture.

  • @joydeepbhattacharjee5305
    @joydeepbhattacharjee5305 4 года назад +2

    This is the best youtube videos on ESP I've Ever seen...thank u so much for sharing such valuable thing..

    • @datasith
      @datasith  4 года назад +1

      No problem! I'm glad you like my videos, Joydeep!

  • @rgmtb
    @rgmtb 5 лет назад +1

    Very cool man! I'll be using this example for sure with my projects ;-) Such a huge help man!!!!!

    • @datasith
      @datasith  5 лет назад

      Glad you found it useful!

  • @ronaldronald8819
    @ronaldronald8819 3 года назад

    Watchd it again. Great stuff. My parents want to switch the lights in the garden and read temp and humidity (with a dht22) this is an excellent way to build it . Thanks so much for your succinct explanation. Gone chip in some bucks on Paypal.

  • @shanerigsby9030
    @shanerigsby9030 4 года назад +7

    Wow, this is an incredibly good tutorial! You've got a gift :)

    • @datasith
      @datasith  4 года назад +1

      Thanks for the kind words, Shane. I'm glad you found it useful!

  • @matiaspresso7628
    @matiaspresso7628 2 года назад

    Great explanation, great T-Shirt! Thanks!

  • @ProvakorKonik
    @ProvakorKonik 4 года назад +1

    Thank you so much, we appreciate your hard work

  • @Montresor14
    @Montresor14 3 года назад

    Vamos Argentina!
    Thanks for the great tutorials mate!

  • @tanimsk
    @tanimsk 2 года назад

    Really informative and practical ❤❤

  • @neilweerasekera4345
    @neilweerasekera4345 3 года назад

    Great tutorial. Great job! Many thanks!

  • @raczeyy
    @raczeyy 2 года назад

    You are my IT GOD :) Thanks!

  • @vahida6146
    @vahida6146 5 лет назад

    Hello & Thanks for the video, I learned a lot, I was using simple webserver for my project & now I can broadcast information to all connected clients when something changed by one client without reloading page or sending sensors values.

    • @datasith
      @datasith  5 лет назад

      That's awesome, I'm glad the info in the vid was useful!

  • @ronaldronald8819
    @ronaldronald8819 3 года назад

    Excellent video! Thanks

  • @villecaribas
    @villecaribas 5 лет назад

    Very good tutorial.
    The best examples used.!!!!

    • @datasith
      @datasith  5 лет назад

      Thank you for stopping by, I'm glad you liked it!

  • @gioraver
    @gioraver 5 лет назад +2

    amazing videos, is one of the best contents of youtube

    • @datasith
      @datasith  5 лет назад

      Thanks for the kind comment, Gio. I'm glad you find the content useful!

  • @leforce8249
    @leforce8249 5 лет назад +5

    Thank you!! This is so valueable for me, you saved me a lot of sleepless nights.
    I will try if it works on an ESP32 Lolin D32 Board. Hope so.

    • @datasith
      @datasith  5 лет назад +1

      Oh dang, I'm happy it helped you out a bit. Best of luck with the projects, and shoot me an email if you get stuck.

  • @brunomigliorni2249
    @brunomigliorni2249 3 года назад

    very good!!

  • @qasimhere8165
    @qasimhere8165 4 года назад +1

    Great job 👍 dear, brilliant way of teaching, i have learned alot.

    • @datasith
      @datasith  4 года назад +1

      Glad to hear that. Thanks so much for watching!

  • @zachkrall3595
    @zachkrall3595 3 года назад

    fantastic video thank you from canada

  • @marceljancar3154
    @marceljancar3154 5 лет назад +1

    Fantastic tutorial! Thank you

    • @datasith
      @datasith  5 лет назад

      I'm glad you found the content useful. Thanks for watching!

  • @mibrahim4245
    @mibrahim4245 2 года назад

    Genius! ..
    Thanks

  • @InTech-
    @InTech- 4 года назад +1

    Thank you very much, amazing tutorial

    • @datasith
      @datasith  4 года назад

      You're too kind, thanks so much for the nice comment!

  • @lukitasinsua1986
    @lukitasinsua1986 4 года назад

    Lo mejor que vi hasta ahora!!!!!

    • @datasith
      @datasith  4 года назад

      jaaj dale maestro, muchísimas gracias!

  • @northshorepx
    @northshorepx 5 лет назад

    Thank you - very good tutorial!

    • @datasith
      @datasith  5 лет назад

      Thanks for the kind comment, I'm happy you found this video useful!

  • @mohamedallamES
    @mohamedallamES 5 лет назад +2

    Just GREAT as always! :)

    • @datasith
      @datasith  5 лет назад

      Thanks for the kind words, Mohamed. I'm glad you liked this one too! :)

    • @mohamedallamES
      @mohamedallamES 5 лет назад

      @@datasith you will not believe this, but I have just been thinking of a better way to get my serial debug data out of the monitor and use the webpage to dispaly it, and just opened your tutorial to find the complete solution!
      Really thank you. I appreciate your work here. And awaiting for the web OTA tut. As you promised :)

    • @datasith
      @datasith  5 лет назад +1

      Mohamed Allam, that's awesome that the timing worked out. I'm publishing a vid today, and then working on the new OTA-a few people are waiting as well haha-so hopefully you'll have it by the end of the week!

    • @mohamedallamES
      @mohamedallamES 5 лет назад

      @@datasith Great news, thank you :)

  • @enzokhl1299
    @enzokhl1299 3 года назад +1

    Love you 🤣

  • @DucNguyen-vb5nz
    @DucNguyen-vb5nz Год назад

    thanks !

  • @antoniosolanotarroc9714
    @antoniosolanotarroc9714 5 лет назад

    Great tutorial

    • @datasith
      @datasith  5 лет назад

      I'm glad you think so, thanks so much for the kind comment!

  • @suhaimiannuar6008
    @suhaimiannuar6008 3 года назад

    thank you so much

  • @barnagy
    @barnagy 4 года назад

    Nice video! THX

    • @datasith
      @datasith  4 года назад

      thanks so much for watching, i'm glad you liked it!

  • @svenbauerle7277
    @svenbauerle7277 4 года назад

    Thank you for the websocket fast response. I got it working for esp32 too.

    • @datasith
      @datasith  4 года назад

      Awesome, thanks for letting me know!

    • @kraftairkft4118
      @kraftairkft4118 4 года назад

      Hi Sven! Witch libraries did you used for esp32?

    • @svenbauerle7277
      @svenbauerle7277 4 года назад

      @@kraftairkft4118 I used:
      #include
      #include
      #include
      #include
      #include

    • @kraftairkft4118
      @kraftairkft4118 4 года назад

      @@svenbauerle7277 Thanks!

  • @makerun6927
    @makerun6927 4 года назад

    very nice

    • @datasith
      @datasith  4 года назад

      i'm glad you like it!

  • @whynot8140
    @whynot8140 4 года назад

    great!

  • @coffeecuppepsi
    @coffeecuppepsi 2 года назад

    gracias loco

  • @lodesmets9815
    @lodesmets9815 5 лет назад +1

    In a previous video (about ota) you said that in the future you will make a tutorial about creating a webpage with a button to update the esp.
    As far as i can see you haven’t made it yet :-)
    I really like your tutorials

    • @datasith
      @datasith  5 лет назад +1

      Thank you for keeping me honest! :)
      I published a list of the upcoming four videos on the community tab. This was 3 out of 4, one more to go! I'll pop the one you mentioned to the top of the list as a few people are interested in revisiting OTA!

  • @SapienzSpb
    @SapienzSpb 5 лет назад

    Cool!

  • @jrglbt7325
    @jrglbt7325 4 года назад

    UUUfff!!! Thank you! , Thank you! I`m a begginer.

    • @datasith
      @datasith  4 года назад

      I'm glad you found it useful! Thank you!

  • @user-iw5de9ou6u
    @user-iw5de9ou6u 4 года назад

    he make so simple sample that i could understand beginner like me

    • @datasith
      @datasith  4 года назад

      I'm happy to hear that you found it easy to understand and useful. Thanks for watching!

  • @dannydzware2023
    @dannydzware2023 5 лет назад

    Thanks very much

    • @datasith
      @datasith  5 лет назад

      Thank you for watching!

  • @agungsap2002
    @agungsap2002 4 года назад

    amazing... thx

    • @datasith
      @datasith  4 года назад

      Glad you liked it, thanks for watching!

  • @tee-tech-old62
    @tee-tech-old62 5 лет назад

    Auf jeden Fall Respekt an die ganzen Pfleger, und die die diesen Beruf ausüben.
    Gibt leider viel zu wenig von solchen Leuten 😕

  • @rupavagetsitdone
    @rupavagetsitdone 3 года назад

    Hey, this tutorial was really helpful. However i realised that the websocket was sending one char at a time to the webpage. is there a way to send a complete string or a way to make it a string at the end when it is received at the webpage??

  • @karryvenkatesh5116
    @karryvenkatesh5116 3 года назад

    Really great tutorial. Can we use secure websockets in esp8266?

  • @sunnychan950
    @sunnychan950 3 года назад

    what kind of live stream camera did he use that was streaming in the demo? ESP8266Camera? Or was it something else?

  • @ahmedazouz303
    @ahmedazouz303 5 лет назад

    very cool ,
    so how can I read the "responseText" as you did in the html js video by using server.send method ?

    • @datasith
      @datasith  5 лет назад

      Thanks! Maybe I don't understand your question, but you can do the same in the webpage that is being sent using:
      server.send_P(200, "text/html", webpage);

  • @tahanprahara
    @tahanprahara 3 года назад

    Nice Sir... But how to make to slider ? One vertical slider and other horisotal slider? I want to make Drone remote control using this websocket...
    Thankyou

  • @macinissa4133
    @macinissa4133 4 года назад

    Great tutorial, thank you for sharing. I am new to microcontrollers, so please, bear with me. You ran this demo within the range of the ESP8266 antenna. My question is, is the communication local (because of the antenna) or can you communicate with the ESP8266 from anywhere (across the country) just using the assigned IP address?

    • @datasith
      @datasith  4 года назад

      thanks for the kind words. no worries, i would bear with you no matter what :)
      the process of accessing your devices over the internet is a little involved. you can use services like cayenne or ubidots (i have videos with demos) that do the hard work for you, but are limited. you can also deploy your own service like this: ruclips.net/video/lteGQrY5Yu4/видео.html
      HTH!

  • @shireefadel8064
    @shireefadel8064 5 лет назад

    great explanation, I think this to be a real world project and to control the device from outside we have two options, either use a static ip for the device or on the other hand configure port forwarding on your router, is this correct or am I missing something ?

    • @datasith
      @datasith  5 лет назад

      Hey, thanks for the question. You have several options for control across the internet in addition to the two you mentioned. There are 3rd party services like myDevices Cayenne, Thingspeak, or Ubidots that you can use. I also made a complete tutorial on how to set up your own server for this purpose: ruclips.net/video/lteGQrY5Yu4/видео.html

  • @salmanalotaybi1048
    @salmanalotaybi1048 3 года назад

    Hi, do you have experience in Particle Photon???

  • @hopheadeddie
    @hopheadeddie 4 года назад

    Thank you for your video. It worked for me first time. I'm trying to find a C# client template so I can use my Win10 Visual Studio to send and receive websocket data. I would very much appreciate your input.
    My experience level with Wifi is limited.
    Thanks Ed

    • @datasith
      @datasith  4 года назад

      Hey Ed. Thanks for watching. My experience with C# and Win10 Visual Studio is non-existing, so I'm afraid I'd be as helpful as a google search. Sorry about that!

  • @JHBVDS
    @JHBVDS 5 лет назад

    Hello Cisco
    Do you have any experience using MIT App Inventor?
    Perhaps you can do a follow up tutorial to show how to create an Android App to communicate with your ESP8266 to dim or bright the LED and show the brightness level on your Android device.
    Thanks for all the effort you put into your work!

    • @datasith
      @datasith  5 лет назад

      Thanks for stopping by the channel! I haven't used it quite yet, but it's definitely on my to-do list. I do have experience with Android Studio so I'll probably do one with it first, and another with App Inventor. Thanks so much for the suggestion, it'll definitely get done!

    • @JHBVDS
      @JHBVDS 5 лет назад

      I have to admit: Every-time I end in a dead-end, I always find a solution in one of your videos! I'm really excited about the possibility to see you do a video on App Inventor! I have in the meantime also seen another of your videos on Web-Sockets and Java, I'm still struggling to get my mind around it, but it do seem like a much better solution to my problem than what I had in mind. I should probably also learn more about Json...
      ...if only I had more time and patience ;-)
      Keep up your good work!
      PS: If ever you plan a tour to Cape Town, give me a shout!

  • @joramotorsportteam3277
    @joramotorsportteam3277 3 года назад

    This server is no the some ESP board and send to serial, but how to send to different WEB page?

  • @ur-nu3do
    @ur-nu3do 5 лет назад

    sir your explanation is amazing. Shall you give me idea how to communicate between arduino mega and local wamp server using enc28j60 and websocket protocol?

    • @datasith
      @datasith  5 лет назад

      Thanks, use this example code and adapt it to your project.

  • @vladhristov2316
    @vladhristov2316 5 лет назад

    I cant believe only 10K are subscirbed...:(

    • @datasith
      @datasith  5 лет назад

      Thank you! Little-by-little, the channel is growing. I'm grateful to know that many people (internet bots included) want to see my videos 😁

  • @foadmoradi7150
    @foadmoradi7150 5 лет назад

    Hi and thanks for your amazing tutorials :) ... After programming my esp8266, I'm not able to connect the websocket server in windows. my wi-fi driver has no problem and connects to all wifis. But I cant connect to wifi and "." print on terminal constantly ... Is it any difference between connecting to this server on mac and windows? What should i do my friend?

    • @datasith
      @datasith  5 лет назад

      Hmm, there shouldn't be any difference between Mac and Windows. If you only see "." in the Serial Monitor, it means the ESP8266 can't connect to your local network. Double-check the SSID and password. You can try changing the settings of your Wi-Fi router to see if it helps.
      Thanks so much for your kind comment, I hope your problem gets fixed!

  • @warperone
    @warperone 5 лет назад

    excellent video. do you have video tutorial showing bidirection information being sent between two ESP8266 using web sockets ?

    • @datasith
      @datasith  5 лет назад

      Thanks! Not quite yet, I'm preparing one though, stay tuned!

    • @warperone
      @warperone 5 лет назад

      @@datasith awesome. silly question - where is the link to the code you go through on you video ?

    • @warperone
      @warperone 5 лет назад

      ignore that - found it :-)

    • @datasith
      @datasith  5 лет назад

      @@warperone awesome! Sorry it was buried under all the self-promotion crap :)

  • @MILO-jr4vq
    @MILO-jr4vq 3 года назад

    !Saludos desde Quito Ecuador!, mi pregunta es : corro un ejemplo en la esp8266, de servidor web, y se la ven en LAN y WAN, corro un ejemplo con Websockets y va bien en LAN pero al tratar de verla desde la red externa (WAN) recibe el archivo HTML abre la pagina Web y se cuelga la comunicación...... que consideraciones debo tener debido a los Sockets?

  • @stevenlee1726
    @stevenlee1726 5 лет назад +1

    Hi sir, how to establish web socket connection between 000webhost webpage and esp8266 which is connected to my router? For example: in my javascript
    var sock = new WebSocket("ws://192.168.1.180:81");
    192.168.1.180 is my local area IP address. 000webhost webpage cannot detected it. What should i replace with? Do you understand my problem? Thanks

    • @datasith
      @datasith  4 года назад

      You need to replace it with the 000webhost IP address. If you don't have full control of the server it might be tricky as port 81 might be inaccessible. You can also run the websocket connection on port 80, which is open on most servers, although it's the same port for HTTP.

  • @drakkorvladimir4012
    @drakkorvladimir4012 3 года назад

    I can only use sockets local, not over the web. I can see my page over the web with my DYNDNS, but no socket?????

  • @janisklavins6995
    @janisklavins6995 5 лет назад

    Excellent tutorial, thanks for all the information, please can you tell me, what I have to do to make http shortcuts. I mean in GET method, when i need turn on LED, i write in address bar - 192.168..../LedOn or similar. What i need to write in address bar for send constant value to control led PWM value, in this tutorial?
    P.S
    Sorry for my english

    • @datasith
      @datasith  5 лет назад

      Heya, thanks for the compliment. Never apologize for speaking in a non-native tongue ;)
      You can send data to the server in different ways. For example, you can specify it using URL arguments - 192.168..../LedOn&brightness=127
      ruclips.net/video/EAUCajLvDKw/видео.html
      Or you can use XML HTTP request data and send it using GET or POST methods:
      ruclips.net/video/ZJoBy2c1dPk/видео.html
      Or you can use websockets:
      ruclips.net/video/ROeT-gyYZfw/видео.html
      Good luck with your projects!

  • @iot_enthusiast
    @iot_enthusiast 5 лет назад

    Curious what software/plugins you are using to monitor network traffic...@2:14

    • @datasith
      @datasith  5 лет назад

      Great question! I should'be mentioned it on the video, but those tools are part of the built-in Developer Tools for the Google Chrome web browser. There are a few tabs ("Elements" is the default), and the one I'm showing is "Network".

    • @iot_enthusiast
      @iot_enthusiast 5 лет назад

      Appreciate the prompt response and your videos

  • @andersolofsson2841
    @andersolofsson2841 5 лет назад

    I want to send digital color values for RGB leds to my web server. How can I make "server.on() take these values?

    • @datasith
      @datasith  5 лет назад

      ruclips.net/video/lteGQrY5Yu4/видео.html

  • @feko2597
    @feko2597 5 лет назад

    Thanks a lot for the great video!
    exactly what I need for my project.
    But at the moment I am struggling with the code.
    Retyped and double checked, but doesn't work :-/
    I get access to the webpage, but the entered data in the serial monitor is not shown
    on the webpage and when i want to send data from the page to serial monitor, nothing happens when I press return...
    Do you have a clue?
    In any case, thanks a lot!

    • @datasith
      @datasith  5 лет назад

      Hmm, weird. As a sanity check I'd use the code in the github repository (link in the description), and if that works, then I'd try to narrow down the bug. You can use the browser debug mode (Developer Tools in Chrome) and go to the console tab to figure out if it's an error on the JavaScript side (that'd be my guess). HTH!

  • @mikeonthebox
    @mikeonthebox 2 года назад

    I was having issues connecting, turns out changing port from 81, to for example 3030 fixed the problems.

  • @nomanaslam5418
    @nomanaslam5418 4 года назад

    Thank U great tutorial for websocket? how i add toggle button on websocket server

    • @datasith
      @datasith  4 года назад

      Thanks! Lucky for you I just published a new video that uses HTML buttons to control a robot: ruclips.net/video/4gl7IZLo7yA/видео.html
      Unless you mean that you want to have a physical button in your project that's read by the ESP8266?

  • @techman9111
    @techman9111 5 лет назад

    Nice tutorial, thanks!
    I am using the ESP-01S. The first exercise, from rxConsole to webpage textarea works fine.
    The 2nd exercise from webpage texarea to rxConsole I can't get it working.
    When I press the ENTER key after the text in the webpage texarea nothing appears in the rxConsole.
    I checked and rechecked the code several there are no typos and seems tob correct.
    Have you any suggestions ??

    • @datasith
      @datasith  5 лет назад

      If you open the "Developer Tools" and go to the "Console" option, you can see if there are any errors/typos on the JS side of things. That'd be my first guess. Then, you can add a "console.log("DEBUGGING!")" to the JS section handling the textarea to see if the code if being executed. Thirdly, you can close/open the "Serial Monitor" window to ensure a proper connection over USB between the ESP-01 and the computer. HTH!

    • @techman9111
      @techman9111 5 лет назад

      @@datasith
      Thanks for your reply !
      I did something stupid. I entered date instead of data. Each time I oversaw it. It works now in both directions. This tutorial is a good basis for knowing websockets how it works.

    • @datasith
      @datasith  5 лет назад

      @@techman9111 awesome! I'm glad to hear you solved it, and that you think it's useful info!

  • @17colosal
    @17colosal 5 лет назад

    Hi dude. Your video is great. I was able to create a rgb led controller with sliders from this . Now, I want to know how to send a float from adc conversion to the webpage, Can you give some guidelines?
    Also, could you explain how you wrote the html code inside a string ? What is R"=====(?

    • @datasith
      @datasith  5 лет назад

      Thanks for watching my vids!
      You can start by changing the line "char c[] = {(char)Serial.read()};" to include the analog read. And instead of waiting for Serial.available(), you can use a different 'trigger' for the message to be broadcasted.
      "R"=====(?" allows you to write the HTML format normally, without having to worry about line breaks or escaping characters (other than the double-quotes "). It's called a raw string literal.

  • @liam1062
    @liam1062 4 года назад +1

    Thank you. Can Websockets be used to send real time sensor data to a phone web browser. meaning as an access point that the phone can join and then read the constant data stream on a web page? Would this be an efficient way to send the data? I dont want the ESP8266 to join a wi-fi network. but for the phone to join the ESP8266 AP.

    • @datasith
      @datasith  4 года назад +1

      Hey, Liam. The websockets side of this example doesn't rely on the internet at all. Most projects use libraries like socket.io that require such connection, which I prefer not to do. The websocket server runs on the ESP8266, and the websocket client is built into the browser. If I had accessed the ESP8266 from my phone, I would've gotten the same result. The only reason I'm connecting the ESP8266 to Wi-Fi, is so that the computer is able to access it through my router (i.e., my local network). Most of the code would be similar if I set up the ESP8266 to act as the access point itself-the differences would be for setting up the AP. HTH!

    • @liam1062
      @liam1062 4 года назад

      @@datasith Thank you. Where can I contact you regarding a paid project?

  • @enricoperrotta8483
    @enricoperrotta8483 4 года назад

    A question.. The server and the client must be connected on the same WiFi network?

    • @datasith
      @datasith  4 года назад

      Not necessarily, but there needs to be a way to communicate. Say, if the server is on the internet, and the ESP8266 on a local network with access to the internet, then it should work as well. HTH!

  • @manthanrathod1046
    @manthanrathod1046 4 года назад

    This video really helped me! except one issue, i am trying to send analog sensor values using socket.broadcastTXT(value). but getting an error .. "Call of overloaded broadcastTXT(int&) is ambigous ". please help me

    • @datasith
      @datasith  4 года назад

      try sending it as a string and parsing it client-side. hth!

  • @JuanCarlos-ff6vp
    @JuanCarlos-ff6vp 4 года назад

    Grande master. Buen video. ¿Tienes algún ejemplo para utilizar el ESP8266 solo como cliente (emisor de los datos) y utilizar un servidor de websocket en la nube (alojado en un hosting)?. Saludos.

    • @datasith
      @datasith  4 года назад

      capo, gracias! todavía no, pero lo pongo en la lista. sería un servicio/api específico, o decís algo como configurar mi propio servidor en AWS por ejemplo para aceptar incoming websocket messages (sori por el spanglish)?

    • @JuanCarlos-ff6vp
      @JuanCarlos-ff6vp 4 года назад +1

      @@datasith imagina un servicio tipo consola remota, en base a websocket. Por ejemplo, una persona que tuviese que hacer un dump de logs desde un equipo o ejecutar comandos y consultas en forma remota. La idea es que el websocket haga de tunel entre el equipo y el usuario. Un caso práctico es lo que hacen las empresas de reparación de ascensores. Ellos tienen que visitar los edificios y pierden mucho tiempo haciendo el dump de los datos y logs para poder evaluar las posibles causas de falla. Con un websocket podrìan interactuar directamente con el equipo desde su oficina. Ahora algunas empresas lo hacen mediante escritorio remoto, pero el problema es que tienen que intsalar un PC con Windows en cada edificio, con todo lo que lo implica. En cambio, con un simple microcontrolador sería mucho más sencillo. Saludos.

  • @omarcuevassilva5500
    @omarcuevassilva5500 4 года назад

    Hi, good video. But, how can create websocket client with esp??

  • @tihogro4350
    @tihogro4350 5 лет назад

    Very good tutorial!
    Can I have bit of a help? Trying to make it work for ESP32 and by now translate the libraries and wrote analogwrite command. It is working and regulating the LED intensity now.
    I am trying to add 2 buttons to turn LED ON and OFF, but did not have any success
    Returns null, when press a button and can not sort it out 3 days.
    Can I have a hint?
    HTML




    LED ON
    LED OFF
    JAVA
    function sendBrightness(){
    Socket.send("#"+document.getElementById("brightness").value);
    }
    function send_LED_Status(){
    Socket.send(document.getElementById("Status"));
    }
    Event script
    void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length){
    if(type == WStype_TEXT){
    if(payload[0] == '#'){
    uint16_t brightness = (uint16_t) strtol((const char *) &payload[1], NULL, 10);
    brightness = 1024 - brightness;
    analogWrite(pin_led, brightness, 1023);
    Serial.print("brightness= ");
    Serial.println(brightness);
    }
    // if(payload[0] == 'LED_ON'){
    // uint8_t ledison = strcmp(LED_ON, (const char *)payload;
    // digitalWrite(pin_led, 0);
    // Serial.print("LED_ON= ");
    // Serial.println(ledison);
    // }
    // if(payload[0] == 'LED_OFF'){
    // uint8_t ledisoff = strcmp(LED_OFF, (const char *)payload;
    // digitalWrite(pin_led, 1);
    // Serial.print("LED_OFF= ");
    // Serial.println(ledisoff);
    // }
    if (strcmp(LED_ON, (const char *)payload) == 0) {
    digitalWrite(pin_led, 1);
    Serial.print("LED_ON= ");
    Serial.println(LED_ON);
    }
    if (strcmp(LED_OFF, (const char *)payload) == 0) {
    digitalWrite(pin_led, 0);
    Serial.print("LED_OFF= ");
    Serial.println(LED_OFF);
    }
    else{
    for(int i = 0; i < length; i++)
    Serial.print((char) payload[i]);
    Serial.println();
    }
    }

    }

    • @datasith
      @datasith  5 лет назад +1

      So the JavaScript (!= Java) is a bit messed up. In the function call you're passing a parameter (send_LED_Status(this.id)) but on the function definition it doesn't match (function send_LED_Status()). This results in an error because there's no function that matches the call.

  • @shahbaztech7064
    @shahbaztech7064 2 года назад

    How we use it with spiff flash memory

  • @digambers27
    @digambers27 5 лет назад

    Hi... How to send text to a particular client as well identify which client sent data when more than one client connected to ESP-server??

    • @datasith
      @datasith  5 лет назад

      You'd need to use something like an API key for each client, and keep track of them in the server.

    • @digambers27
      @digambers27 5 лет назад

      @@datasith Thanks... Im amazed for such prompt reply...
      However I used client socketnumber from webSocketEvent and that gives me control over clients...
      Thanks again for such a nice and informative video. Keep going

  • @achalasamapriya2701
    @achalasamapriya2701 5 лет назад

    awsome video ..can you please put a link to the library you are using ?? thanks in advance

    • @datasith
      @datasith  5 лет назад

      Thanks! Done. Also, remember you can install it through the library manager.

    • @achalasamapriya2701
      @achalasamapriya2701 5 лет назад

      @@datasith thank you veymuch for the quick reply.Already tested it and working like a charm

  • @med6402
    @med6402 5 лет назад

    can you please show how to send a json format from esp to client over websockets

    • @datasith
      @datasith  5 лет назад

      Sounds good, I'll add it to the queue!

  • @TechInventorAman
    @TechInventorAman 4 года назад

    Can we monitor a sensor in real-time using this?

    • @datasith
      @datasith  4 года назад

      yes, that is exactly the most useful thing about websockets. thanks for watching!

    • @TechInventorAman
      @TechInventorAman 4 года назад

      @@datasith Can you make a video tutorial upon that . It can be a good place to start with websockets and also nobody on the internet has done yet . It can be your next video monitoring sensor value on an access point-based webserver using WebSockets .

  • @RahulRaj-fv8ue
    @RahulRaj-fv8ue 4 года назад +1

    Hey, Can I use ESP8266 as a client and then connect it to a server(as a web socket connection).
    If there is any possibility, please help.
    And thanks in advance!

    • @datasith
      @datasith  4 года назад +1

      Heya, Rahul. Yes this is possible, I have received a couple of requests to do this, so I will make a video soon on setting up a websocket server that runs on a Raspberry Pi, and use an ESPx board as a client! Thanks so much for watching!

  • @ManuelCastillo-kq3xy
    @ManuelCastillo-kq3xy 5 лет назад +1

    Hola Cisco, una gran duda: como seria el codigo si lo que requiero es enviar, por ejemplo la temperatura cada 10 segundos y el estado de un rele cada 5 segundos? O sea, envios a la pagina o actualizaciones en distintos periodos de tiempo.

    • @datasith
      @datasith  5 лет назад +1

      Se puede hacer de varias maneras.
      1) Lo podes hacer desde la pagina con JavaScript (por ejemplo la funcion setInterval), para que pida el valor cada tantos segundos. Cuando el request sea recibido por el server, entonces sea la lectura "on-demand".
      2) Lo podes hacer desde el server con un timer (por ejemplo), que cada tantos segundos se realize la lectura y se mande el valor al websocket. En la página simplemente se actualiza el valor cada vez que se reciba un mensaje en el websocket.
      Saludos, Manuel!

    • @ManuelCastillo-kq3xy
      @ManuelCastillo-kq3xy 5 лет назад

      ACROBOTIC muchas gracias Cisco, iré por el camino de timer en arduino.

  • @kenjohnsiosan9707
    @kenjohnsiosan9707 5 лет назад

    sir, do you have tutorials for arduino uno ?

    • @datasith
      @datasith  5 лет назад

      Not quite yet, I have a few planned. Let me know if there's a topic you'd like to see, and I'll add it to the list.

  • @nickst2797
    @nickst2797 5 лет назад

    Hi! Can the code work with a NodeMCU? Or NodeMCU requires only Lua scripting?

    • @datasith
      @datasith  5 лет назад +1

      Hey, Nick. The NodeMCU board can be programmed with Arduino, Lua, and other languages! Thanks for checking out my video!

    • @nickst2797
      @nickst2797 5 лет назад

      ACROBOTIC Thanks for the answer and the video!

  • @adrianavillalobos2382
    @adrianavillalobos2382 5 лет назад

    Hello... im working in iOS app for can control a ESP8266 and I would like to ask you ...How can I do that communication with Sockets? ESP8266 (Arduino IDE) and iOS app with swift

    • @datasith
      @datasith  5 лет назад

      $150/hour consulting rate. Contact info on the about page of the channel. Thanks.

  • @MrAndreapas79
    @MrAndreapas79 4 года назад

    Hi, I'm trying to create a small realtime network with a WebSocket in python on raspberry, e some esp wesocket client.....how I can manage asyncio in c++?

    • @datasith
      @datasith  4 года назад +1

      Sorry, I haven't used asyncio. If you figure it out, I'd love to hear your summary. I'd try to make a video for the community with that info (no pressure though (:-)

    • @MrAndreapas79
      @MrAndreapas79 4 года назад

      @@datasith thanks a lot for tour answer. We'll keep in touch. Have a good day

  • @kebabsharif9627
    @kebabsharif9627 Год назад

    how to access from remote place ,I mean usint internet.

  • @creativedeep6199
    @creativedeep6199 4 года назад

    Please make a video about read .txt file in table tag using arduino mega 2650 and sd card.

    • @datasith
      @datasith  4 года назад

      i'll add it to the list, however, doesn't seem like something that would gather much interest. sorry about that!

  • @niharikasingh783
    @niharikasingh783 5 лет назад

    Hey Cisco,
    I tried the websockets on my esp8266.
    But I couldn't connect to to it from another network.
    Please help me to open that IP address from another network.

    • @datasith
      @datasith  5 лет назад

      Controlling/monitoring things remotely is not hard. See this video: ruclips.net/video/6YAnqHTm7_o/видео.html

  • @rishavbhattacharya7937
    @rishavbhattacharya7937 5 лет назад

    Hello, I am testing the code downloaded from GitHub. When I send the HTTP request, the webpage is coming but no communication is happening between browser and serial.What should I do?

    • @datasith
      @datasith  5 лет назад

      Does nothing work? I mean, if you type a message in the Text Bar of the webpage (not in the Text Area) and then hit the "enter" key, the message doesn't appear in the Serial Monitor? How about if you type a message in the Serial Monitor and hit the "enter" key? Does the message appear in the Text Area of the webpage?

    • @rishavbhattacharya7937
      @rishavbhattacharya7937 5 лет назад

      one strange thing is happening. when I start my mobile hotspot and connect esp to that network and ping from mobile browser then it works fine but getting bad luck when trying from pc browser (pc also connected at the same network).

    • @datasith
      @datasith  5 лет назад

      That is strange, but it's not because of the browser. It's because of the network connection. Maybe, the mobile network doesn't allow two devices communicating with each other? This would be rare, but entirely possible.
      If you try it on a regular (non-mobile) WiFi network, then it should work without a problem. If it doesn't connect, try changing the security settings of the network as suggested above. Also, there is sometimes trouble when the password/ssid contain blank spaces, so that's another thing to try.

  • @pacsmile
    @pacsmile 5 лет назад

    Nice, been reading about these things and want to implement them on the esp32, but seems like the library doesn't work, and by the way the github link is not working.

    • @datasith
      @datasith  5 лет назад

      Awesome, thanks for the info. I haven't tried it with the esp32, but my next video is on writing code for both platforms so I'll give it a try. Thanks for letting me know about Github, I hadn't pushed the changes, so now it's good to go!

    • @pacsmile
      @pacsmile 5 лет назад

      Thanks, already tested it and working just fine, really cool code to learn and experiment with websockets, there's just one thing i don't quite understand; in your webpage array declaration you use R"=====( , i already found out that anything between that and )=====" will make it not neccesary to use special formatting characters (like \ to include " inside the string), but do you know what is that thing?, or from where did it come from?
      Thanks for your help so far.

    • @datasith
      @datasith  5 лет назад +1

      No worries, I'm happy to help! The notation allows us to use what are called _raw string literals_. I covered it in the vid for the original file that we modified in this websockets tutorial (ruclips.net/video/VNgFbQAVboA/видео.html). I'm also happy to answer any questions, so shoot'em any time you got'em.

  • @aimless3827
    @aimless3827 5 лет назад

    Socket.send("#"+document.getElementById("brightness").value);
    This code i trying to change "hash" to something else such as "xy" but it doesn't seem to be working what can do about it?? How can i change it?

    • @datasith
      @datasith  5 лет назад

      You can change it first in:
      Socket.send("xy"+document.getElementById("brightness").value);
      But you also have to match it in:
      if((payload[0] == 'x')&&(payload[1] == 'y'))
      HTH!

    • @aimless3827
      @aimless3827 5 лет назад

      ​@@datasith It does not work for two letter from your following code, but i use other a-z letter. i gotta find answer soon

    • @datasith
      @datasith  5 лет назад

      @@aimless3827, use Serial.println(payload[0]) and figure out what characters you're getting, then use it in the code above. I encourage you to find your own solutions rather than asking people to do them for you.