How to Build a Reliable, Low‑Latency IM Chat for Customer Service – Front‑End Techniques Revealed

Introduction

In enterprise customer‑service scenarios a single chat message triggers a cascade of technical requirements—network transmission, front‑end rendering, back‑end storage, security, and reliability. Although the UI interaction appears as a simple "type‑and‑send" action, the underlying system must guarantee real‑time delivery, no loss, correct ordering, and smooth user experience.

Why IM Messages Matter

Instant response improves user satisfaction.

Personalized interaction meets specific user needs.

Data analysis of chat logs reveals behavior patterns and drives service improvement.

These factors make reliable, efficient, and secure messaging essential for both users and agents.

Evolution of Customer‑Service IM

The journey from outsourced solutions to a self‑built, one‑stop IM workbench introduced several milestone challenges such as message loss, duplicate delivery, and out‑of‑order display. Each problem was tackled with dedicated technical projects, gradually achieving near‑zero loss and stable performance.

Technical Details

1. Reliable Message Transmission

Reliability is broken into three sub‑requirements:

Real‑time delivery – Users expect messages to appear within milliseconds. The Go‑based IM gateway processes validation, storage, ACK generation, multi‑device sync, and retry logic all within the millisecond range.

Application‑level reliability – TCP guarantees transport‑layer reliability, but the system adds a business‑layer ACK protocol (inspired by TCP’s ACK) to confirm receipt. A batch‑ACK strategy reduces overhead for bulk events (e.g., session refresh) and achieved 100% delivery verified by data‑point tracking, cutting debugging effort by over 70%.

Ordered delivery – The gateway assigns a monotonically increasing Seq number. Front‑end components sort incoming messages by this sequence, ensuring both sender and receiver see the same order. A real‑world case showed two messages sent 300 ms apart could become disordered without this mechanism.

Message flow diagram:

2. Idempotency

Duplicate sends occur when the ACK is not received before the timeout, triggering retries up to a maximum count. The system deduplicates messages using a unique Message ID, balancing the extra CPU cost of hashing and sequence checks against the need to avoid user‑visible duplication.

3. Lag‑Optimization Strategies

Asynchronous processing – Low‑priority tasks are pushed to the async queue, freeing the main thread for high‑priority UI updates such as immediate message display.

Segmented rendering – Only the visible portion of the chat list is rendered. Three approaches were evaluated:

setTimeout‑based batch rendering (rejected due to frame‑skip risk). requestAnimationFrame – consolidates DOM changes per frame, aligns with the browser’s refresh rate, and automatically pauses when the page is hidden, reducing CPU/GPU usage.

IntersectionObserver – detects when list items enter the viewport and triggers lazy rendering, avoiding unnecessary work.

Message traversal – The original third‑party SDK used nested for loops, causing UI freezes with large conversation histories. Re‑implementing the traversal with a binary‑search‑based algorithm reduced chat latency by ~20%.

4. Security Considerations

While the article does not detail implementations, it emphasizes embedding security awareness throughout development to ensure robust, tamper‑resistant messaging.

5. Latency Sources and Mitigations

Network latency – Long‑link transmission adds delay; reducing payload size helps.

System load – High concurrent sessions increase processing time.

Front‑end processing – Local queues, caching, and rendering add overhead.

Encoding/decoding – JSON serialization is slower and larger than binary formats.

To address the last two points, the team migrated from JSON to Protocol Buffers (ProtoBuf). Benchmarks showed:

Encoding: ProtoBuf is significantly faster because it writes binary data directly.

Decoding: Slightly slower for tiny messages but vastly more efficient for large, complex structures.

Payload size: ProtoBuf reduces network bandwidth, lowering transmission latency and cost.

6. Agent Experience and Interaction

Through continuous UI/UX research and data analysis, the team lifted agent satisfaction by 18%. Key improvements included faster message echo, clearer visual cues, and smoother input handling. The article stresses that experience gains require iterative testing, user feedback, and balanced trade‑offs.

Future Plans

Continue experience optimization (color schemes, button placement, visual feedback).

Complete ProtoBuf migration and evaluate compression for bulk/history messages.

Extend functionality: richer bot messages, message quoting, tagging.

Prepare multi‑language support for future internationalization.

Conclusion

Even a seemingly trivial "send" action in an IM system involves a complex chain of technical decisions—reliable transmission, ordering, idempotency, performance tuning, security, and user‑experience considerations. By systematically analyzing each step, measuring concrete metrics, and applying targeted optimizations, the team built a stable, low‑latency, and agent‑friendly chat platform.