Synchronize Multiple Channel Clients

Learn how to synchronize our cart across multiple tabs and pages.

Synchronize our cart

Each shopper that joins our ShoppingCartChannel does so on a private topic, like cart:123abc. This cart ID is random and long, so we can uniquely identify a cart. To synchronize our cart across multiple tabs, we’ll use this topic. We’ll send the serialized version of our cart using Phoenix.PubSub and intercept it in the ShoppingCartChannel. It will only be received by Channel processes running with that same cart ID.

Let’s add the following code to the ShoppingCartChannel module—we’ll walk through the critical parts.

Get hands-on with 1200+ tech skills courses.