Angular NGXS and WebSockets with Laravel backend

Hopefully you have already worked with the exciting state management system for Angular 2+ NGXS. I found that there isn’t a lot of content online about NGXS +WebSocket + Laravel. So here I am, I would like to share how to add WebSocket integration for your Angular App if you are using Laravel as backend.

Let’s get started with a simple scheme, which explains how it works in general:

Let’s go deep into details:

connectToSocket() {const currentUser = JSON.parse(localStorage.getItem('currentUser'));const clientId = uuid.v4(); SetClientID(clientId));if (currentUser && currentUser.token) { ConnectWebSocket({url: `${environment.nodeServerIp}?channelName=private-budget-${}&token=${currentUser.token}&email=${currentUser.username}&clientId=${clientId}`,}),);}}

2. The client sends typical REST requests to Laravel with clientID and channelName in a payload.

Patch request to Laravel REST server

3. Laravel extracts clientId and channelName and fires the Event class, which sends a message to Redis channel

event(new UpdateBudgetEvent($clientId, $budgetId, $budgets));**** UpdateBudgetEvent class ****class UpdateBudgetEvent extends Event implements ShouldBroadcast
// broadcastOn method will send to Redis all PUBLIC properties
public function broadcastOn()
$data['type'] = '[App] SocketUpdateBudget';
$data['data'] = $this->budget;
$this->data = json_encode($data);
return new PrivateChannel('budget-' . $this->budgetId);

4. Nodejs application listens to Redis channel and when a message comes, NodeJs sends a message to the relevant client in the right channel

redis.on('pmessage', (pattern, channel, message) => {message = JSON.parse(message);wss.clients.forEach((client) => {// Check channelif (client.channelName == channel) {// Check clientif (client.clientId != {client.send(;}}

5. NGXS will automatically get this message (from WebSocket frame) and dispatch the action which will adjust your state

// app.actions.ts
export class SocketUpdateBudget {
static readonly type = '[App] SocketUpdateBudget';constructor(public data: any[]) {}}// app.state.ts
socketUpdateBudget(ctx: StateContext<AppStateModel>,data: SocketUpdateBudget,) {const state = ctx.getState();// DO your logic with state here}

And that’s actually it, pretty straightforward. Hope it any Angular/NGXS developers out there.

Final result:


If you want to see more you can also play around at

Hope it was useful reading, don’t hesitate if you have questions or comments and don’t forget to 👏 if this article saves some time in your coding path…

A new way to manage your marketing budget.

A new way to manage your marketing budget.