See the live demo (works with the latest Google Chrome and Firefox Nightly)

Now, let’s see how we load the music and make the cube moving. As usual, you can find all the source code on my github account.

1. Web Audio API part: Load the music and get the frequency data
2. WebGL part: Make the cubes react regarding the sound
3. Useful links and free resources

Web Audio API part: Load the music and get the frequency data

The main object of the Web Audio API is the AudioContext object. At the time that I’m writing that post, only Google Chrome and Firefox Nightly are supporting the AudioContext. Note that the class name is prefixed by webkit for Chrome.

try {
    if(typeof webkitAudioContext === 'function') { // webkit-based
        context = new webkitAudioContext();
    }
    else { // other browsers that support AudioContext
        context = new AudioContext();
    }
}
catch(e) {
    // Web Audio API is not supported in this browser
}

To load the file, we need to use a response type specified in the XMLHttpRequest level 2: ArrayBuffer.

var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
 
request.onload = function() {
    // decode audio data
}

The W3C advises us on using this method instead of createBuffer method because “it is asynchronous and does not block the main JavaScript thread”. After that, we need to decode the array buffer with the decodeAudioData method.

AudioContext.decodeAudioData(audioData, successCallback, errorCallback);

Then we need to create AudioNode objects for various things:

• ScriptProcessorNode, created with the AudioContext.createJavaScriptNode(bufferSize), it handles on how many the onaudioprocess event is dispatched. The bufferSize must take these values: 256, 512, 1024, 2048, 4096, 8192, 16384.
• AnalyserNode, created with AudioContext.createAnalyser(), it provides real-time frequency and time-domain analysis information.
• AudioBufferSourceNode, created with AudioContext.createBufferSource(), that is for the playback.

After creating these nodes, we need to connect them. The node source is connected to the analyser node which is connected to the script processor node. The main node is connected to the destination, that is to say the sound card.

AudioBufferSourceNode.connect(AnalyserNode);
AnalyserNode.connect(ScriptProcessorNode);
AudioBufferSourceNode.connect(AudioContext.destination);

Now, we are getting the binaries from frequencies at the current time and copy the data into unsigned byte array. We will use the array to scale the cubes regarding the values.

ScriptProcessorNode.onaudioprocess = function(e) {
    array = new Uint8Array(AnalyserNode.frequencyBinCount);
    AnalyserNode.getByteFrequencyData(array);
};

Important note: if the audio process event stops during the playback, it is because the event is defined in a function. To fix it, you need to bind to the window object (make it global). Actually, the garbage collector is called and it cleaned the variable. Here is the thread about that issue.

To start playing the music, we are using the noteOn() method.

AudioBufferSourceNode.noteOn(0);

Here is the full source code explained above:

var context;
var source, sourceJs;
var analyser;
var buffer;
var url = 'my_music.ogg';
var array = new Array();
 
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = "arraybuffer";
 
request.onload = function() {
    context.decodeAudioData(
        request.response,
        function(buffer) {
            if(!buffer) {
                // Error decoding file data
                return;
            }
 
            sourceJs = context.createJavaScriptNode(2048);
            sourceJs.buffer = buffer;
            sourceJs.connect(context.destination);
            analyser = context.createAnalyser();
            analyser.smoothingTimeConstant = 0.6;
            analyser.fftSize = 512;
 
            source = context.createBufferSource();
            source.buffer = buffer;
 
            source.connect(analyser);
            analyser.connect(sourceJs);
            source.connect(context.destination);
 
            sourceJs.onaudioprocess = function(e) {
                array = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(array);
            };
 
            source.noteOn(0);
        },
        function(error) {
            // Decoding error
        }
    );
};

WebGL part: Make the cubes react regarding the sound

First of all, we create the scene and the cubes into it.

var scene = new THREE.Scene();
var cubes = new Array();
 
