Arduino - Websocket

If you are a beginner, you can learn more about Arduino - Wifi.

Let’s think about real-time controlling Arduino via webpage:

Advantage: Remotely control Arduino in real time without developing and installing any special software, and it works on a variety of Operating Systems (Android, iOS, Windows, etc.) as long as it has an installed web browser.

Disadvantage: Requires knowledge of web programming.

Solution: PHPoC Shield for Arduino has a built-in Web Server and some pre-programmed web applications, allowing the user to remotely control and monitor Arduino via webpage without requiring any knowledge of web programming. PHPoC shield is a bridge, helping the exchange of data between web application and Arduino.

Pre-programmed embedded Web application

• Web Serial Monitor: Data from Serial pin (Tx) is captured and sent to the web application (web client)
• Web Remote Control/Push: Web application sends a command to Arduino when a button is pressed or released. For example, when button A is pressed and released, ‘A’ and ‘a’ command is sent to Arduino, respectively.
• Web Remote Control/Slide: When the slide is moved, the slide ID and slide value is sent to Arduino. There are two slides with IDs “A” and “B” respectively. The value of the slides range from -100 to 100.

In all of the above application, data is exchanged between Arduino and web brower via Websocket. If you do not know what Websocket is, go to the end of this article.

Demo

Steps

1. Stack the PHPoC Shield on Arduino.

2. Install Arduino library and examples for PHPoC Shield:

On Arduino IDE, go to Sketch -> Include Library -> Manage Libraries. Type “PHPoC” on the search box. Click on PHPoC row and click the “Install” button. Then restart Arduino IDE.

Or you can get the .zip file here: https://github.com/phpoc/arduino

3. Connect LAN cable (or USB Wi-Fi Dongle) to the PHPoC Shield.

4. Open examples via Arduino IDE:

• DateTime: go to File -> Examples -> Phpoc -> DateTime
• WebRemotePush: go to File -> Examples -> Phpoc -> WebRemotePush
• WebRemoteSlide: go to File -> Examples -> Phpoc -> WebRemoteSlide

5. Open a web browser and type the IP address of PHPoC Shield in the address bar.

• Run DateTime example, click "Web Serial Monitor" link.
• Run WebRemotePush example, click "Web Remote Control / Push" link.
• Run WebRemoteSlide example, click "Web Remote Control / Slide" link.

For detail information, see http://www.phpoc.com/support/manual/phpoc_shield_for_arduino/contents.php?id=webapp_monitor

Websocket at a glance

I am not going to describe what is Websocket in detail. I am just going to briefly introduce some advantages of Websocket in terms of monitoring and controlling as per my understanding by comparing it to other solutions.

A normal web page

After loading a webpage, the connection between client and server is closed. To update a webpage, it needs to reload the entire webpage.

Disadvantage

• When we want to update a part of a webpage, we have to update entire webpage, producing unnecessary traffic load in the network.
• The server cannot send data to the client if the client does not reload page. This is not suitable for real-time monitoring applications.

Webpage containing Ajax

When the client wants to update a part of a webpage, it makes an Ajax request to get data from the server and update the part of the webpage. The connection between client and server is closed after each Ajax request.

Advantage

• Update part of web page without reloading the entire page (reduce traffic load)
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background

Disadvantage

• Since the connection is closed after each request, the server cannot send data to client if the client does not request data. This is not suitable for real-time monitoring applications.

Webpage containing Websocket

It overcomes the disadvantages of Ajax. A connection between client and server is maintained.

Advantage

• Since the connection is maintained, both server and client can send data to each other in real-time.

The Best Arduino Starter Kit for Beginner

If you are looking for an Arduino kit, see The Best Arduino Kit for Beginners

Function References

• Serial.begin()
• Serial.println()
• delay()
• millis() ​​​​​​​
• for loop
• while loop
• if else
• loop()
• setup()
• String.toInt()
• String.substring()
• String.indexOf()
• String.remove()
• String.equals()