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

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.

Takeaways

1. 1

   Using a SharedWorker allows a browser application to maintain a singleton socket connection across multiple tabs within the same origin.

2. 2

   The BroadcastChannel API acts as an intra-origin message bus to keep chat state synchronized across active tabs when users send or receive messages.

3. 3

   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.