var i = 0;
for(var x = 0; x < 30; x += 2) {
    var j = 0;
    cubes[i] = new Array();
    for(var y = 0; y < 30; y += 2) {
        var geometry = new THREE.CubeGeometry(1.5, 1.5, 1.5);
 
        var material = new THREE.MeshPhongMaterial({
            color: randomFairColor(),
            ambient: 0x808080,
            specular: 0xffffff,
            shininess: 20,
            reflectivity: 5.5 
        });
 
        cubes[i][j] = new THREE.Mesh(geometry, material);
        cubes[i][j].position = new THREE.Vector3(x, y, 0);
 
        scene.add(cubes[i][j]);
        j++;
    }
    i++;
}

Then, we are going to rescale 225 cubes on the z axis. This code goes in a function called by requestAnimationFrame(). Note that array is build from the audioprocess event and contains the bytes of frequencies.

var k = 0;
for(var i = 0; i < cubes.length; i++) {
    for(var j = 0; j < cubes[i].length; j++) {
        var scale = array[k] / 30;
        cubes[i][j].scale.z = (scale < 1 ? 1 : scale);
        k += (k < array.length ? 1 : 0);
    }
}

You can find the full source code here and the whole applications here.

Useful links and free resources

• W3C’s Web Audio API specifications
• Exploring the HTML5 Web Audio: visualizing sound
• Getting Started with Web Audio API
• Looperman (free music resources)
• Source code from GitHub

Click here to see live demo

Of course, for better results you need to use latest browser versions which support radial gradient backgrounds, transformations, border radius, etc. If you are using the latest Chrome, Safari, Firefox, Opera or Internet Explorer 10, that will be fine.

1. The first approach
2. Browser rendering results
   1. Google Chrome (10, 11, 14, 23)
   2. Mozilla Firefox (3.6, 4, 5, 16)
   3. Opera (10.50, 11.11, 11.64, 12.0)
   4. Internet Explorer (7, 8, 9, 10 preview)
3. Debugging/Helping tools

The first approach

First of all, I needed to figure out how to build the structure of the logo with HTML elements only: I had to decompose the picture in different layers (I mean the <div>) and to think about the way to design them with only CSS properties in the same time. In other words, there are many conditions and constraints to be aware of.

For the structure, the first Ubisoft logo contains 16 layers with 10 full circles (radial gradients and shadows) and 6 for details (colorized borders). The green one has 10 full circles and the Owlient logo has only 4, ears are in a <div> actually.

Browser rendering results

Here are some screenshots from different browser versions. I deliberately chose browsers regarding their rendering engines to have a larger panel for this showcase: WebKit (Chrome, Safari), Gecko (Firefox), Presto (Opera) and Trident-based (Internet Explorer).

Google Chrome

Chrome actually supports background gradients, but the keyword radial has to come inside the -webkit-gradient(radial, [...]) instead of -webkit-radial-gradient([...]). This attribute came in the version 11.

version 10

version 11

version 14

version 23

Mozilla Firefox

There is no prefix on the border-radius properties, that is why Firefox 3.6 doesn’t curve the blocks, but supports -moz-border-radius. Other properties/values have -moz prefix, such as transform (rotation) and radial-gradient.

version 3.6

version 4

version 5

version 16

Opera

It seems that the version 11.11 doesn’t support the radial-gradient position (farthest-corner).

version 10.50

version 11.11

version 11.64

version 12.0

Internet Explorer

No CSS3 support in IE7 and 8 but IE9 supports border-radius and box-shadow properties.

version 7

version 8

version 9

version 10

Debugging/Helping tools

I built those logos manually, no export from files or anything. There are a lot of great tools to set gradients, here is a list of generators that I used:

• CSS Gradient Background Maker
• ColorZilla

For positioning I have simply used Firebug and the native DOM explorer of Chrome. :)

As usual, you can find the source here: https://github.com/srchea/Pure-CSS3-logos

During this Friday afternoon, there were 2 different talks including “Internet Explorer 10 and development with HTML5 on Windows 8″ and “Mozilla and the Mobile Web: from Firefox for Android to Boot to Gecko”. Between both talks, we had to choose a workshop: I took the “Creation of a Mobile Web app based on HTML5″ introduced by a W3C member, Dominique Hazael-Massieux.

