J’ai passé mon après midi à tester node.js (framework basé sur V8 pour développer des serveurs d’I/O de façon évènementielle), node-websocket-server (composant websocket pour node.js) et l’élément <video> html5. Au final, ça m’a donné de synchroniser le lancement de plusieurs vidéos lancées dans plusieurs navigateurs à partir d’un point unique (j’ai comme idée de créer un cinéma virtuel sur le net où tout le monde pourra voir la même vidéo en même temps ;) ).
Au final, même si j’ai pris un peu de temps, c’est assez simple et il commence à y avoir pas mal d’exemples pour faire tout ça sur le net.
On commence par installer et compiler Node.js:
[...]
$ cd node
$ ./configure
[...]
$ make
[...]
$ file build/default/node
ELF 32-bit LSB executable, Intel 80386, version 1 (GNU/Linux), dynamically linked (uses shared libs), for GNU/Linux 2.6.18, not stripped
Une fois compilé, on pourra valider avec le petit test « hello world » présent sur la home page du site.
Ensuite, pour communiquer entre mon navigateur et le serveur, j’ai décidé d’utiliser les websockets. Pour cela, il faut avoir la lib spéciale pour node.js, et il s’agit de node-websocket-server. Il ne faut pas oublier de setter la variable NODE_PATH pour donner l’emplacement de la bibliothèque, car cela est indispensable au lancement de node.js
[...]
$ export NODE_PATH=$(pwd)/node-websocket-server/lib
Il faut maintenant se fabriquer un tout petit serveur simple qui relaie juste les évènements.
C’est parti pour serveur.js:
var http = require("http");
var ws = require("ws");
var sys = require("sys");
function dummy(req, res){
};
var httpServer = http.createServer(dummy);
var server = ws.createServer({
debug: true
}, httpServer);
server.addListener("listening", function(){
sys.puts("Listening...");
});
server.addListener("connection", function(conn){
server.send(conn.id, "Connected as: "+conn.id);
conn.addListener("message", function(message){
sys.puts("Message: " + message);
conn.broadcast("<"+conn.id+"> "+message);
});
});
server.addListener("close", function(conn){
sys.puts("Closing...");
conn.broadcast("<"+conn.id+"> disconnected");
});
// lancement du serveur sur le port 8000
server.listen(8000);
Il faut lancer le serveur. Rien de plus facile:
$ ./node/node serveur.js
Listening…
Pour la partie cliente, pour gagner du temps, on va utiliser jquery. Ca donnera ça pour le html:
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="client.js" type="text/javascript"></script>
</head>
<body>
<input id="start" type="button" value="start video" />
<input id="stop" type="button" value="stop video" />
<input id="reset" type="button" value="reset video" />
<video id="video" src="lavide.ogv" style="width: 100%; height: 100%;" tabindex="0"></video>
</body>
</html>
Et pour le javascript (client.js):
// La websocket que l'on stocke "globalement"
var ws;
if ("WebSocket" in window) {
// Ou connecter la socket:
ws = new WebSocket("ws://localhost:8000/service");
ws.onopen = function() {};
ws.onmessage = function (evt) {
// Quand on reçoit un message du serveur...:
var received_msg = evt.data;
if(received_msg.match(/start/gi)) { $('#video').get(0).play(); };
if(received_msg.match(/stop/gi)) { $('#video').get(0).pause(); };
if(received_msg.match(/reset/gi)) { $('#video').get(0).currentTime = 0; };
};
ws.onclose = function() {};
} else {
// Pas de support WebSocket.
}
// Et les évènements locaux (les boutons)...:
$('#start').click(function() {
ws.send("start");
$('#video').get(0).play();
});
$('#stop').click(function() {
ws.send("stop");
$('#video').get(0).pause();
});
$('#reset').click(function() {
ws.send("reset");
$('#video').get(0).currentTime = 0;
});
});
Et voilà. C’est tout. Chargez la page dans plusieurs sessions du navigateur, et tout devrait rouler. ;)