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

  Переглядів 94,216

datasith

datasith

5 років тому

• 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 років тому
Finally, web socket tutorial I've been waiting for this Thank you very much
@datasith
@datasith 5 років тому
This was a highly requested topic so I'm happy I finally had the time to do it. I'm glad you liked it!
@dozog
@dozog 5 років тому
Amazing clarity. Love the way you go over explaining the code as you write it.
@datasith
@datasith 5 років тому
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 3 місяці тому
It can work all over the world?
@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 років тому
Your method of transmitting your knowledge is second to none. Great job !
@datasith
@datasith 5 років тому
Thanks Ali, it's been a learning process for me and I'm glad it works for some of the viewers!
@mikegofton1
@mikegofton1 2 роки тому
really concise and well structured tutorial, great work !
@mayanklunayach5576
@mayanklunayach5576 5 років тому
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 років тому
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.
@kafftass30
@kafftass30 3 роки тому
Thank you Cisco, your way to explain IT content is realy amazing. Making supposed complex stuff easy.
@willofirony
@willofirony 5 років тому
The best video you have uploaded!!! Well done, you!!
@datasith
@datasith 5 років тому
Thank you, Michael. I'm very glad you liked it!
@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!
@Montresor14
@Montresor14 2 роки тому
Vamos Argentina! Thanks for the great tutorials mate!
@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.
@ProvakorKonik
@ProvakorKonik 3 роки тому
Thank you so much, we appreciate your hard work
@shanerigsby9030
@shanerigsby9030 4 роки тому
Wow, this is an incredibly good tutorial! You've got a gift :)
@datasith
@datasith 4 роки тому
Thanks for the kind words, Shane. I'm glad you found it useful!
@tanimsk
@tanimsk 2 роки тому
Really informative and practical ❤❤
@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.
@matiaspresso7628
@matiaspresso7628 2 роки тому
Great explanation, great T-Shirt! Thanks!
@joydeepbhattacharjee5305
@joydeepbhattacharjee5305 4 роки тому
This is the best youtube videos on ESP I've Ever seen...thank u so much for sharing such valuable thing..
@datasith
@datasith 4 роки тому
No problem! I'm glad you like my videos, Joydeep!
@rgmtb
@rgmtb 4 роки тому
Very cool man! I'll be using this example for sure with my projects ;-) Such a huge help man!!!!!
@datasith
@datasith 4 роки тому
Glad you found it useful!
@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 4 роки тому
That's awesome, I'm glad the info in the vid was useful!
@villecaribas
@villecaribas 5 років тому
Very good tutorial. The best examples used.!!!!
@datasith
@datasith 5 років тому
Thank you for stopping by, I'm glad you liked it!
@leforce8249
@leforce8249 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 років тому
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.
@qasimhere8165
@qasimhere8165 4 роки тому
Great job 👍 dear, brilliant way of teaching, i have learned alot.
@datasith
@datasith 4 роки тому
Glad to hear that. Thanks so much for watching!
@mohamedallamES
@mohamedallamES 5 років тому
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 років тому
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 :)
@ronaldronald8819
@ronaldronald8819 3 роки тому
Excellent video! Thanks
@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??
@mibrahim4245
@mibrahim4245 2 роки тому
Genius! .. Thanks
@marceljancar3154
@marceljancar3154 5 років тому
Fantastic tutorial! Thank you
@datasith
@datasith 5 років тому
I'm glad you found the content useful. Thanks for watching!
@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 3 роки тому
Hi Sven! Witch libraries did you used for esp32?
@svenbauerle7277
@svenbauerle7277 3 роки тому
@@kraftairkft4118 I used: #include #include #include #include #include
@kraftairkft4118
@kraftairkft4118 3 роки тому
@@svenbauerle7277 Thanks!
@zachkrall3595
@zachkrall3595 3 роки тому
fantastic video thank you from canada
@gioraver
@gioraver 5 років тому
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!
@lodesmets9815
@lodesmets9815 5 років тому
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 років тому
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!
@enzokhl1299
@enzokhl1299 2 роки тому
Love you 🤣
@InTech-
@InTech- 4 роки тому
Thank you very much, amazing tutorial
@datasith
@datasith 4 роки тому
You're too kind, thanks so much for the nice comment!
@sunnychan950
@sunnychan950 3 роки тому
what kind of live stream camera did he use that was streaming in the demo? ESP8266Camera? Or was it something else?
@salmanalotaybi1048
@salmanalotaybi1048 3 роки тому
Hi, do you have experience in Particle Photon???
@northshorepx
@northshorepx 5 років тому
Thank you - very good tutorial!
@datasith
@datasith 5 років тому
Thanks for the kind comment, I'm happy you found this video useful!
@lukitasinsua1986
@lukitasinsua1986 3 роки тому
Lo mejor que vi hasta ahora!!!!!
@datasith
@datasith 3 роки тому
jaaj dale maestro, muchísimas gracias!
@brunomigliorni2249
@brunomigliorni2249 2 роки тому
very good!!
@suhaimiannuar6008
@suhaimiannuar6008 3 роки тому
thank you so much
@DucNguyen-vb5nz
@DucNguyen-vb5nz Рік тому
thanks !
@MILO-jr4vq
@MILO-jr4vq 2 роки тому
!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?
@joramotorsportteam3277
@joramotorsportteam3277 3 роки тому
This server is no the some ESP board and send to serial, but how to send to different WEB page?
@antoniosolanotarroc9714
@antoniosolanotarroc9714 5 років тому
Great tutorial
@datasith
@datasith 5 років тому
I'm glad you think so, thanks so much for the kind comment!
@coffeecuppepsi
@coffeecuppepsi 2 роки тому
gracias loco
@karryvenkatesh5116
@karryvenkatesh5116 3 роки тому
Really great tutorial. Can we use secure websockets in esp8266?
@tahanprahara
@tahanprahara 2 роки тому
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
@mikeonthebox
@mikeonthebox 2 роки тому
I was having issues connecting, turns out changing port from 81, to for example 3030 fixed the problems.
@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);
@barnagy
@barnagy 4 роки тому
Nice video! THX
@datasith
@datasith 4 роки тому
thanks so much for watching, i'm glad you liked it!
@shahbaztech7064
@shahbaztech7064 2 роки тому
How we use it with spiff flash memory
@jrglbt7325
@jrglbt7325 4 роки тому
UUUfff!!! Thank you! , Thank you! I`m a begginer.
@datasith
@datasith 4 роки тому
I'm glad you found it useful! Thank you!
@whynot8140
@whynot8140 4 роки тому
great!
@datasith
@datasith 4 роки тому
thank you!
@SapienzSpb
@SapienzSpb 5 років тому
Cool!
@datasith
@datasith 5 років тому
Thank you!
@makerun6927
@makerun6927 4 роки тому
very nice
@datasith
@datasith 4 роки тому
i'm glad you like it!
@agungsap2002
@agungsap2002 4 роки тому
amazing... thx
@datasith
@datasith 4 роки тому
Glad you liked it, thanks for watching!
@dannydzware2023
@dannydzware2023 5 років тому
Thanks very much
@datasith
@datasith 5 років тому
Thank you for watching!
@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: ukposts.info/have/v-deo/pKSWe4epkGuK1mg.html
@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: ukposts.info/have/v-deo/pKSWe4epkGuK1mg.html HTH!
@drakkorvladimir4012
@drakkorvladimir4012 2 роки тому
I can only use sockets local, not over the web. I can see my page over the web with my DYNDNS, but no socket?????
@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 😕
@datasith
@datasith 5 років тому
Vielen dank
@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!
@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!
@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!
@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!
@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 :)
@omarcuevassilva5500
@omarcuevassilva5500 3 роки тому
Hi, good video. But, how can create websocket client with esp??
@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
@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: ukposts.info/have/v-deo/bJeda3-Rg6Vo2nU.html Unless you mean that you want to have a physical button in your project that's read by the ESP8266?
@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!
@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!
@kebabsharif9627
@kebabsharif9627 Рік тому
how to access from remote place ,I mean usint internet.
@liam1062
@liam1062 4 роки тому
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 роки тому
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?
@feko2597
@feko2597 4 роки тому
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 4 роки тому
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!
@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.
@stevenlee1726
@stevenlee1726 5 років тому
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.
@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 років тому
ukposts.info/have/v-deo/pKSWe4epkGuK1mg.html
@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!
@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 ukposts.info/have/v-deo/fXGGd5ehg6x1rKs.html Or you can use XML HTTP request data and send it using GET or POST methods: ukposts.info/have/v-deo/knqgdq9pmmeVsZ8.html Or you can use websockets: ukposts.info/have/v-deo/in-WiGOesI-Lx6s.html Good luck with your projects!
@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
@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 роки тому
@@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.
@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.
@ManuelCastillo-kq3xy
@ManuelCastillo-kq3xy 5 років тому
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 років тому
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.
@med6402
@med6402 4 роки тому
can you please show how to send a json format from esp to client over websockets
@datasith
@datasith 4 роки тому
Sounds good, I'll add it to the queue!
@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.
@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 роки тому
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
@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 😁
@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 років тому
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.
@nickst2797
@nickst2797 5 років тому
Hi! Can the code work with a NodeMCU? Or NodeMCU requires only Lua scripting?
@datasith
@datasith 5 років тому
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!
@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 роки тому
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 роки тому
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!
@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
@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!
@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 років тому
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 (ukposts.info/have/v-deo/jn6YepiIeIyT0HU.html). I'm also happy to answer any questions, so shoot'em any time you got'em.
@adrianavillalobos2382
@adrianavillalobos2382 4 роки тому
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 4 роки тому
$150/hour consulting rate. Contact info on the about page of the channel. Thanks.
@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.
@rindangrr
@rindangrr 4 роки тому
Hello... i want to know how to control 4 LED's brightness(different GPIO pins) using slider for each LED. Could you help me pleasee
@datasith
@datasith 4 роки тому
Sorry, with almost 20k subscribers, I can't help all of you individually. If you have a specific question I'll point you in the right direction. - On the HTML side you create the 4 HTML elements, and give them separate IDs. - On the JS side you use those IDs to get their values when they change, and send them to the websocket. When you send the values to the websocket you can format your data however you want (e.g., {'led1':value1} where value1 is the actual number you got from the HTML element). - On the firmware side, you parse each value where the messages are received, and set your PWM/brightness to the value accordingly. HTH!
@rindangrr
@rindangrr 4 роки тому
@@datasith Thank you very much for your response 🙏 i really appreciate it. Love your channel so much 👍 keep up the good work.
@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: ukposts.info/have/v-deo/bolyoqd_i6NowKM.html
WebSockets Explained: Real-Time Communication with ESP8266
6:58
ESP32: Webserver, Websockets and JSON (WiFi Part 2) - Arduino
35:17
MoThunderz
Переглядів 72 тис.
Машины в 2018 и в 2024
00:15
Gazan
Переглядів 1,2 млн
Embracing Freedom: Our Journey with Linux
0:40
Megakingsman Zero
Переглядів 198
i cant stop thinking about this exploit
8:40
Low Level Learning
Переглядів 116 тис.
Programming Languages Explained in 7 Minutes
7:21
Engineer Explains
Переглядів 22
Windows Server 2012 Build 7965: Interesting Build
7:49
SanDisk® Desk Drive Desktop SSD Walkthrough and Auto-Backup
3:05
ESP32 Web page creating and updating
32:11
Kris Kasprzak
Переглядів 132 тис.
Как установить Windows 10/11?
0:56
Construct PC
Переглядів 1,7 млн
Я Создал Новый Айфон!
0:59
FLV
Переглядів 2,5 млн
Как установить Windows 10/11?
0:56
Construct PC
Переглядів 1,7 млн
iPhone - телефон для нищебродов?!
0:53
ÉЖИ АКСЁНОВ
Переглядів 3,7 млн
Игровой ноутбук за 100тр в МВИДЕО
0:58
KOLBIN REVIEW
Переглядів 228 тис.