Cover by Raffaele Cecco

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

A Graphical Chat Application with Canvas and WebSockets

Drawing pretty graphics is all very well, but in the following example, we will look at a more practical application for Canvas: a pseudo-3D chat application (Figure 6-15). This example will also demonstrate how to combine Canvas with other HTML5 features like WebSockets.

A pseudo-3D graphical chat application using HTML5 Canvas and WebSockets

Figure 6-15. A pseudo-3D graphical chat application using HTML5 Canvas and WebSockets

The WebSockets Advantage

Canvas has enjoyed its fair share of the HTML5 limelight, and another equally exciting (but possibly less well known) HTML5 element is WebSockets. Although this book is about graphics, it’s worth discussing why WebSockets are significant for modern web applications and how they can be integrated with Canvas.

The Web typically transmits its data between servers and client browsers using the HTTP protocol, but HTTP has certain limitations (unlike shiny new WebSockets) that make it unsuitable for high-speed, bidirectional network communication:

It’s a one-way street

The client web browser requests data from the server and the server then obliges. The server cannot “push” information to the client without being asked for it specifically.

It carries significant overhead

HTTP data carries a lot of baggage in the form of header information. Requesting just one byte of data can result in potentially hundreds of bytes of additional “invisible” header information also ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required