Servers optimize

WebSocket offers a new approach to Web development

WebSockets is an HTML5 feature that will change the way applications are developed. Learn how you to use the WebSocket API technology.

The disconnected nature of the Web has been a limitation since its inception. That is, the basic design of a Web application is the client (browser) sends a request to a Web server, and it sends a response back to the requestor. There is latency with this communication, as data in the response could change by the time it reaches the requestor. Along with the various other cool features of HTML5, WebSockets address this issue by providing a channel between the client and the server. Here's a quick tour of the technology and an explanation of how it can be used, with an eye on the future when widespread use will be possible.

Making a connection

A WebSocket is a TCP connection to a server through a socket. A socket is a network connection defined by the combination of IP address and port number. So, a socket offers a communication path for a Web application back to the server (and vice versa) in real time. The server (or client) can send data to its counterpart at any time via this channel. The restrictions of the request/response paradigm are gone.

Alternatives

While it is a new approach, the Web is full of WebSockets alternatives; one such approach is polling where the client regularly sends requests. Also, long polling is often used where the client sends a request to the server, and the server only responds when it has the data, thus maintaining the connection until it responds with data. This is followed by another client request and on and on. These are often used with AJAX. While it works, it often leads to poor performance.

The client

WebSockets uses its own protocol called ws for standard communications and wss for SSL (so, ws://IPAddress is the proper format). Once you open the connection, it remains open until it is explicitly closed. Now, let's take a look at creating the connection.

There are three basic pieces of a WebSockets application: client, server, and the connection. The client or server creates the connection, so we only need to worry about them. JavaScript provides the client portion of the puzzle via the WebSockets API. JavaScript allows you to create the connection and then handle certain events. The following line shows how to create the connection.

var socket = new WebSocket("ws://127.0.0.1:8080/");

The close method is used to close the connection when finished with it.

socket.close();

Data can be sent by the client to the server via the send method.

socket.send("TechRepublic.com rocks!");

This simple example of the send method pushes a string value to the server application. The applications have to be in agreement with the type of data being sent back and forth. JSON is often a preferred format due to its ease of use within JavaScript. The following event handlers are offered by the WebSockets API so that data can be asynchronously received.

socket.onopen = function() {
// fired when the connection is opened
};

socket.onerror = function(e) {

// fired when errors occur

};

socket.onclose = function() {

// fired when connection closes

};

socket.onmessage = function(msg) {

// fired when server application sends data to client
// the details contained in msg.data
};

Using WebSockets in your browser-based application requires support in that browser. Right now, this is limited to the latest versions of Chrome and Firefox. Microsoft has promised support in Internet Explorer 10. A complete listing of what browsers support WebSockets is available online.

The server

A server and application are necessary to open a connection, so you must have a server application to go along with the client code. The connection is made to the server using the WebSockets protocol, the IP address, and the port number (ws://192.168.1.1:8080). The architecture behind the server side of WebSockets presents a different scenario than normal Web applications. With WebSockets, the application must handle a large number of connections. One good example of such a server technology is node.js. You can use the Socket.IO JavaScript library to build a WebSockets server application via node.js (their site provides example code). This is just one example; there are numerous options.

Using it now

While support for HTML5 and WebSockets is not widespread, you can develop an application to use it while having a fallback for non-compliant clients. Flash has socket support, so you can emulate WebSocket functionality via a Flash object. This approach is available via the web-socket.js library.

The future

The Web is constantly evolving, so it is imperative to be aware of what is coming. WebSockets is just one of the many features of HTML5 that promises to change the way applications are developed. While HTML5 (and WebSockets) support is not widespread, it will continue to be adopted by more platforms, so it is smart to be informed.

What features of HTML5 excite you the most? Share your thoughts and examples with the community.

Keep your engineering skills up to date by signing up for TechRepublic's free Software Engineer newsletter, delivered each Tuesday.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

2 comments
bratwizard
bratwizard

Wow! They've invented CLIENT-SERVER communications! What a CONCEPT! That's just totally AWESOME. Where in the world would we be without all these BRAND NEW technologies to get us through? Man, it's too bad that NOBODY thought of this stuff FORTY YEARS AGO. It would have been REALLY useful in inventing the Internet. Where's AL GORE when ya need him, huh??

Duke E Love
Duke E Love

Other than to be a condescending prick? Seeing that http was originally meant to be stateless, WebSockets are a game changer. Actually this sort of technology has been available for quite some time via Flash Remoting though Flash and Flex (rip).