Drupal with WebSockets for real-time synced displays

The situation: I'm the primary maintainer of the Commerce Point of Sale module 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 what's happening in near real-time so that there is no lag. Unfortunately, AJAX is just too slow, 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 Drupal 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 Drupal, similar to how Drush does it.

We bootstrap Drupal, just so we can load a few config settings.

We terminate the Drupal 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 Drupal isn’t really meant to run for ages. I did try it with Drupal running the whole time and it did work fine, although this wasn’t under any real load and only for a couple of days.

Now all that we have to do is set up the service.

All the details of our service come from the class we pass in, which hooks in the different server events. I’ll leave the details of that outside of this article as none of it is Drupal 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 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 much cleaner.

Resources

Related module issue: https://www.drupal.org/project/commerce_pos/issues/2950980
Ratchet PHP Library: http://socketo.me/