This article is about how to use PHP application which can update client's browser.
Simple and basic example:
You run Point Of Sale system with help of PHP. You have two monitors. First for the vendor, second for the customer. Vendor creates receipt, saves it. On his/her monitor (browser), everything will be updated. The problem is with customer's monitor. Normally PHP uses HTTP and when it sends information to browser, it is static. It cannot change the information sent and displayed in client's browser. There are different methods to do this (Ajax Polling, Ajax Long-Polling, HTML5 SSE, HTML5 Websockets). There are pros and cons of each method. For example, the disadvantage of Ajax Polling is, it takes a lot of server's resources. Client's browser (monitor where customer sees the information) runs JavaScript which requests information from the server at regular intervals (e.g. 0.5 seconds). Running Javascript on client's browser asking the server for updates every 0.5 or every second is really not efficient.
Our goal is to refresh information set on customer's monitor but with some more efficient way. See the video:
( :-) BTW - in this video, it may seem that the updating of information on external monitors takes a lot of time but it doesn't. Information is updated immediately. With a click on Save button I just waited until the camera was pointed at the monitors)
We use Websockets method in our example - with help of Ratchet library.
(Using Ratchet to create real time, bi-directional application between clients and server over WebSockets)
What we need to run POS written in PHP and be able to update information on one or more external monitors.
Hardware - Installation:
- PC with operating system (in our case Windows 8)
- One or two external monitors (in our case: 1 monitor connected to HDMI, second TV connected to VGA)
Software - Installation:
- Apache, PHP, MySQL (we can use standard XAMPP installation)
- We will create standard and really simple PHP application, which displays form and when form is filled and saved, data will be stored in database
- Install Ratchet - see https://socketo.me/
- Implement the basic functions of Ratchet - see Hello World example: https://socketo.me/docs/hello-world - with help of Javascript we just refresh the customer's browser when an update will be made on vendor's browser, we use really simple Javascript for this:
Vendor's administration site - when it is reloaded after saving the form, message to customer's browser will be sent:
jQuery( document ).ready(function() {
var conn = new WebSocket('ws://localhost:8080');
conn.onopen = function(e) {
conn.send('refresh');
};
});
Customer's browser site:
var conn = new WebSocket('ws://localhost:8080');
conn.onmessage = function(e) {
if (e.data == 'refresh') {
location.reload();
}
};
Running the POS:
- Start it with help of batch file.
- Batch file first closes every instance of PHP, Firefox and Chrome
- It starts PHP script (chat-server.php) created with help of Ratchet guide
- It starts Firefox in current computer - for managing the POS by vendor
- It starts two instances of Google Chrome in each external display (monitor and TV) in Kiosk mode, so the browser will display full screen.
@echo off
taskkill /F /IM chrome.exe /T
taskkill /F /IM firefox.exe /T
taskkill /F /IM php.exe /T
start ... php.exe ... chat-server.php
start firefox "https://localhost/.../adminstration.php"
REM ONE MONITOR
REM start chrome -kiosk "https://localhost/.../frontpage.php" -no-first-run -touch-events=enabled -fast -fast-start -disable-popup-blocking -disable-infobars -disable-session-crashed-bubble -disable-tab-switcher -disable-translate -enable-low-res-tiling
REM TWO MONITORS
start chrome --profile-directory=Default --app-id=xxxxxxxxxxxxxxxxxyyyyyyyyyyyyyyyy -kiosk -no-first-run -touch-events=enabled -fast -fast-start -disable-popup-blocking -disable-infobars -disable-session-crashed-bubble -disable-tab-switcher -disable-translate -enable-low-res-tiling
start chrome --profile-directory=Default --app-id=yyyyyyyyyyyyyyyyyxxxxxxxxxxxxxxxx -kiosk -no-first-run -touch-events=enabled -fast -fast-start -disable-popup-blocking -disable-infobars -disable-session-crashed-bubble -disable-tab-switcher -disable-translate -enable-low-res-tiling
When vendor stores the form, the page will be reloaded and message to customer's browser will be sent. Customer's browser site will be reloaded to get current information.