ShopSocket

Description

ShopSocket puts what is happening in your store on screen the moment it happens, for staff and shoppers alike. Think of Shopify’s Live View, for WooCommerce: who is on your store right now, what is in their carts, and every order the moment it lands.

Try it first: shopsocket.wpsignal.io is a live demo store running ShopSocket. Open a product in two browsers, add it to the cart in one, and watch the other update.

For your team: the ShopSocket board

A screen under WooCommerce that staff keep open all day.

• Live orders: every new order lands on the board the instant it is placed, with a chime, and status changes update the row in place
• Carts, live and abandoned: how many shoppers hold a cart right now, how many have left with one still held, and the revenue in each
• Products in live carts: what shoppers on the site are holding at this moment, with the number of carts and units for each, linking to the product’s edit screen
• Users online and open connections, straight from the relay
• Low-stock and out-of-stock alerts as they happen
• Full-screen mode for a wall display

Live and abandoned are not guesses from timestamps. A cart is live exactly while its shopper has an open connection to the site, and flips to abandoned the instant their last tab closes.

For shoppers: the storefront

• Stock text on product pages updates in place when the product sells out or comes back, and the add-to-cart button follows
• “N shoppers have this in their cart right now” under the price, kept current as carts change
• “Someone just added this to their cart” toasts, shown only for products the shopper also holds
• A shopper holding a product that sells out hears at once, wherever they are, and the cart shows WooCommerce’s own notice without a reload
• The Live Stock block: availability, units left, and the in-cart counter as one block for the Single Product template or any page
• A card on WordSocket’s Extensions tab with the connection state and a link to the board

How it works

WordSocket carries the events over one WebSocket per browser, with an SSE fallback. ShopSocket publishes order, stock, and cart events from WooCommerce’s own hooks, and reads presence from the relay to tell live carts from abandoned ones. The storefront never polls: it fetches once per page load and then only reacts to events. The board does the same, plus a quiet refresh every 30 seconds as a safety net in case an event is ever missed.

ShopSocket requires WordSocket and a WPSignal account. WPSignal is an independent service and is not affiliated with or endorsed by the WordPress project, WooCommerce, or Shopify. Shopify is a trademark of Shopify Inc., named here only for comparison.

What leaves your site, and who can read it

Every event is encrypted before it leaves WordPress, and WPSignal cannot read it. WordSocket encrypts the contents of every event with AES-256-GCM before it is sent: always on HTTPS sites, and on plain HTTP sites too with WordSocket 0.25 or later (older versions encrypt only over HTTPS). The key is derived from your site’s own WordPress salts in wp-config.php, which never leave your server and which WPSignal never has. The service relays ciphertext it has no way to open: it never sees an order total, a customer name, a product, or a stock level.

What is inside those encrypted events:

• Order events, on a staff-only channel: the order number, status, total, item count, payment method, and the customer’s first name and last initial. No email, address, or line items.
• Stock and cart-activity events, public to your storefront: product names, permalinks, thumbnails, and counts, plus the anonymous cart id of the shopper behind the change, so a shopper’s own adds and purchases are never announced back to them.

What the service does see, only because it needs it to route messages: channel names, how many browsers are connected, and each shopper’s presence, which is a random per-browser id and a keyed hash identifying their cart. None of it is personal, and none of it is reversible.

Third-Party Service

ShopSocket relies on the WPSignal service at api.wpsignal.io, reached through the WordSocket plugin. ShopSocket opens no connection of its own: everything below travels over the connection WordSocket already holds for your site.

• Event publishing: when an order is placed or changes status, stock changes, or a product is added to a cart, WordSocket sends an HMAC-signed HTTP request to the service with the event described under “What leaves your site”.
• Realtime connections: browsers on your storefront and the staff board connect to the service over WebSocket (or SSE) to receive those events. Shoppers’ browsers also announce their presence on the site, which is how the board tells a live cart from an abandoned one.
• Connection count: the board asks the service how many browsers are connected to your site right now.

Events are relayed in realtime and are not stored on the service. Event contents are AES-256-GCM encrypted before they leave WordPress (on HTTPS sites, and on plain HTTP ones with WordSocket 0.25 or later), with a key derived from your site’s own WordPress salts, so the service relays ciphertext it cannot read. A WPSignal account is required; the free plan is enough to start.

• Terms of Service
• Privacy Policy

Source code and build steps

ShopSocket is developed in the open. The full, uncompiled source for everything in build/, together with the build tooling, lives at github.com/wpsignal/wordsocket-extensions under shopsocket/.

The compiled files in build/ are generated from src/ with:

npm install
npm run build

That runs @wordpress/scripts (webpack) for the board, settings and block bundles, and tsc for the Interactivity API storefront modules. The bundled styles under build/style-*.css are produced by that same build from @wordpress/components, which is GPL-2.0-or-later.

Technical details