Why the ChatGPT Web Chat Uses EventSource Instead of WebSocket

1. Introduction

When building a browser‑based real‑time conversation system, developers often choose WebSocket for bi‑directional communication, but in some scenarios EventSource is a worthwhile alternative.

This article explores why the ChatGPT dialogue system selects EventSource rather than WebSocket, providing code examples and detailed explanations.

2. Overview of WebSocket and EventSource

2.1 WebSocket

WebSocket is a full‑duplex protocol over a single TCP connection, allowing the server to push data to the client without the client initiating each request.

2.2 EventSource

EventSource, introduced in HTML5, is a lightweight, text‑based protocol for server‑sent events built on HTTP; it provides one‑way server‑to‑client push.

3. Characteristics of the ChatGPT Dialogue System

The system is a browser‑side real‑time chat application with the following traits:

One‑way communication: Users send messages to the model, and the model replies.

Long polling: The system typically waits for model responses using long polling.

4. Advantages of EventSource

4.1 Simplicity

EventSource is easy to use; it requires only creating an EventSource object with a URL, without handshakes or complex initialization.

4.2 Fault tolerance

When the connection drops, EventSource automatically attempts reconnection, relieving developers from manual reconnection logic.

4.3 Compatibility

Most modern browsers natively support EventSource, whereas WebSocket may need extra handling for older browsers.

5. Why Choose EventSource Over WebSocket?

5.1 One‑way communication model

The chat system’s communication is inherently one‑way, so the bidirectional capability of WebSocket adds unnecessary complexity.

5.2 Long‑polling mode

EventSource naturally supports the long‑polling pattern used by ChatGPT, while WebSocket offers no clear benefit here.

5.3 Simplified deployment and maintenance

Because EventSource runs over HTTP, there is no need to manage WebSocket handshakes or heartbeats, resulting in a simpler architecture.

6. Code Example Using EventSource

6.1 Server‑side implementation

Node.js with Express demonstrates a basic EventSource server:

const express = require('express');
const { v4: uuidv4 } = require('uuid');

const app = express();
const port = 3000;

const clients = new Map();

app.get('/events', (req, res) => {
  const clientId = uuidv4();
  const newClient = res;
  clients.set(clientId, newClient);

  req.on('close', () => {
    clients.delete(clientId);
  });

  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders();

  clients.forEach(client => {
    client.write(`data: A new user joined!\n\n`);
  });
});

app.post('/send-message', express.json(), (req, res) => {
  const { message } = req.body;

  clients.forEach(client => {
    client.write(`data: ${message}\n\n`);
  });

  res.status(200).send('Message sent successfully!');
});

app.listen(port, () => {
  console.log(`Server is listening at http://localhost:${port}`);
});

6.2 Client‑side implementation

In the browser, JavaScript creates an EventSource and handles incoming messages:

const eventSource = new EventSource('http://localhost:3000/events');

eventSource.onmessage = (event) => {
  const message = event.data;
  console.log(`Received message: ${message}`);
};

document.getElementById('sendMessageBtn').addEventListener('click', () => {
  const message = prompt('Enter your message:');
  fetch('http://localhost:3000/send-message', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message }),
  });
});

The client establishes a connection via EventSource, listens for onmessage events, and sends messages through a button‑triggered POST request.

7. Performance Considerations and Extensions

7.1 Performance

WebSocket generally offers lower latency and higher throughput, but for applications without strict real‑time requirements, EventSource provides sufficient performance with greater simplicity.

7.2 Future extensions

The ChatGPT system could later add WebSocket support for scenarios demanding lower latency, offering a flexible communication mechanism.

8. Conclusion

This article examined why the ChatGPT web chat prefers EventSource over WebSocket, highlighting protocol basics, system characteristics, EventSource advantages, and practical code examples, while also discussing performance trade‑offs and potential future enhancements.