Announcement

Collapse
No announcement yet.

WebSocket

Collapse
X
Collapse

  • WebSocket

    Introduction to WebSocket

    The WebSocket is one of the new features of HTML5. It is used to bi-directional exchange data between client (e.g Web browser) and server without reloading webpage. The WebSocket reduces polling and the network throughput overhead.

    In a simple words, to exchange data between web client and server,
    • Without WebSocket, we need to reload all or part of web page.
    • Without WebSocket, If data is available on server, server has to wait until client request for data
    • With WebSocket, we do NOT need to reload web page because data is exchanged via WebSocket.
    • With WebSocket, If data is available on server, server can send data immediately.
    There are two main advantages of WebSocket:

    - Network Throughput Overhead
    • Without WebSocket, To exchange data, client need to make HTTP request and Server send HTTP response. Data is included in HTTP request or response. HTTP request and response is one of factors that increase traffic on network.
    • With WebSocket, data can be exchanged immediately via WebSocket, significantly reducing network overhead (due to HTTP request and response).
    • Without WebSocket, To get data from server, client needs to make request to server although data may not be available on server. This is also one of factors that increase traffic on network.
    • With WebSocket, To get data from server, client does NOT need to make request to server. Because server can send data immediately to client right after data is available.
    - Network Latency
    • Without WebSocket, if web server have data to send to web client, web server has to wait for request from web client. Data is delayed.
    • With WebSocket, web server can send data to web client anytime without having to wait for request from web client.

    Without WebSocket, if we want to get the updated data frequently, we need to make request frequently (Polling)
    The below images shows the differences between polling (without WebSocket) and WebSocket.



    WebSocket includes two parts:
    • WebSocket Sever: is run on server
    • WebSocket Client: is JavaScript-based program, is part of webpage an is run on Web Browser
    When WebSocket connection is established, data can be send bi-directionally between client and server.

    Why can server send data to client immediately if using WebSocket and can NOT if not using WebSocket?

    When you use a web browser to access a webpage:
    • Web browser ( act as client) makes HTTP request to server, a connection (TCP connection) is created.
    • Server sends the HTTP response to web browser.
    • The connection is closed when client receives the response (webpage)
    Because the connection is closed, server can NOT send data to client unless client makes HTTP request again.

    If using WebSocket, another connection is created and maintained. Therefore, Server can send data to client at anytime and vice verse without making HTTP request again.

    WebSocket on PHPoC

    PHPoC has built-in Web and WebSocket server.

    WebSocket Client Side

    WebSocket Client code is JavaScript Code and is a part of webpage. The webpage is stored in PHPoC devices (web server). Web browser loads webpage from PHPoC devices. At web browser, JavaScript Code is run to create the WebSocket Client and make connection to WebSocket Server.

    WebSocket Server Side

    WebSocket Server code is PHPoC code. It's stored in PHPoC devices and run in system loop.

    When WebSocket connection between Web Browser and PHPoC devices is created, data can be exchanged bi-directionally via the WebSocket. The data can be used to:
    • Real-time monitor sensors/devices (server send data to client)
    • Real-time control actuators/devices (Client send data to server)

    See Also
    Glossary
    • Server: Server or PHPoC devices
    • Client: Web Client on Web Browser.
    Last edited by support; 02-08-2018, 06:19 PM.
      Posting comments is disabled.

    Categories

    Collapse

    Latest Articles

    Collapse

    • Arduino - RS-485 Expansion Board
      support
      PES-2607 is an easy-to-use RS422/RS485 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS422 or RS485.
      Especially, Arduino does NOT use UART pins to communicate with RS422/RS485 expansion board. Therefore, users can use Arduino UART pins for other purposes.
      Moreover, A single Arduino Uno/Mega can communicate with multiple RS422/RS485 expansion boards (up to 14) without using Arduino UART pins.

      Library and examples for...
      11-13-2018, 03:45 PM
    • Arduino - RS-422 Expansion Board
      support
      PES-2607 is an easy-to-use RS422/RS485 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS422 or RS485.
      Especially, Arduino does NOT use UART pins to communicate with RS422/RS485 expansion board. Therefore, users can use Arduino UART pins for other purposes.
      Moreover, A single Arduino Uno/Mega can communicate with multiple RS422/RS485 expansion boards (up to 14) without using Arduino UART pins.

      Library and examples for...
      11-13-2018, 03:44 PM
    • Arduino - RS-232 Expansion Board
      support
      PES-2606 is an easy-to-use RS-232 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS-232.
      Especially, Arduino does NOT use UART pins to communicate with RS-232 expansion board. Therefore, users can use Arduino UART pins for other purposes.
      Moreover, A single Arduino Uno/Mega can communicate with multiple RS-232 expansion boards (up to 14) without using Arduino UART pins.

      Library and example for the RS-232 expansion board...
      11-13-2018, 03:43 PM
    • Arduino - Stepper Motor Controller
      support
      PES-2605 is an easy-to-use stepper motor controller for Arduino Uno and Mega, which uses micro-stepping method to precisely control stepper motor.
      Library and example for the stepper motor controller are part of of PhpocExpansion library for Arduino. The library reference is available here.

      This tutorial shows how to use the step motor controller with an example of PhpocExpansion library for Arduino.


      Hardware Required...
      11-13-2018, 03:41 PM
    • Arduino - DC Motor Controller
      support
      PES-2604 is an easy-to-use DC motor controller for Arduino Uno and Mega.
      Library and example for the DC motor controller are part of of PhpocExpansion library for Arduino. The library reference is available here.

      This tutorial shows how to use the DC motor controller with an example of PhpocExpansion library for Arduino.


      Hardware Required...
      11-13-2018, 03:40 PM
    • Arduino - Digital Input Board
      support
      PES-2602 is an easy-to-use 4-port Input Expansion Board for Arduino Uno and Mega, which allows Arduino to monitor state of DC electric device. In addition, it can monitor NPN, PNP and dry contact(relay).
      Library and example for the 4-port input expansion board are part of of PhpocExpansion library for Arduino. The library reference is available here.

      This tutorial shows how to use 4-port input expansion board with an example of PhpocExpansion library for Arduino.

      ...
      11-13-2018, 03:39 PM
    Working...
    X