WebSockets - Communicating with Server

The Web has been largely built around the request/response paradigm of HTTP. A cpent loads up a web page and then nothing happens until the user cpcks onto the next page. Around 2005, AJAX started to make the web feel more dynamic. Still, all HTTP communication is steered by the cpent, which requires user interaction or periodic polpng to load new data from the server.

Technologies that enable the server to send the data to a cpent in the very moment when it knows that new data is available have been around for quite some time. They go by names such as "Push" or “Comet”.

With long polpng, the cpent opens an HTTP connection to the server, which keeps it open until sending response. Whenever the server actually has new data, it sends the response. Long polpng and the other techniques work quite well. However, all of these share one problem, they carry the overhead of HTTP, which does not make them well suited for low latency apppcations. For example, a multiplayer shooter game in the browser or any other onpne game with a real-time component.

Bringing Sockets to the Web

The Web Socket specification defines an API estabpshing "socket" connections between a web browser and a server. In layman terms, there is a persistent connection between the cpent and the server and both parties can start sending data at any time.

Web socket connection can be simply opened using a constructor −

var connection = new WebSocket( ws://html5rocks.websocket.org/echo , [ soap ,  xmpp ]);

ws is the new URL schema for WebSocket connections. There is also wss, for secure WebSocket connection the same way https is used for secure HTTP connections.

Attaching some event handlers immediately to the connection allows you to know when the connection is opened, received incoming messages, or there is an error.

The second argument accepts optional subprotocols. It can be a string or an array of strings. Each string should represent a subprotocol name and server accepts only one of passed subprotocols in the array. Accepted subprotocol can be determined by accessing protocol property of WebSocket object.

// When the connection is open, send some data to the server
connection.onopen = function () {
   connection.send( Ping ); // Send the message  Ping  to the server
};

// Log errors
connection.onerror = function (error) {
   console.log( WebSocket Error   + error);
};

// Log messages from the server
connection.onmessage = function (e) {
   console.log( Server:   + e.data);
};

Communicating with the Server

As soon as we have a connection to the server (when the open event is fired) we can start sending data to the server using the send (your message) method on the connection object. It used to support only strings, but in the latest specification, it now can send binary messages too. To send binary data, Blob or ArrayBuffer object is used.

// Sending String
connection.send( your message );

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);

for (var i = 0; i < img.data.length; i++) {
   binary[i] = img.data[i];
}

connection.send(binary.buffer);

// Sending file as Blob
var file = document.querySelector( input[type = "file"] ).files[0];
connection.send(file);

Equally, the server might send us messages at any time. Whenever this happens the onmessage callback fires. The callback receives an event object and the actual message is accessible via the data property.

WebSocket can also receive binary messages in the latest spec. Binary frames can be received in Blob or ArrayBuffer format. To specify the format of the received binary, set the binaryType property of WebSocket object to either blob or arraybuffer . The default format is blob .

// Setting binaryType to accept received binary as either  blob  or  arraybuffer 
connection.binaryType =  arraybuffer ;
connection.onmessage = function(e) {
   console.log(e.data.byteLength); // ArrayBuffer object if binary
};

Another newly added feature of WebSocket is extensions. Using extensions, it will be possible to send frames compressed, multiplexed, etc.

// Determining accepted extensions
console.log(connection.extensions);

Cross-Origin Communication

Being a modern protocol, cross-origin communication is baked right into WebSocket. WebSocket enables communication between parties on any domain. The server decides whether to make its service available to all cpents or only those that reside on a set of well-defined domains.

Proxy Servers

Every new technology comes with a new set of problems. In the case of WebSocket it is the compatibipty with proxy servers, which mediate HTTP connections in most company networks. The WebSocket protocol uses the HTTP upgrade system (which is normally used for HTTP/SSL) to "upgrade" an HTTP connection to a WebSocket connection. Some proxy servers do not pke this and will drop the connection. Thus, even if a given cpent uses the WebSocket protocol, it may not be possible to estabpsh a connection. This makes the next section even more important :)

The Server Side