Here is the list of talks that I attended:

• IE10 and development with HTML5 on Windows 8
  by David Rousset (Microsoft France)
• Creation of a Mobile Web app based on HTML5
  by Dominique Hazael-Massieux (W3C)
• Mozilla and the Mobile Web: from Firefox for Android to Boot to Gecko
  by Tristan Nitot (Mozilla Europe)

I wrote a summary of hot topics that have been discussed during these conferences:

1. Internet Explorer 10 for autumn 2012, what’s new?
2. Mobile: Web app vs. Native app
3. Mozilla’s B2G and Marketplace

Internet Explorer 10 for autumn 2012, what’s new?

Internet Explorer 10 will be only supported on Windows 7, Windows 8 and Windows Phone 8. The release date is scheduled for October/November 2012, it will come out along with Windows 8. A good point is that updates will come more frequently for public users. Let’s see what IE10 has inside!

Responsive design and User Experience improvements

First of all, it works with 2 different user experience modes:

1. Desktop mode: the classic mode, it supports all plugins. This doesn’t differ from classic browsers and the user experience is very similar to IE9.
2. Metro Windows 8-style UI mode: it enables the browser inside the desktop. The bad point is that it does not support plug-ins but partially Flash and Silverlight. This mode allows Windows 8 users to improve their experiences with other Metro Windows 8-style UI apps.

Windows 8 integrates a JS Framework for Metro Windows 8-style UI app developments called WinJS: UI, transitions, events, and other set of controls like a date picker, a list, a rating component, etc.

IE10 now supports the CSS3 Grids, Regions and Exclusions including the wrap-flow property. This makes mobile and Web integrations easier thank to the flexible page layout. Here is a good demo of what regions are (resize your window).

HTML5/CSS3 and tablet features support

For me, the biggest improvement is the support of WebSockets and WebWorkers. We can wonder why they took so much time, and the answer is that they wanted to be sure that the specs are finalized.

Web game developers should be glad with the hardware acceleration support, that’s a big step for anyone who develop with WebGL. Moreover, all CSS3 transitions are handled by the hardware acceleration.

For tablets and mobiles, touch events are now supported. Actually, finger touch, pen, and mouse events became generic pointer events. Microsoft has gathered those events to not compromise mouse events: they called it MSPointer events. However, this topic has been discussed, because some Apple’s patents have been disclosed, and subsequently it has caused a break in the W3C’s specs.

Other features are supported such as offline storage types, drag and drop, etc:

• localStorage: a simple key/value store map
• IndexedDB: a document-oriented database (NoSQL)
• Drag and Drop: handlers and events for draggable elements

To ensure the compatibility of old Web sites, the quirks mode is implemented until IE9. The consequence is that when the DOCTYPE is not defined, some markup are not supported: For example, in the quirks mode, the <canvas> is not supported. IE10 finally drops the quirks mode for standards and almost standards modes. You will find more details on how the rendering works on this page.

To put it in a nutshell, Microsoft has done a lot of improvements for its browser with a many HTML5 features support, especially for game developers. On the one hand, IE10 may regain the market against Chrome and Firefox. On the other hand, we didn’t see any performance benchmark to compare the real place of IE10 between its current competitors.

Mobile: Web app vs. Native app

Developing a mobile Web application needs another approach than a classic Web application development. Many parameters have to be considered like different interactions including user experiences. Screen sizes, resolutions, network latencies, CPU (and obviously, batteries), OS versions, phone brands have to be taken in consideration… At the opposite of a desktop, a mobile device is more personal and social: the relation between its owner is stronger.

Native applications don’t make users interconnected: You can not share a view with others (by sharing an URL). Moreover, it depends on OS versions and stores that provide the app whereas Web applications keep users safe: personal data are isolated from applications, like address books, phone numbers. And over all, no installation is needed and it gives easier access: get the URL by a QR code. For instance, a mall which provides its map via a Web app is more encouraging for the user to get it than to download it from a store, then to accept the terms of service, to install it and to use it finally.

However, there are inconveniences to design a Web app: as Dominique Hazael-Massieux told us, the screen size depends on phone models but now, we can find the same screen size (or almost) but different resolutions. That is what Apple has introduced with their mobile device products. Here is a good explanation of the problem written by Peter-Paul Koch, who entitled it: “A pixel is not a pixel is not a pixel”. An mentioned solution is to use the viewport meta tag but this is not a standard yet.

Smaller inputs but new sensors

On a mobile device, inputs are usually small. The typing is slower and longer than on a PC keyboard. The W3C is up to normalize the speech input, but for this moment, only the webkit-based can use this feature with the x-webkit-speech attribute. Many other attributes is coming up to help the mobile user such as tel, email, date, url, etc. You can find the whole list of these new input controls here.

Optimization advises

Dominique gave us some precious advises on how to optimize a Web application, especially tips to save bandwidth. Nowadays, the bandwidth is paid by users, every bit is expensive and need to be saved (due to limited 3G/4G data plan, expensive roaming):

• Minify every static files: JS, CSS to save bits and to get a faster execution.
• Use HTTP headers such as the Cache-Control, Last-Modified…
• Minimize images into CSS sprites to avoid many connections.
• Check the EXIF of photos, sometime they are useless.
• Be careful with JS libraries, they are heavy and sometime they are not fully used.
• Build CSS files into a single.
• Control cookies: they are sent at every HTTP request to the same domain name.
• Use the offline storage offered by HTML5: localStorage, IndexedDB, requestFileSystem (Chrome only), <html> manifest attribute…

To limit network connections, let the client do the more but keep in mind that the CPU and the memory cost a lot for the battery.

He also talked about the WebRTC: Real-Time Communication. WebRTC has the aim to make traditional desktop application such as P2P, voice calling into Web applications.

This picture above relates the show case of an augmented reality application using WebGL and WebRTC technologies.

Mozilla’s B2G and Marketplace

The last part was for Tristan Nitot, the president of Mozilla Europe. He introduced Boot to Gecko (B2G) and the Mozilla Marketplace which wants to be more a open store than existing ones. B2G also wants to be a new OS for mobile device and to use 100% Web apps. Mozilla wish to extend all sensors to Web APIs, so that, every apps could handle them directly from HTML5. Its architecture is composed of a Linux kernel, Gecko and Web apps.

At the end, he showed us a demonstration of a WebGL application which runs on B2G on a Samsung Galaxy S II. It was pretty stunning!

Cause

During the installation of Ubuntu, the Wi-Fi has been successfully connected but after rebooting: no network interface (wlan0). This is due to a conflict between 2 modules: rt2500usb and rndis_wlan. In fact, there are 2 types of F5D7051 based on the Broadcom BCM4320 and Ralink RT2500USB chipsets. The problem is that both have the same ID vendor:product that is to say 050d:7051, so the kernel could load the wrong one. Here are the steps to fix the issue.

Troubleshoot

The following solution is to blacklist the wrong module.

1. Ensure that you have the right component by typing in the terminal:

   lsusb

   It should display something like:

   Bus 001 Device 003: ID 050d:7051 Belkin Components F5D7051 802.11g Adapter v1000 [Broadcom 4320 USB]

   Note that 050d:7051 is the unique identifier of the component and [Broadcom 4320 USB] is the based chipset.

2. Check loaded modules with:

   lsmod

   If you see both modules: rt2500usb and rndis_wlan, edit the /etc/modprobe.d/blacklist.conf and add the following line at the end of the file (to edit you need to be root; if you have a Ralink chipset, replace rt2500usb by rndis_wlan):

   blacklist rt2500usb

   Then, unload the module by typing in the terminal:

   sudo modprobe -r rt2500usb

   Finally, save the file and reboot the computer.

Hope it helps. :)

This post deals with how I’ve made that little random terrain generation application using the Three.js framework and the diamond-square algorithm. Obviously, this works with the new generation of web-browsers (with WebGL support). I have tested it on Firefox 9, 10 and Chrome 16, 17. Sorry for Internet Explorer fans, that app doesn’t support because it uses the WebGL context (perhaps switching in canvas rendering would work, I haven’t tested yet).

Go to the live demo page

You can run the live demo at this address. As always, you can find the source code on my GitHub profile.
Here are some screenshots of what the app can do but not only:

Of course, the application gives us more features than applying a texture or showing a mesh. I invite you to discover and to play with it. By the way, I would really appreciate your feedback. :-)

1. The diamond-square algorithm
2. The scene
   1. Working with shapes, vertices, meshes and textures
   2. The camera
   3. The rendering
3. Changeable parameters
4. Performance
5. Bottom line

The diamond-square algorithm

As I said earlier, I have used the diamond-square algorithm to generate a random fractal terrain. If you already know how the midpoint displacement algorithm works (what if you don’t too), the diamond-square algorithm would be pretty easy to understand. Here is a good explanation of these algorithms.

First of all, that algorithm only works on 2D arrays of 2ⁿ+1 dimensions (e.g. 129×129, 1025×1025, etc.). As its name suggests, it works on squares and it needs the four corner points, and the midpoint to generate height values regarding average values of corners. After that, it takes the middle of each edges (it actually builds diamonds) and it takes the midpoint to get other squares (sub-squares). This excellent post by Paul Boxley shows the behavior of the algorithm step by step.

Moreover, it exists some other algorithms of terrain generations that we can mention like the Perlin noise, widely used in computer games and movies such as Tron.

The scene

In this part, I explain how I have basically made the scene. It contains 2 main elements: a polygon mesh for the terrain and a perspective camera. Besides, it has a control element for the camera, but this will be explained in the camera section.

Working with shapes, vertices, meshes and textures

I have used a plane (PlaneGeometry object) for the terrain grid. That shape offers the possibility to modify the z axis via their vertices.

this.geometry = new THREE.PlaneGeometry(
    this.width,
    this.height,
    this.segments,
    this.segments
);
var index = 0;
for(var i = 0; i <= this.segments; i++) {
    for(var j = 0; j <= this.segments; j++) {
        this.geometry.vertices[index].position.z = this.terrain[i][j];
        index++;
    }
}

For the texture, Three.js gives the MeshBasicMaterial object to set an image on the mesh with the ‘map’ attribute. Otherwise, we can put the ‘wireframe’ and its ‘color’.

if(this.texture !== null) {
    this.material = new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture(this.texture)
    });
}
else {
    this.material = new THREE.MeshBasicMaterial({
        color : 0x000000,
        wireframe : true
    });
}

Subsequently, we build the mesh with its shape and its texture. Then we add it in the scene.

this.mesh = new THREE.Mesh(this.geometry, this.material);
this.scene.add(this.mesh);

For aesthetic and performance reasons, we can add an fog effect in the whole scene. In fact, the CPU/GPU doesn’t have to compute all the terrain to the end but the viewable part. This can be added with:

this.scene.fog = new THREE.FogExp2(0xffffff, this.fog);

The way of fading fog with distance is controlled by the Exponential Squared mode.

The camera

The camera that I have used is the perspective projection camera. It is defined by its field of view (fov), aspect ratio, near plane and far plane. In few words, this is similar to the human view.

this.fov = 50;
this.aspect = window.innerWidth/window.innerHeight;
this.near = 1;
this.far = 100000;
this.camera = new THREE.PerspectiveCamera(
    this.fov,
    this.aspect,
    this.near,
    this.far
);

If you used to play at Call Of Duty, Battlefield, Unreal Tournament, Counter-Strike or you are a FPS gamer, you will find your feet. In fact, the camera is controlled exactly like in a FPS game with just one difference: you need to drag the screen to change the angle. The first person controls offered by the framework doesn’t handle correctly what I would like to have, especially for the mouse dragging. However, that lets us to use the keyboard for navigation using the native behavior of the FirstPersonControls (native controls from Three.js), that is to say arrow keys or a (strafe left), w (move up), d (strafe right), s (move down) and r (go upper), f (go lower). So, I have made my own controls, called: FirstPersonNavigationControls.

First of all, there are some attributes of the FirstPersonControls that need to be set to allow the FirstPersonNavigationControls to have the wished behavior such as vertical constrains.

this.firstPersonControls = new THREE.FirstPersonControls(
    this.object,
    this.domElement
);
this.firstPersonControls.movementSpeed = 5.0;
this.firstPersonControls.lookSpeed = 0.005;
this.firstPersonControls.noFly = true;
this.firstPersonControls.activeLook = false;
this.firstPersonControls.constrainVertical = true;
this.firstPersonControls.verticalMin = 0;
this.firstPersonControls.verticalMax = 0;

For the mouse dragging, I have used the longitude/latitude system. It rotates the camera regarding the z axis from 0° to 360° (modulo) and the y axis at 180° (between -90° and 90°).

this._lat = Math.max(-90, Math.min(90, this._lat));
this._phi = (90-this._lat)*Math.PI/180;
this._theta = this._lon * Math.PI/180;
this.object.target.x = Math.sin(this._phi)*Math.cos(this._theta);
this.object.target.y = Math.cos(this._phi);
this.object.target.z = Math.sin(this._phi)*Math.sin(this._theta);

After normalizing x, y, z almost like in the lookAt() method, we obtain the rotation matrix that we apply on the camera. The whole code of the FirstPersonNavigationControls class can be found here.

The rendering

The scene is rendered in the WebGL context and frames updating are fully handled by the framework with the requestAnimationFrame() and render() functions.

this.renderer = new THREE.WebGLRenderer({ antialias: false });
function animate() {
    requestAnimationFrame(animate);
    scene.render();
}

Changeable parameters

The live demo gives a control panel, here is the list of parameters.
Variables that directly affect the terrain:

1. Size (width, height)
   The size of the terrain in pixel.
2. Number of segments (2ⁿ+1 dimensions)
   Note that the more segments you will set, the more computing time it will take.
3. Smoothing factor
   This affects random height variations. The more is the value, the more is the height variation.

Others that affect the scene, without regenerating the terrain:

1. Textures
   You can choose between 3 distinct textures or none: it puts black wireframes.
2. Fog
   The density of the fog used by the exponential squared function (Exp2).
3. Border
   This enables the border on the edges of the terrain.

Debug/performance:

1. Info
   If checked, this displays the camera position/angle and the number of frames per second (FPS) that the browser computes.

Performance

On the one hand, I have run the application on my laptop under Windows 7, Intel core 2 duo 2.1 GHz and 4 Gb of RAM with Firefox 10 and Chrome 16. Both work with 60 FPS, which is totally correct. On the other hand, I have executed it on my AMD64 1.3 GHz, 3 Gb of RAM using Ubuntu 10.10 and Chrome 17, I got 56 FPS. However, on the same computer, I have some issues to run with Firefox 10: it doesn’t update frames.

Bottom line

That application is not stable, it is still in development. I would really appreciate if you guys send me your performance/bug issues. And feel free to send me some screenshots of your amazing terrain generation. :-)

• Random terrain generation (live demo)
• Source code on GitHub
• Three.js framework

You’ll find one of several basic implementations of a communication between clients and a server by WebSocket in PHP. I deliberately didn’t complicate the code (by adding other features or improvements) to make it easy to understand.

1. How does a WebSocket basically work?
2. The server side
   1. Handshake
   2. Unmasking/Encoding data frames
   3. Pushing data
3. The client side
   1. Receiving data
   2. Leave the application
4. More information

How does a WebSocket basically work?

WebSocket communications are managed by a server. Each client have to introduce itself by sending a handshake request via the WebSocket protocol (ws). The server accepts or not to open a socket connection by sending a handshake response. I think that schemas below are telling more than a long text, so let’s have a look on these pictures:

Only after the handshake acceptance, both sides can communicate. Many clients can be connected to the server. For some performance reasons, the limit of clients can be set before creating a new socket.

The server side

Like I said earlier in this post, I used Apache 2 and PHP-CLI 5.3 under Ubuntu 10.10. In this section, we’re going to see some tricky parts of the server side especially the handshake method, encoding and unmasking data methods. And to finish, I’m going to explain the part of pushing data to clients. The server works like a daemon and is executed by the following command: php -q phppushwebsocket.php

Handshake

First of all, the handshake has to be done to let both, client and server, communicate. The browser introduces itself by sending HTTP headers, something like:

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:5001
Origin: http://localhost
Sec-WebSocket-Key: k2towQT28s50DtKptTjZbg==
Sec-WebSocket-Version: 13

The Sec-WebSocket-Version determines the protocol version of the connection. The HTTP Headers could differ regarding the version. That’s why we make sure that the information that we want to extract are correct. For instance, Origin was Sec-WebSocket-Origin in the version 8. Moreover, server responses are not the same regarding versions. In the following code, it deals with the version 13. At the moment I’m writing, the unique web-browser which supports this implementation is Google Chrome 16, others would be rejected.

/**
 * Do the handshaking between client and server
 * @param $client
 * @param $headers
 */
private function handshake($client, $headers) {
    $this->console("Getting client WebSocket version...");
    if(preg_match("/Sec-WebSocket-Version: (.*)\r\n/", $headers, $match))
        $version = $match[1];
    else {
        $this->console("The client doesn't support WebSocket");
        return false;
    }
 
    $this->console("Client WebSocket version is {$version}, (required: 13)");
    if($version == 13) {
        // Extract header variables
        $this->console("Getting headers...");
        if(preg_match("/GET (.*) HTTP/", $headers, $match))
            $root = $match[1];
        if(preg_match("/Host: (.*)\r\n/", $headers, $match))
            $host = $match[1];
        if(preg_match("/Origin: (.*)\r\n/", $headers, $match))
            $origin = $match[1];
        if(preg_match("/Sec-WebSocket-Key: (.*)\r\n/", $headers, $match))
            $key = $match[1];
 
        $this->console("Client headers are:");
        $this->console("\t- Root: ".$root);
        $this->console("\t- Host: ".$host);
        $this->console("\t- Origin: ".$origin);
        $this->console("\t- Sec-WebSocket-Key: ".$key);
 
        $this->console("Generating Sec-WebSocket-Accept key...");
        $acceptKey = $key.'258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
        $acceptKey = base64_encode(sha1($acceptKey, true));
 
        $upgrade = "HTTP/1.1 101 Switching Protocols\r\n".
                   "Upgrade: websocket\r\n".
                   "Connection: Upgrade\r\n".
                   "Sec-WebSocket-Accept: $acceptKey".
                   "\r\n\r\n";
 
        $this->console(
            "Sending this response to the client #{$client->getId()}:"
            ."\r\n".$upgrade
        );
        socket_write($client->getSocket(), $upgrade);
        $client->setHandshake(true);
        $this->console("Handshake is successfully done!");
        return true;
    }
    else {
        $this->console(
            "WebSocket version 13 required"
            ."(the client supports version {$version})"
        );
        return false;
    }
}

Unmasking/Encoding data frames

Well, the client can now send messages to the server and vice-versa. Sent messages have to be formatted in a special way. In fact, if you try to display them, they will be encrypted, so they have to be unmasked to be human readable. The RFC 6455 describes the way to unmask data.

An implementation of that description in PHP would be this:

/**
 * Unmask a received payload
 * @param $payload
 */
private function unmask($payload) {
    $length = ord($payload[1]) & 127;
 
    if($length == 126) {
        $masks = substr($payload, 4, 4);
        $data = substr($payload, 8);
    }
    elseif($length == 127) {
        $masks = substr($payload, 10, 4);
        $data = substr($payload, 14);
    }
    else {
        $masks = substr($payload, 2, 4);
        $data = substr($payload, 6);
    }
 
    $text = '';
    for ($i = 0; $i < strlen($data); ++$i) {
        $text .= $data[$i] ^ $masks[$i%4];
    }
    return $text;
}

We have to encode the text before sending to the client. If a sent text is wrongly encoded, the client might close the connection or not correctly receive it. This is a basic implementation without encryption:

/**
 * Encode a text for sending to clients via ws://
 * @param $text
 */
private function encode($text) {
    // 0x1 text frame (FIN + opcode)
    $b1 = 0x80 | (0x1 & 0x0f);
    $length = strlen($text);
 
    if($length  125 && $length < 65536)
        $header = pack('CCS', $b1, 126, $length);
    elseif($length >= 65536)
        $header = pack('CCN', $b1, 127, $length);
 
    return $header.$text;
}

Pushing data

Now that we can send/receive messages and each side can display them properly, we’re going to see the pushing part. First of all, the script creates one process for the server + n processes for n connected clients. We’re going to fork the server process to make it still accepts new clients and children processes will send data to clients. This method below have to be called after the handshake.

/**
 * Start a child process for pushing data
 * @param unknown_type $client
 */
private function startProcess($client) {
    $this->console("Start a child process");
    $pid = pcntl_fork();
    if($pid == -1) {
        die('could not fork');
    }
    elseif($pid) { // process
        $client->setPid($pid);
    }
    else {
        // we are the child
        while(true) {
            // push something to the client
            $seconds = rand(2, 5);
            $this->send($client, "I am waiting {$seconds} seconds");
            sleep($seconds);
        }
    }
}

Note that we set the PID of the Client object in the server process. When a client leaves the application, it will send a ‘quit’ command to the server (more information in the client side section). The server will treat the message and will send a kill request to the process. However, we can make it in another way: instead of forking the server process, we could execute another program and kill it properly.

The client side

This part is really easy. Nothing special to figure out other than the WebSocket initialization and events which handle WebSockets: ‘onopen’, ‘onclose’ and ‘onerror’. We will see the ‘onmessage’ event in the receiving data section. This is a basic client side implementation:

var ws = new WebSocket('ws://127.0.0.1:5001');
ws.onopen = function(msg) {
    write('Connection successfully opened (readyState ' + this.readyState+')');
};
ws.onclose = function(msg) {
    if(this.readyState == 2)
        write(
            'Closing... The connection is going throught'
            + 'the closing handshake (readyState '+this.readyState+')'
        );
    else if(this.readyState == 3)
        write(
            'Connection closed... The connection has been closed'
            + 'or could not be opened (readyState '+this.readyState+')'
        );
    else
        write('Connection closed... (unhandled readyState '+this.readyState+')');
};
ws.onerror = function(event) {
    terminal.innerHTML = '<li style="color: red;">'+event.data+'</li>'
    + terminal.innerHTML;
};

Receiving data

The client doesn’t have to make a request to the server to know if there are new data. When there is something new, the server will send automatically to the concerned client. That new data is handled by the ‘onmessage’ event.

ws.onmessage = function(msg) {
    write('Server says: '+msg.data);
};

Leave the application

When a client leaves, a ‘quit’ message is sent on the before unload window event (window.onbeforeunload). This message is directly handled by the server.

window.onbeforeunload = function() {
    ws.send('quit');
};

Subsequently, the server will execute something like:

if($action == "quit") {
    $this->console("Killing a child process");
    posix_kill($client->getPid(), SIGTERM);
    $this->console("Process {$client->getPid()} is killed!");
}

More information

This is some useful links for more information and details about WebSockets:

• The WebSocket Protocol, RFC 6455 on the IETF Website
• The WebSocket API on the W3C Website

Feel free to copy and adapt the code source of PHP Push WebSocket.

In few years, we might say good bye to the pull technology like AJAX and optimize network performance by the way. :-)
Stay tuned…