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

• How to Control Devices via WebSocket
• How to Monitor Sensors/Devices via WebSocket

Glossary

• Server: Server or PHPoC devices
• Client: Web Client on Web Browser.