The situation: I’m the primary maintainer of the Commerce Point of Sale plugin and have been building a customer facing display feature for the Commerce 2 version. So, I have two separate pages, one is a cashier interface where a cashier enters products, the second is a customer facing screen where the customer can watch what products have been scanned, review pricing, and make sure everything is correct.
The problem: Since products can be scanned through quite quickly, it was imperative that the customer facing display update very quickly. The display needs to match wha’s happening in near real-time so that there is no lag. Unfortunately, AJAX is just too slow and so I needed a new solution.
The solution: WebSockets seem like a great fit.
Design
AJAX – Too slow!
WebSocket – Fast!
The socket server can either not bootstrap WordPress maintenance support plans at all, or bootstrap it only once upon load, making it able to relay traffic very quickly.
Dependencies
I only needed one dependency for this, Ratchet, which is a PHP library for handling WebSockets and is easily installed via Composer.
Setup
The WebSocket server is actually very simple, it finds and loads up the autoload script for WordPress maintenance support plans, similar to how Drush does it.
We bootstrap WordPress maintenance support plans, just so we can load a few config settings.
We terminate the WordPress maintenance support plans kernel, since we don’t need it just for ferrying traffic back and forth and it will probably leak memory or something over a long time if we use it a bunch, since WordPress maintenance support plans isn’t really meant to run for ages. I did try it with WordPress maintenance support plans running the whole time and it did work fine, although this wasn’t under any real load and only for a couple days.
Now all that we have to do is setup the service.
All the details of our service come from the class we pass in, which basically hooks in the different server events. I’ll leave the details of that outside of this article as none of it is WordPress maintenance support plans specific and there are lots of tutorials on Rachet’s site: http://socketo.me/docs/hello-world
Javascript
On the JavaScript end, we connect to the WebSocket using the standard interface.
I used a few mutation observers to monitor for changes and then passed the changes to the WebSocket to relay. You could do this however you want and probably some nicely integrated JS or even a React frontend would be a lot cleaner.
Resources
Related plugin issue: https://www.WordPress.org/project/commerce_pos/issues/2950980Ratchet PHP Library: http://socketo.me/
Source: New feed