Shawn McCabe
Author Shawn McCabe
CTO
Posted in Development , Drupal , Tech Talk
June 7, 2018
read
Back to blog

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 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 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 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 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 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 module issue: https://www.drupal.org/project/commerce_pos/issues/2950980
Ratchet PHP Library: http://socketo.me/

Contact us and learn more about our custom ecommerce solutions

Drupal 8 Introduces Inline Editing… Finally

Drupal 7 had a lot of strengths, but editing was not one of them. It was embarrassingly terrible. You were more or less OK if you just wanted to ...
Keep Reading »

Open source is teaching others to fish

Mentoring the 2018 Nashville Drupalcon Sprint I don’t have the patience to fish. But I was once taught how to “fish” (contribute to open source) and ...
Keep Reading »

The Drupal Community's Work With React

Acro Media’s own Josh Miller takes a minute to analyze how a Drupal community core initiative is solving for the JavaScript frontend framework React.
Keep Reading »

Fields marked with * are required.

×
×