I decided to checkout another HTML5 goodness : websockets.
Websockets allows to adress a specific problem in modern apps : it's the server to client communication. This is also known as "Push" technology. So basicly, it's the server, that without any request from client, will send him piece of informations. This specific design issue is currently being implemented via these two, or more, design patterns :
- Poll : the client makes each x seconds/minutes a request to the server asking "is there something new for me to display to my user ?"
- Long-polling : the client opens a channel with the server and lets it open. So when the server has new things for the client (for instance a chat message), he can send it no problem.
These techniques, while working with great servers capabilities, are and remains hacks. While the first one with enough clients, can be close to a DDOS, the latter can litteraly dry the server thread pool. If you are facebook or google (do they implement their push technology like this ? not sure), there's no real problem. In other cases, your server crashes.
That's when websockets come in to play. So instead of implementing yet another chat, that are nowadays the basic hello world you can find with websockets, I wanted something a little more fun. A whiteboard.
It works like this :
- the client subscribe to a websocket with the server, on a specific port (not 80 of course) (and that's because I couldn't upload a demo on the internet, and made a video instead)
- the server stores the registered clients in an array
- on mouserover the square you can see in the video, the client, via the websocket, send the mouse coordinates to the server, allong with the meta infos.
- the server broadcast to every client. In fact, I decided to hide the mouse on the client so that he sees what the server broadcasts, and therefore what all others clients see. This adresses other kinds of problem, like multiplayer games can face. Anyway.
- the client display the cursor with the meta infos : the size, the color and so.
- there's two kinds of display : a mouseover or a mouseclick. In the latter, it the cursor is printed inside the square (it's a whiteboard right ?)
And that's it. I know there's encore lots to do. For instance making a kind of plugin client-side (the server for now only broadcast what is received) to refactor. I just wanted to have a little fun with websocket. I'll come back to it later.
- The code here https://github.com/marcelfalliere/Websocket-php-whiteboard
- The video here http://www.youtube.com/watch?v=ANqHZg5vh7o
But since this is HTML5, and that now all browser supports it, and that not all browser that supports HTML5 supports websockets (only Chrome does for now), you won't see it around for some time.