Click here to Skip to main content
Click here to Skip to main content

Building a basic HTML5 client/server application

, 25 Sep 2012
Rate this:
Please Sign up or sign in to vote.
This article is about a basic implementation of HTML5 client/server chat application.

Introduction

In this article I would like to show a basic implementation of HTML5 client/server application. The client is implemented using HTML5, the server is implemented in C++.

Background 

The client/server application implies sending data between participants. This task will be accomplished by using a new HTML5 feature called WebSocket, which is described in RFC6455. At the moment the most complete support of RFC6455 is implemented by Mozila Firefox (15.0), Google Chrome (21.0.1180.89) and Internet Explorer 10 (10.0.8400.0) web browsers, they were used to test the application.

The server-side socket support is implemented using the boost.asio library, the server’s code pretends to be a cross-platform one.

The Client

The client’s code is based on a simple chat client example from www.html5demos.com, credits to Remy Sharp.

The client is implemented as a web page, which creates a websocket object and subscribes to its events: open, close, error and message.

To connect to a server we need to call the websocket constructor with the following string as a parameter:

var wsUri = "ws://127.0.0.1:7777";  	
websocket = new WebSocket(wsUri);

As you can see here, the wsUri string contains an IP address and a port of a server application. In our case the server application runs on a localhost and the port number is 7777.

The client uses the following procedure:

  1. Initializing variables to access web page elements.
    connected = document.getElementById("connected");
    log = document.getElementById("log");
    chat = document.getElementById("chat");
    form = chat.form;
    state = document.getElementById("status");
  2. A check whether a web browser supports the WebSocket feature.
    if (window.WebSocket === undefined)
    {
        state.innerHTML = "sockets not supported";
        state.className = "fail";
    }
    else
    {
        // ...
        
        window.addEventListener("load", onLoad, false);
    }
  3. Creation of a websocket object and subscibing to its events.
    function onLoad()
    {
        var wsUri = "ws://127.0.0.1:7777";  
     
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) { onOpen(evt) };
        websocket.onclose = function(evt) { onClose(evt) };
        websocket.onmessage = function(evt) { onMessage(evt) };
        websocket.onerror = function(evt) { onError(evt) };
    }

Below are the event handlers.

function onOpen(evt)
{
    state.className = "success";
    state.innerHTML = "Connected to server";	
}
  
function onClose(evt)
{
    state.className = "fail";
    state.innerHTML = "Not connected";
    connected.innerHTML = "0";	
}
 
function onMessage(evt)
{
    // There are two types of messages: 
    //     1. a chat participant message itself
    //     2. a message with a number of connected chat participants. 

    var message = evt.data;
	
    if (message.startsWith("log:"))
    {
        message = message.slice("log:".length);
        log.innerHTML = '<li class="message">' + message + "</li>" + log.innerHTML;	
    }
    else if (message.startsWith("connected:"))
    {
        message = message.slice("connected:".length);
        connected.innerHTML = message;	
    }    
}
 
function onError(evt)
{ 
    state.className = "fail";
    state.innerHTML = "Communication error";
}

Note, there are two types of messages the server sends to the client:

  1. a chat participant message itself, the "log:" message,
  2. a message with a number of connected chat participants, the "connected:" message.

Based on a message type we show its content in a corresponding web page element.

To send a message to the server the send function is used:

	
function addMessage()
{
    var message = chat.value;
     
    chat.value = "";
	  
    websocket.send(message);
}

The Server

The server’s code is based on the Chat application example from the boost.asio library, credits to Christopher M. Kohlhoff.

The server works with sockets in an asynchronous manner, using I/O completion ports, and can easily be extended to run two or more threads.

Below is a class diagram for the chat application.

The logic behind is the following:

  1. The server contains a room object, which is a container for chat participants.
  2. When a client connects to the server, the server creates a chat_session object and adds the object to the room.
  3. Each chat_session object contains a socket to interact with the client. When a message from the client arrives it is being delivered to all the room participants.

The WebSocket

The client code is based on the example from www.html5demos.com, the server code is based on the boost.asio example, where is your code, one may ask? Here you are! A basic implementation of the WebSocket protocol.

A websocket session consists of two consecutive phases: a handshake and data exchange.

Handshake

In order to establish a websocket connection, a client (a web browser) sends a HTTP GET request with a number of HTTP headers. Among those headers there is the Sec-WebSocket-Key header, which contains a handshake key. According to the WebSocket protocol, the server should:

  1. Concatenate the handshake key with the magic guid {258EAFA5-E914-47DA-95CA-C5AB0DC85B11}.
  2. Take the SHA1 hash of the concatenation result.
  3. Send the base64 equivalent of the hash in HTTP response to the client.
The following code illustrates the handshake procedure.
namespace websocket {
    namespace http {
 
