Node.js[1]-soket.io v0.7以降の記述方

インストール作業と基本理解を終えて放置していたNode.jsだが、もう少しちゃんと触ってみた。
socket.ioはNode.jsでリアルタイム通信を実現するモジュールで、websocketはもちろん、それが使えない環境でもFlash Socket等を通じて通信を成り立たせている。
Node.jsを始める気になった決定打は、これがとても楽しそうだったからだ。

http://socket.io/
http://jxck.github.com/socket.io/ 日本語

まずは何をするにも新しいことをする時は手になじませる作業が必要ということで、こちらの5分くらいで出来るnode.js(0.6) + socket.io(0.8x)のサンプルプログラムを書き写して、動くことを確認してみた。これだけでも結構たのしい。
socket.ioはv0.7で大幅に変わったらしいので、理解を深めるために以前の記述法のサンプルを書きなおしてみることにした。

一本目はこちらの、入門 node.jsでsocket.ioを使うを書きなおしてみた。

var http = require('http'),
server = http.createServer(function(req, res){
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write('<h1>サンプルサーバ</h1>');
  res.end();
}),
io = require('socket.io').listen(server);

server.listen(3000);
 
io.sockets.on('connection', function(socket){
  console.log('connection');
  //↓ブラウザでアクセスした時に表示される
  socket.emit('message',  '接続しました' );
  //1秒ごとにクライアントにpushする
  var interval = setInterval(function() {
    socket.emit('message','This is a message from the server' + new Date().getTime());
  },1000);

  //↓client.onは今回作成したシステムではまだ不要

  //クライアント側からmessage受信ハンドラ
  socket.on('message', function(message) {
    socket.emit(message);//自分のブラウザへ
    socket.broadcast.emit(message);//他のブラウザへ
  });

  //クライアント切断時のハンドラ
  socket.on('disconnect', function(){
    socket.broadcast.emit('message','user disconnect');
  })
  
});

もう一本、たったの50行! node.js でツイート垂れ流しサイト作成法を訂正してみた。こちらはtwitter-nodeも開発中止でエラーが出ている状態だった。
twitter-nodeはntwitterを変わりに使うことにした。
https://github.com/AvianFlu/ntwitter
consumer_keyなどはdev.twitter.comで作成してコピペする。

var sys = require('util'),
		express = require('express'),
		app = express.createServer(),
		twitter = require('ntwitter');

app.configure(function(){
	app.use(express.static(__dirname+'/views'));
});
app.listen(8888);
var io = require('socket.io').listen(app);

var twitter = new twitter({
  consumer_key: 'dev.twitter.comで作成',
  consumer_secret	:'dev.twitter.comで作成',
  access_token_key: 'dev.twitter.comで作成',
  access_token_secret:'dev.twitter.comで作成'
});
twitter.stream('statuses/filter', {'track':'クリスマス'},function(stream) {
    //console.log('stream 接続id ; '+socket.id);
    stream.on('data', function (data) {
    //console.log(console.dir(data));
    io.sockets.emit('message',data.text);
    //console.log('つぶやき ; '+data.text);
  });
  stream.on('end', function (response) {
    // Handle a disconnection
  });
  stream.on('destroy', function (response) {
    // Handle a 'silent' disconnection from Twitter, no end/error event fired
  });
});

これでおおよそNode.jsの書き方やsocket.ioの動作に慣れてきたので、次は誰かのタッチを共有するうようなものを作成してみる。

Comments

  1. omk より:

    回答ありがとうごいますm(_ _)m
    consumer_keyなどはdev.twitter.comで作成したものと一致していましたが、やはり
    Redirecting to とだけ表示されてしまいます。
    上記のプログラム以外に訂正する箇所はありましたでしょうか…?

    • sib より:

      他にといえば、http://jxck.github.com/socket.io/でも書かれているように
      html側のjsが以下のように変わります。

      var socket = io.connect('http://localhost:8888');
      socket.on('message', function(t){
      console.log('mes; '+t);
      $('<div></div>')
      .text(t)
      .prependTo('#tweets');
      });

      あとは、すみません。う〜んちょっとわかりません。
      console.logでどこでおかしなことが発生するかチェックされてはいかがでしょうか?

      • omk より:

        HTML側のコードありがとうございますm(_ _)m
        firefoxで
        http://localhost:8888 に接続すると
        redirecting to だけでconsole.logには何も表示されないのですが
        http://localhost:8888/index.htmlに接続すると
        ブラウザには何も表示されないのですが
        コマンドプロントのほうにツイートが垂れ流されています
        console.logにはjqueryやsocket.ioのコードが表示されています
        なぜブラウザ側で流れないのでしょうか…orz

        • sib より:

          たぶん、コマンドプロントに垂れ流されているならあと一歩だと思います。
          つなぎかたをチェックしてみて、トライ繰り返してみてください。
          ちなみにhtmlの全文は以下のとおりですが、前回の修正箇所以外ほぼ虫けらロックさんのものと同じです。

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>twithash</title>
          <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
          <script src='/socket.io/socket.io.js'></script>
          <script>
          	var socket = io.connect('ローカルホスト:8888');
          	socket.on('message', function(t){
          		console.log('mes; '+t);
              $('<div></div>')
              .text(t)
              .prependTo('#tweets');
            });  
          </script>
          </head>
          <body>
          	<div id="tweets"></div>
          </body>
          </html>
          
          

          *「ローカルホスト:8888」は「http://localhost:8888」です。
           コメントの自動リンク機能が変に働いておかしくなるので、このようにしておきました。

          • omk より:

            何度かトライしたらブラウザのほうで垂れ流すことができました!!
            コードを載せて頂いたり何度も詳しく回答して頂きとても感謝しています。
            本当にありがとうございましたm(_ _)m

          • sib より:

            おお!
            おめでとうございます。
            お役に立ててなによりです。

  2. omk より:

    node.js でツイート垂れ流しサイト作成法を訂正してみたについて質問なのですが、
    上記の通りプログラムを訂正して虫けらロックさんの手順で実行していきlocalhost:8888に接続すると
    Redirecting to //
    とだけでてきて垂れ流しが始まらないのですがなぜでしょうか?
    プログラムがあまりわからず苦戦しております。よろしくお願いしますm(_ _)m

    • sib より:

      Redirectingは不思議ですね。私の所では起きたことがなかったです。
      もしかするとconsumer_keyあたりの絡みなのでしょうか?
      きちんとしたことは言えませんが、consumer_key、consumer_secret、access_token_key、access_token_secretあたりがdev.twitter.comで作成したものと一致してるか確認してみてはいががでしょうか?
      私もNodeについては初心者なのでちゃんとした回答できずに申し訳ございません。

Submit a Comment

Spam Protection by WP-SpamFree