Vous êtes passionnés comme moi de machines basse-consommation, ARM, Atom : rendez visite à mon partenaire !

Twitter Stream avec NodeJS Socket.IO et Express

jeudi 01 septembre 2011 à 18:15 | Dev

Après avoir utilisé Twitter Stream avec Ruby, utilisons maintenant Node.JS, Socket.io et le framework MVC Express.js. L'idée originale est de Phollow.me, qui avait réalisé le superbe article Streaming Twitter: NodeJS & Socket.IO, mais qui ne fonctionne plus (cf mes commentaires dans son article).

Installons les outils nécessaires à Node.JS pour mettre en oeuvre ce projet:

npm install express socket.io twitter-node

Socket.IO permet une connexion temps-réel entre le browser web et le serveur, en s'appuyant sur différents mécanismes, afin de fournir la meilleure compatibilité possible avec les navigateurs web. Socket.IO est une librairie Javascript Node.js, qui repose sur :

WebSocket
Adobe Flash Socket
AJAX long polling
AJAX multipart streaming
Forever Iframe
JSONP Polling

Code Node.js du serveur


var config  = {user: "user", password: "pass", action: "filter", track: ['itwars','bieber','#javascript']},
sys     = require('sys');
express = require('express');
app = express.createServer();

app.configure(function(){
  app.use(express.static(__dirname + '/public'));
});
app.get('/', function(req, res, next){
  res.render('/public/index.html');
});
app.listen(8080);
console.log('Server running at http://localhost:8080/');

var socket  = require('socket.io').listen(app);
twitter     = new (require("twitter-node").TwitterNode)(config);
socket.set('log level', 1);
twitter
.addListener('error', function(error){
console.log(error.message); 
})
.addListener('tweet', function(tweet){
socket.sockets.send(JSON.stringify(tweet));
})
.addListener('limit', function(limit){
sys.puts('LIMIT: ' + sys.inspect(limit));
})
.addListener('delete', function(del){
sys.puts('DELETE: ' + sys.inspect(del));
})
.addListener('end', function(resp){
sys.puts('wave goodbye...' + resp.statusCode);
})
.stream();

1ère ligne : configuration du compte Twitter et des filtres de recherche pour twitter-node
4ème ligne : mise en marche de Express qui "répond" aux requêtes web
6ème ligne : chemin du fichier index.html et default.css
23ème ligne: la fameuse fonction broadcast qui ne fonctionnait plus depuis Socket.io 0.7, que j'ai modifié par send (typeerror: object #<manager> has no method 'broadcast')

Code Socket.IO et jQuery côté client


<!DOCTYPE HTML>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="default.css">
  <title>Twitter live stream : NodeJS + Socket.io</title>
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
	<header>
    <h1 id="title">Twitter Streaming - Node.js - Socket.io</h1>
  </header>
  <div id="twitter-stream">
	  <ul>
	  </ul>
  </div>
  <article>
 	Really Node.JS and Socket.io rocks ! 
  </article>
  <footer>
  	Original code from http://phollow.fr - Modified by <a	href="http://www.it-wars.com" rel="follow">IT Wars</a>
  </footer>
  <script>
   (function(document, window, undefined) {
    var script = document.createElement("script");
    script.src = "http://code.jquery.com/jquery.min.js";
    script.onload = function() {
     $.getScript("http://127.0.0.1:8080/socket.io/socket.io.js", function() {
	var socket = io.connect('http://127.0.0.1:8080');
      	socket.on('message', function(json) {
	console.log("...");
	      	data = JSON.parse(json);
	      	var replacePattern = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
	      	var replacedText = (data.text).replace(replacePattern, '<a href="$1" target="_blank">$1</a>');
		$("<li></li>").html("<div class=\"g\"><div class=\"c1\">[" + data.user.screen_name + "]</div> <div class=\"c2\">▸</div> " + "<div class=\"c3\"><font color=\"red\">" + replacedText + "</font></div></div>")
          	.prependTo("ul")
          	.css({opacity:0}).slideDown("slow").animate({opacity:1},"slow");
      	});
      	socket.on("disconnect", function() {
	console.log("disconnected");
      });
     });
    };
    document.getElementsByTagName("head")[0].appendChild(script);
   })(document, window);
  </script>
  </body>
</html>

34-35ème ligne: expression régulière pour avoir l'accès direct aux urls tweetés
36ème ligne: mise en oeuvre d'une version simplifiée de 960.css un framework css grid, pour éviter l'utilisation affreuse de <table>

Démarrage du serveur node.js

node serveur.js

Vous vous connectez sur http://localhost:8080. Et voilà, vous pouvez surveiller des mots clé Twitter de façon moderne et simple, avec Node.js, Socket.io, Express.js et jQuery ! Vous pouvez télécharger l'ensemble de l'exemple Twitter Stream avec NodeJS Socket.IO et Express.js.

A propos de Vincent RABAH

DSI/Responsable Technique depuis plus de 10 ans. Les Systèmes d'Informations complexes sont mon quotidien !
Expert en management, GreenIT et virtualisation de serveurs. Vous pouvez consulter l'ensemble de mon parcours.

I do speak English even if my blog is written in French ... Feel free to leave comments, I'll answer you !