        void request_handler::handle_request(const request& req, reply& rep)
        {
            std::string key;
            for (std::vector<header>::const_iterator h = req.headers.cbegin();
                h != req.headers.cend(); ++h)
            {
                if (h->name == "Sec-WebSocket-Key")
                {
                    key = h->value;
                    break;
                }
            }
 
            if (key.empty())
            {
                rep = reply::stock_reply(reply::bad_request);
                return;
            }
 
            const std::string magic_guid("258EAFA5-E914-47DA-95CA-C5AB0DC85B11");
            std::string buffer(key + magic_guid);
            std::string accept(to_base64(to_sha1(buffer)));
 
            rep.status = reply::switching_protocols;
            rep.headers.resize(3);
            rep.headers[0].name = "Upgrade";
            rep.headers[0].value = "websocket";
            rep.headers[1].name = "Connection";
            rep.headers[1].value = "Upgrade";
            rep.headers[2].name = "Sec-WebSocket-Accept";
            rep.headers[2].value = accept;
        }
 
    } // namespace http
} // namespace websocket

Once the HTTP response is sent to the client, the handshake phase considered as complete and we can start data exchange. Coming back to our chat application, below is a state diagram of the chat session.

Data Exchange

The data exchange between a websocket client and server is done by means of messages. Each message consists of a number of frames. The following picture shows a structure of a websocket data frame.

The meanings of the fields can be found in RFC6455. Here is a structure to work with a data frame:

namespace websocket {
 
    // A structure to hold websocket frame data. 
    struct dataframe
    {
        dataframe();
 
        bool fin;
        enum operation_code { continuation_frame, text_frame, binary_frame, connection_close, ping, pong, reserved } opcode;
        bool mask;
        boost::int8_t fin_opcode;
        boost::int8_t mask_payload_len;
        boost::int8_t payload_len;
        boost::uint64_t extended_payload_len;
        boost::array<boost::uint8_t, 4> masking_key;
        std::vector<boost::uint8_t> payload;
 
        // Convert the dataframe into a vector of buffers. 
        std::vector<boost::asio::const_buffer> to_buffers();
    };
 
} // namespace websocket

The Demo

To run the demo:

  1. Start the server app using the following command line:
    server 0.0.0.0 7777
  2. Open the chat.html web page in the Google Chrome or Mozilla Firefox web browsers.

Any questions, remarks, and comments are welcome.

History

  • September 26, 2012 - Added support for Internet Explorer 10.
  • September 15, 2012 - Added a demo for Ubuntu.
  • September 2, 2012 - Initial version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Alexander Iacobciuc
Software Developer RTSoft
Russian Federation Russian Federation
Niko Bellic (Serbian: Niko Belić) is the main protagonist and playable character in the video game Grand Theft Auto IV. He is a 30 year old former soldier who moved to Liberty City to escape his troubled past and pursue the American Dream.

Comments and Discussions

 
GeneralMy vote of 5 PinmemberAlex Sapozhnikov23-Jul-14 21:44 
Questioninclude boost ... PinmemberMember 378689013-May-14 3:44 
AnswerRe: include boost ... PinpremiumAlexander Iacobciuc23-May-14 0:51 
QuestionUbuntu build PinmemberMember 1049108228-Dec-13 3:53 
AnswerRe: Ubuntu build PinmemberAlexander Iacobciuc20-Jan-14 8:41 
QuestionChange or set user name or ID PinmemberMember 1027238713-Sep-13 4:59 
AnswerRe: Change or set user name or ID PinmemberAlexander Iacobciuc16-Sep-13 7:22 
QuestionSend Binary Message PinmemberPhilChung29-Aug-13 21:00 
AnswerRe: Send Binary Message PinmemberAlexander Iacobciuc2-Sep-13 0:03 
Questiondisplaying all participants Pinmembernazrin yusnaidi2-Jul-13 20:11 
AnswerRe: displaying all participants PinmemberAlexander Iacobciuc3-Jul-13 20:34 
Questiontwo messages in parallel [modified] PinmemberRandSirpi24-Apr-13 7:12 
AnswerRe: two messages in parallel PinmemberAlexander Iacobciuc24-Apr-13 21:43 
GeneralMy vote of 5 Pinmemberjgcarcamo29-Jan-13 11:45 
Questionuser id PinmemberDaniel Hyuuga23-Jan-13 17:36 
AnswerRe: user id PinmemberAlexander Iacobciuc13-Feb-13 22:37 
QuestionIs there a version of win32 api? Pinmemberevalhero18-Dec-12 2:08 
AnswerRe: Is there a version of win32 api? PinmemberAlexander Iacobciuc18-Dec-12 3:37 
GeneralRe: Is there a version of win32 api? Pinmemberevalhero18-Dec-12 14:02 
GeneralMy vote of 5 Pinmemberhandychang1-Oct-12 0:15 
GeneralMy vote of 5 Pinmemberevalhero20-Sep-12 23:51 
GeneralRe: My vote of 5 PinmemberAlexander Iacobciuc21-Sep-12 1:15 
QuestionI would like to ask you what way the website server? Pinmemberevalhero20-Sep-12 23:18 
AnswerRe: I would like to ask you what way the website server? PinmemberAlexander Iacobciuc21-Sep-12 1:04 
GeneralRe: I would like to ask you what way the website server? Pinmemberevalhero22-Sep-12 23:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 25 Sep 2012
Article Copyright 2012 by Alexander Iacobciuc
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid