theChrisWalker.net » Javascript

HTML5 WebSockets: the demo (part 2)

Chris — Mon, 16 Aug 2010 20:40:43 +0000

For my next trick, here’s the code of the websockets demo. I’m afraid you’ll have to run it on your own machine, and you’ll need PHP5.3 but that’s all. I reckon an up to date XAMPP should probably do the trick.

WebSocket Demo Code

To use it, read the README file, it shows how to run the server, and then you can open clients in your modern browser and see them intercommunicate.

Note: The code is very basic, so treat it kindly…

HTML5 WebSockets, very cool. (part 1)

Chris — Fri, 28 May 2010 14:45:32 +0000

I only found out about these at the Future of Web Design on Tuesday. I knew they existed in the spec but had never really investigated what they were or how they worked. Now I know I am excited. It seems they are to web apps what the XMLHTTPRequest was when it started to get used for AJAX. So let’s look at what they are, and then why they can be so beneficial to web development. It’s also worth pointing out at this stage that only Chrome 4+ (I think that version, I’m writing from memory) supports WebSockets natively although apparently Mozilla want to implement them in the next iteration of Firefox (they are already available with an add-on), so don’t expect to be using them in any non-specialist projects just yet.

What are WebSockets?

WebSockets are a connection that the browser makes to a server. Unlike a normal HTTP request, this is not a simple “send request”, “receive response” connection. This is a persistent and full-duplex connection. They can run over port 80 (or 443 for a WebSocket over TLS/SSL) and so have little difficulty with firewalls. There are some concerns over their interaction with proxies, particularly transparent ones. Once the browser sets up the WebSocket, you can send UTF8 text over it, and receive text data from the server. All this sending and receiving over data requires no more headers and only a 2 byte overhead per message.

Why are they going to be so useful?

It’s really the last sentence of that last paragraph that is important. The problem is trying to get data from the server when it’s available. Web apps using AJAX (or similar techniques), have to ask for data and then get a response, i.e. polling for updates or using Comet-like long polling techniques – where the request is made and the connection opened but the response is delayed until the server decides it has something useful to say. The Comet technique allows much better real-time updates from the server, but there’s still the overhead of the HTTP request headers and then the response headers/content.

WebSockets aim to alleviate both issues. Once the socket is open, data can flow from the server to the client whenever the server decides it wants to. Also the client can send information to the server without have to send any extra headers, any info it receives from the server is also header free and therefore the process is very efficient. HTTP headers tend to bulk up with Cookies and remain the same size irrespective of the payload sent.

Do you have an example I can actually use?

I do, but it’s not exactly ready for distribution yet. I built a very basic chat client that uses WebSockets as a demo for myself. The hardest bit was writing a socket server in PHP that could handle multiple clients and manage the broadcasting of data to them. I will post all the code in part 2 — watch this space! (in the mean time a search for “websocket” on Google Code will find you some examples (it’s what I based my code on…)

Xbox Live Gamercard API

Chris — Thu, 31 Dec 2009 11:34:25 +0000

So, got decided to join most of my friends and I got an Xbox 360. Me being me though, I got interested in the way that all the information about your “Gamertag” is stored an accessible on the xbox.com website. Wouldn’t it be fun to do something with this data!

As it turns out, I was beaten to the post by Duncan MacKensie (http://duncanmackenzie.net/Blog/put-up-a-rest-api-for-xbox-gamertag-data) who hosts a webservice to retrieve gamer data from Microsoft. I could find no details about how this service works, where the data comes from or anything! Either he has a relationship with Microsoft, or he scrapes xbox.com but either way, the data seems pretty consistent and reliable. Actually it turns out this information was right there on his website… http://www.duncanmackenzie.net/Blog/if-you-are-wondering-where-i-get-my-xbox-live-info So he gets it as part of his membership to the Xbox Community Developer Program.

However, the webservice is great, and returns XML which is fine, but I thought it would be more useful to me to have a PHP API for this data. So I wrote one which retrieves data from Duncans webservice.

Then I thought wouldn’t it be great to be able to use this dynamically in a webpage, so I wrote a service frontend which will return JSON formatted data. Then I thought wouldn’t it be useful to let other people use this as well, so I modified it and it can now cope with JSONP requests with a “_callback” parameter.

OK, so what does this all mean.

The PHP

The class is called gamertag and the usage is very simple:

// include the class file
require "gamertag.php";

//instantiate
$G = new Gamertag('thechriswalker');

//get data
$data = $G->getArray();

print_r($G);

which outputs something like this:

So now we can easily get at the data. The source code for the class (which is not fully tested, but the basics work!) is at http://thechriswalker.net/xbox360/gamertag.source.php (NB it requires either PHP5 (for json_encode) or the PEAR Services_JSON class if you want to use the “getJSON()” method).

The JSON

PHP is well and good but what if I want to use a JSON/JSONP (JSONP is for cross-domain information requesting and is very useful for public information services, see http://en.wikipedia.org/wiki/JSON#JSONP) request, well, that can be done at http://thechriswalker.net/xbox360/?gamertag=YOUR_GAMERTAG for the straight JSON or http://thechriswalker.net/xbox360/?gamertag=YOUR_GAMERTAG&_callback=YOUR_CALLBACK_FUNCTION_NAME for JSONP.

The first returns just JSON with a content type “application/json” and the second returns a javascript function call to your callback function with the JSON object as the only parameter and a content type of “text/javascript”.

These enabled me to build a simple Google Gadget to display a Gamercard:

Multiple Drag and Drop between two lists with jQuery

Chris — Tue, 10 Feb 2009 12:26:58 +0000

I wanted this functionality for a project a while ago. I google’d and found that lots of others did too, but no one had done it. Or at least not in a way that I could understand. In fact, I’m not sure I completely understand it anymore. It works very well, but also it could have some improvement. I would like to be able to drag the mouse to create a selection, but this in itself poses the difficultly of how to distinguish a “drag-to-move” from a “drag-to-select”.

Still I found it an interesting proof-of-concept and maybe you will too. The test can be found here: Select and Drag Demo.

jQuery SuperSelect

Chris — Thu, 29 Jan 2009 13:44:43 +0000

A little while back I was working on a project and wanted a selectbox to look a bit more pretty, but with complete backwards compatibility with regular select boxs.

I.E. If I already had a select box on the page, and it had various JavaScript events hanging off it already, I wanted that to function still but I wanted the box to be prettier.

The first idea was to use CSS to just style the box. But then I realised that each browser and OS has it’s own different way of rendering the controls. So I turned to JavaScript, and the always useful jQuery library. I wrote a plugin that will immediately transform any selectboxes into prettier ones, allows icons for the options, all with valid xhtml and works completely fine with JavaScript (or the plugin) disabled. Pretty cool, eh?

Well, I put the original demo page I designed for it back online, so check out the plugin!.