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.

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 ...

The best content for your career. Discover unlimited learning
on demand for around $1/day.