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.
- 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.
- 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
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)
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.