IIS As Reverse Proxy To WebSocket Server

Prerequisites:

Architecture

Client => Reverse Proxy (IIS) => Backend (Node.js)

  • “ws://localhost:8080”
  • “wss://reverseproxy.com”

What is WebSocket?

What is “ws://” and “wss://”

We just said that every WebSocket request starts as an HTTP or HTTPS request.

Understanding A WebSocket Request

WebSocket is not a protocol on its own. It is a protocol on top of HTTP protocol.

  • Connection: “Upgrade” — signals that the client would like to change the protocol.
  • Sec-WebSocket-Key: XXX — Uunique base-64 encoded key that the client selects. The value that the client sends to the server will in-turn be used by the server to create yet another key and sent back as a Sec-WebSocket-Accept response header.
  • Upgrade: “websocket” — requested protocol is “websocket”.
  • Sec-WebSocket-Version — WebSocket protocol version
  • Sec-WebSocket-Extensions [optional]: means that the browser supports data compression.

IIS As Reverse Proxy:

Need prerequisites!

IIS

As the aim of this article is to explain IIS as reverse proxy for WebSocket, I will revise IIS prerequisites here:

  • ARR installed.
  • URL Rewrite installed
  • WebSocket Protocol installed and enabled (“system.webServer/webSocket/enabled = True”)

IIS — Site

Create a site in IIS called “ReverseProxy”. This site will act as a reverse proxy and forward traffic to “http://localhost:8080”, where our WebSocket server will be.

IIS-ARR

Now, go at Server level in IIS > ARR and ensure “Enable proxy” is checked.

  • “http://something/car1/year” rewrite to => “/cars/brands/years/year/2022.html”.

IIS — URL Rewrite

I want to create a rule as simple as possible.

Code Section

Server.js:

  • Create HTTP server.
  • If requested path is “/”, then show “index.html”.
  • Create WebSocket Server by passing that HTTP server. Remember WebSocket uses same HTTP connection.
  • On “request” event to log messaged received from client and we will have a function that pings the client every 20 seconds.
  • Establish a WebSocket connection.
  • If “host” (in request Headers) is localhost — does not matter if it is HTTP or HTTPS, then => “ws://localhost:8080”.
  • If “host (in request Headers) is “reverseproxy.com”, does not matter if it is HTTP or HTTPS, then => “wss://reverseproxy.com”
  • On “close” event, log the code in the console.log.
  • Append received messages from WebSocket server in HTML.
  • WebSocket endpoints: “ws://localhost:8080” | “wss://reverseproxy.com”

Testing

Request to “https://localhost"

Client => “https://localhost” => ARR redirect to => “http://localhost:8080” => shows => “index.html” => open WebSocket connection to => “ws://localhost:8080”.

Request to “http://reverseproxy".

Client => “http://reverseproxy.com” => ARR redirect to => “http://localhost:8080” => shows => “index.html” => open WebSocket connection to => “wss://reverseproxy.com”.

In Summary:

  • The primary application of WebSocket in the industry is to make the browser richer, such that communication between a browser and a server can be bi-directional.
  • “ws” happens over HTTP while.
  • “wss” happens over HTTPS.
  • WebSocket protocol requires at least HTTP/1.1 version.
  • Every WebSocket request starts as a HTTP or HTTPS (wss) request.
  • A WebSocket request is a HTTP request sent with special headers: “Connection”, “Sec-WebSocket-Key”, “Upgrade” and “Sec-WebSocket-Version”.
  • In order for IIS to support WebSocket you must have “WebSocket Protocol” installed and enabled (“system.webServer/webSocket/enabled = True”).

Resources:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store