Why WebSocket proxying in Nginx? - Purpose & Use Cases

The Big Idea

Discover how a simple nginx setting can transform your app's real-time magic!

The Scenario

Imagine you have a chat app that needs to keep a live connection open between users and the server. Without WebSocket proxying, you try to handle these connections directly on your backend, but your server is behind a web server like nginx that doesn't know how to keep these connections alive.

The Problem

Manually managing WebSocket connections without proxy support is slow and error-prone. The web server might close connections too early or fail to forward messages properly, causing chat messages to drop or delays. This makes real-time apps frustrating and unreliable.

The Solution

WebSocket proxying in nginx lets the web server understand and forward WebSocket connections correctly. It keeps the connection open and passes messages back and forth smoothly, so your real-time app works fast and reliably without extra backend hassle.

Before vs After

✗ Before

location /chat {
    proxy_pass http://backend;
}

✓ After

location /chat {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

What It Enables

It enables seamless real-time communication by letting nginx handle WebSocket connections efficiently and reliably.

Real Life Example

A live sports score app uses nginx WebSocket proxying to instantly update scores on users' screens without refreshing the page.

Key Takeaways

Manual handling of WebSocket connections behind nginx causes dropped or slow messages.

nginx WebSocket proxying keeps connections open and forwards messages correctly.

This makes real-time apps like chats and live updates fast and reliable.

Practice

1. What is the main reason to use proxy_set_header Upgrade $http_upgrade; in nginx when proxying WebSocket connections?

easy

A. To tell nginx to allow the connection to switch protocols to WebSocket

B. To set the client's IP address in the header

C. To enable gzip compression for WebSocket data

D. To disable caching for WebSocket requests

Solution

1. Step 1: Understand the Upgrade header role

   The Upgrade header tells the server to switch from HTTP to another protocol, here WebSocket.

2. Step 2: Recognize nginx's proxy_set_header usage

   Setting proxy_set_header Upgrade $http_upgrade; passes the client's Upgrade header to the backend, enabling protocol switching.

3. Final Answer:

   To tell nginx to allow the connection to switch protocols to WebSocket -> Option A

4. Quick Check:

   Upgrade header enables protocol switch = A [OK]

Hint: Upgrade header signals WebSocket protocol switch [OK]

Common Mistakes:

• Confusing Upgrade with client IP headers
• Thinking it enables compression
• Assuming it disables caching

2. Which of the following nginx configuration snippets correctly enables WebSocket proxying?

easy

A. proxy_http_version 1.0; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";

B. proxy_http_version 1.1; proxy_set_header Upgrade "websocket"; proxy_set_header Connection "close";

C. proxy_http_version 2.0; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "keep-alive";

D. proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";

Solution

1. Step 1: Identify required HTTP version for WebSocket

   WebSocket proxying requires HTTP/1.1 because HTTP/1.0 does not support the Upgrade header properly.

2. Step 2: Check correct headers for WebSocket

   The Upgrade header must be passed as $http_upgrade and Connection header must be "upgrade" to maintain the protocol switch.

3. Final Answer:

   proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; -> Option D

4. Quick Check:

   HTTP/1.1 + Upgrade + Connection upgrade = B [OK]

Hint: Use HTTP/1.1 and set Upgrade and Connection headers correctly [OK]

Common Mistakes:

• Using HTTP/1.0 instead of 1.1
• Setting Connection to keep-alive or close
• Hardcoding Upgrade header instead of using $http_upgrade

3. Given this nginx config snippet inside a location block:

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://backend_server;

What will happen if a client tries to establish a WebSocket connection through nginx?

medium

A. The connection will be cached by nginx, causing stale data.

B. The WebSocket connection will be successfully proxied to the backend server.

C. The connection will be proxied but without protocol upgrade, causing failure.

D. The connection will fail because HTTP/2 is required for WebSocket.

Solution

1. Step 1: Analyze HTTP version and headers

   The config uses HTTP/1.1 and sets Upgrade and Connection headers correctly for WebSocket proxying.

2. Step 2: Understand nginx behavior with this config

   nginx will forward the WebSocket upgrade request to the backend, enabling a successful WebSocket connection.

3. Final Answer:

   The WebSocket connection will be successfully proxied to the backend server. -> Option B

4. Quick Check:

   Correct HTTP version and headers = successful proxy [OK]

Hint: HTTP/1.1 + Upgrade + Connection upgrade = success [OK]

Common Mistakes:

• Thinking HTTP/2 is required for WebSocket
• Assuming protocol upgrade is automatic without headers
• Believing nginx caches WebSocket connections

4. You have this nginx config for WebSocket proxying:

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "keep-alive";
proxy_pass http://backend;

Why might WebSocket connections fail with this setup?

medium

A. Because Connection header should be "upgrade" not "keep-alive" for WebSocket

B. Because proxy_http_version should be 1.0 for WebSocket

C. Because Upgrade header should be hardcoded to "websocket"

D. Because proxy_pass URL is missing a trailing slash

Solution

1. Step 1: Check Connection header value

   For WebSocket proxying, Connection header must be "upgrade" to signal protocol switch.

2. Step 2: Identify impact of incorrect Connection header

   Using "keep-alive" prevents the protocol upgrade, causing WebSocket connection failure.

3. Final Answer:

   Because Connection header should be "upgrade" not "keep-alive" for WebSocket -> Option A

4. Quick Check:

   Connection header must be upgrade for WebSocket [OK]

Hint: Connection header must be "upgrade" for WebSocket [OK]

Common Mistakes:

• Using keep-alive instead of upgrade
• Setting HTTP version to 1.0
• Hardcoding Upgrade header instead of using $http_upgrade

5. You want to proxy WebSocket connections through nginx to two backend servers for load balancing. Which configuration snippet correctly supports WebSocket proxying with load balancing?

hard

A. upstream ws_backend {
server backend1.example.com;
server backend2.example.com;
}
location /ws/ {
proxy_pass http://ws_backend;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "close";
}

B. upstream ws_backend {
server backend1.example.com;
server backend2.example.com;
}
location /ws/ {
proxy_pass http://ws_backend;
proxy_http_version 1.0;
proxy_set_header Upgrade websocket;
proxy_set_header Connection "keep-alive";
}

C. upstream ws_backend {
server backend1.example.com;
server backend2.example.com;
}
location /ws/ {
proxy_pass http://ws_backend;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}

D. upstream ws_backend {
server backend1.example.com;
server backend2.example.com;
}
location /ws/ {
proxy_pass http://ws_backend;
proxy_http_version 2.0;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}

Solution

1. Step 1: Confirm HTTP version and headers for WebSocket

   HTTP/1.1 is required, and headers Upgrade and Connection must be set to allow protocol upgrade.

2. Step 2: Check load balancing setup and header correctness

   upstream ws_backend { server backend1.example.com; server backend2.example.com; } location /ws/ { proxy_pass http://ws_backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } uses correct HTTP version, headers, and defines upstream servers for load balancing properly.

3. Final Answer:

   upstream ws_backend { server backend1.example.com; server backend2.example.com; } location /ws/ { proxy_pass http://ws_backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } -> Option C

4. Quick Check:

   HTTP/1.1 + Upgrade + Connection upgrade + upstream = A [OK]

Hint: Use HTTP/1.1, Upgrade and Connection headers plus upstream for load balancing [OK]

Common Mistakes:

• Using HTTP/1.0 or 2.0 instead of 1.1
• Setting Connection to keep-alive or close
• Hardcoding Upgrade header instead of using $http_upgrade