# How We Built Our In-house Chat Platform for the Web

[Grab](https://yomu.fyi/company/grab) · Vasu Krishnamoorthy · Jun 29, 2020

**Type:** Problem & solution

## Summary

Grab extended its in-house chat platform to the web to support its internal Customer Support portal. Because the existing TCP gateway only supports unicast connections with one active connection per user, opening multiple browser tabs would repeatedly disconnect previous tabs. Rather than undertaking a complex migration to multicast connections on the server, the team adopted a hybrid client-side strategy using SharedWorker and BroadcastChannel APIs. The implementation uses a SharedWorker to maintain a single WebSocket connection per domain while a BroadcastChannel syncs events across all open tabs. A custom wrapper over the worker manages version transitions during deployments to avoid race conditions across tabs.

## Context

Grab's TCP gateway enforced unicast connections that allowed only one active connection per user, which broke in web browsers when Customer Support agents opened multiple tabs simultaneously.

## Approach / What changed

Grab used the SharedWorker API to maintain a single socket connection to the server across all tabs within a domain, combined with BroadcastChannel to synchronize outgoing and incoming chat messages across browser contexts.

## Takeaways

- Using a SharedWorker allows a browser application to maintain a singleton socket connection across multiple tabs within the same origin.
- The BroadcastChannel API acts as an intra-origin message bus to keep chat state synchronized across active tabs when users send or receive messages.
- Because SharedWorker uniqueness relies on script names and origin, separate tabs opened across a deployment can run conflicting script versions unless handled by a wrapper that yields control to the newest version.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Developer Experience](https://yomu.fyi/topic/developer-experience), [TypeScript](https://yomu.fyi/topic/typescript)

[Read original post](https://engineering.grab.com/how-we-built-our-in-house-chat-platform-for-the-web)