{"id":537,"date":"2020-04-12T12:30:06","date_gmt":"2020-04-12T16:30:06","guid":{"rendered":"https:\/\/itp.nyu.edu\/networks\/?page_id=537"},"modified":"2020-05-21T10:24:39","modified_gmt":"2020-05-21T14:24:39","slug":"an-introduction-to-websocket","status":"publish","type":"page","link":"https:\/\/itp.nyu.edu\/networks\/an-introduction-to-websocket\/","title":{"rendered":"An Introduction to WebSocket"},"content":{"rendered":"

<\/span>Introduction<\/span><\/h2>\n

From time to time, you might run into a situation where you want to build a web project that requires continuous communication between multiple parties on the web – for instance, a chat room, a multi-player shooter game, or even, a live performance. These are cases where WebSockets may be useful.\u00a0 This page introduces WebSockets,\u00a0 a technology that allows you to build\u00a0continuous communications between a web client and a server for this purpose, along with a few hands-on examples to try out.<\/p>\n

To get the most out of these notes,To get the most out of these notes, you should know\u00a0what HTTP is<\/a>\u00a0and how HTTP requests work, and have a basic understanding of how the client-server model works on the web<\/a>.<\/p>\n

<\/span>What are WebSockets?<\/span><\/h2>\n

The usual way that a web client communicates with a server is done by sending requests and getting responses back from the server using the Hypertext Transport Protocol, HTTP<\/strong>. A client sends a request to a server asking for some information, and the server makes a response to that client with the corresponding information.<\/p>\n

Normally a web request does not include a continuous connection — a request is sent, then the connection closes. This has made continuous communication a bit difficult and tedious, since the client will need to reconnect every time they want to send or receive a message. It’s also limited by the fact that the server doesn’t initiate communication, it only waits for the client to make a request.<\/p>\n

There are some exceptions to this, such as AJAX and Long-Polling. AJAX<\/strong>, or Aysnchronous JavaScript and XML<\/strong>, is a technique for dynamically altering an HTML page after the page has been requested and loaded and without leaving the page. In AJAX, a script that loads with the HTML page makes continued requests to the server, and modifies the HTML page after its initial load.\u00a0 Long-Polling<\/strong> is a technique where a client\u00a0 makes a request to a server and leaves the request open so that the server can continue to send new information to the client. However, since\u00a0both of these methods are built around the\u00a0request\/response paradigm of HTTP, they’re not well suited for low latency applications.<\/p>\n

To address this issue,\u00a0the W3C, the body responsible for web standards,\u00a0 introduced\u00a0the WebSocket<\/strong> — a computer communications protocol providing full-duplex communication channels over a single TCP connection. [1<\/a>] Using this protocol, a web client can establish a persistent connection between the client and the server — called a socket — so that both parties can send data at any time, as long as the socket is open. [2<\/a>]<\/p>\n

WebSockets allow a server to initiate dialogue from its side, requesting information from or pushing information to the client whenever needed.\u00a0 If multiple clients connect simultaneously, the server can also broadcast information to all currently connected clients and pass along messages sent from one client to another. WebSockets still require the client to initiate contact with the server, but once the socket is established, communication can move in both directions.<\/p>\n

Websockets are also\u00a0cross-platform [3<\/a>], cross-origin<\/a> by nature[4<\/a>], and they can\u00a0<\/strong>traverse firewalls and proxies\u00a0[5<\/a>].<\/p>\n

<\/span>How do WebSockets Work –\u00a0The WebSocket Protocol<\/span><\/h2>\n

If you just want to use WebSocket, you can skip this section and go to the example below that shows you how to establish a WebSocket connection. If you’re interested in what’s behind the scene,\u00a0this is what happens:<\/p>\n

A\u00a0<\/strong>WebSocket\u00a0is a thin wrapper around a normal TCP socket.\u00a0 Figure 1, from javascript.info<\/a>\u00a0[6<\/a>] illustrates how WebSocket works.<\/p>\n

\"websocket-handshake\"
Figure 1. This figure illustrates how WebSocket works at a high level. A client (in this case a Web Browser) sends an HTTP request to the server, asking “Hey, server, let’s establish a WebSocket?”. The server answers with an HTTP response saying “Okay!” and encrypts the connection. Then the two parties begin talking in WebSocket protocol.<\/figcaption><\/figure>\n

After the initial handshake is done via HTTP, the communication then continues using the same TCP connection using WebSocket protocol. The TCP connection will be closed once both parties acknowledge that the WebSocket connection should be closed. WebSockets are encrypted using a public key generated by the client when the socket request is made.<\/p>\n

Now let’s take a look at how WebSocket works in a bit more detail, referencing the Echo Test example on\u00a0websocket.org<\/a>. In this example, you have a WebSocket client in your browser, and you want to connect it to a WebSocket server hosted on echo.websocket.org, which echoes whatever messages sent to it.<\/p>\n

To establish a WebSocket connection, your client will need to send a request to a URI using the WebSocket scheme – a URI that begins with ws:\/\/<\/em>\u00a0(or wss:\/\/<\/em>\u00a0for a secure WebSocket). The remainder of the URI would be the same as an HTTP URI<\/a>. In this case, your requesting URI would be wss:\/\/echo.websocket.org.<\/em><\/p>\n

Then the client will send an HTTP GET request to the specified URI as a WebSocket opening handshake with the following required headers:<\/p>\n