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

Socket.io

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 # 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 Node.JS Socket.IO

    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.

    < Gestion de projets, todo list, …
    Raspberry Pi un ordinateur … >

    Designed by Vincent RABAH