[Article] Première application Node.js et HTML5

**Bovino** · 28/03/2012, 13h43

Romain Maton, de Web Tambouille vous propose la suite de sa série consacrée à Node.js : Première application Node.js et HTML5.

N'hésitez pas à faire part de vos remarques et commentaires sur cet article.

Tout ce que vous devez savoir sur Node.js

Cloud9 : IDE pour le développement JavaScript et Node.js

Première application Node.js et HTML5

à lui !

**CaptainCyd** · 11/09/2013, 15h45

Bonjour,

merci pour cette exemple d'utilisation de websocket et nodejs.
Je débute avec cette techno, et j'ai trouvé cela très instructif et très intéressant

Pour tester l'exemple, j'ai eu quelques soucis car les version d'express et de socket.io ont changé, et l'exemple de code ne fonctionnait plus.
En effet, j'ai les versions suivantes :
- node : v0.10.18
- express : 3.4.0
- socket.io : 0.9.16
sous Ubuntu 12.04 64 bits

Je me permets de poster la correction que j'ai fait au niveau de d'index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<title>Socket IO Demo</title>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
 
<script type="text/javascript">
	$(document).ready(function() {
		var sock = io.connect('http://127.0.0.1:8333');;
		sock.on('message', function(data) {
			var obj = JSON.parse(data);
			if (obj.message) {
				$('#message').text(obj.message);
			} else {
				$('#timestamp').text(obj.timestamp);
				$('#clients').text(obj.clients);
			}
		});
		$("#poke").click(function() {
			sock.send("Poke !");
		});
	});
</script>
 
</head>
<body>
<div>
<h2>Démo Node.js + Socket IO</h2>
<label for="timestamp">Timestamp</label>
<div id="timestamp"></div>
<label for="clients">Clients</label>
<div id="clients"></div>
<label for="message">Message</label>
<div id="message"></div>
<p>
<button id="poke">Send poke !</button>
</p>
</div>
</body>
</html>

et pour server.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// import lib
var express = require('express');
var http = require('http');
var io = require('socket.io');
 
// init express
var app = express();
app.configure(function() {
	app.use(express.static(__dirname + '/public'));
});
app.get('/', function(req, res, next) {
	res.render('./public/index.html');
});
 
 
// init http server
var server = http.createServer(app);
server.listen(8333);
 
 
// init socket
var socket = io.listen(server);
var allClients = 0;
var clientId = 1;
socket.on('connection', function(client) {
	var my_timer;
	var my_client = {
		"id" : clientId,
		"obj" : client
	};
	clientId += 1;
	allClients += 1;
	my_timer = setInterval(function() {
		my_client.obj.send(JSON.stringify({
			"timestamp" : (new Date()).getTime(),
			"clients" : allClients
		}));
	}, 1000);
	client.on('message', function(data) {
		my_client.obj.broadcast.send(JSON.stringify({
			"message" : "poke send by client " + my_client.id
		}));
		console.log(data);
	});
	client.on('disconnect', function() {
		clearTimeout(my_timer);
		allClients -= 1;
		console.log('disconnect');
	});
});