Skip to content

10分で作るnode.jsで動くリアルタイムwebチャット

やあshi3zだ。


リョウヘイのnode.jsの記事がどうも良くわからなくて困っている子はおらんかにゃ?
まあ具体的に言うとそれは僕なんだけれども、しかし出来てしまえば驚異的に簡単だったのでその驚きを含めて紹介しよう。

リョウヘイの記事そのものはnode.jsのインストールしか扱っていなかった。
ほとんど同じやり方でMac OSXにもインストールすることができた。
さすがUNIXネイティブなPCだね。

あとはいきなりソースコード載せて読めという突き放しっぷりに衝撃を受けたが、リョウヘイの記事からもリンクされているリンク先Block Rockin’ Codesのサンプルをほんの少し変えるだけでチャットプログラムが出来たぞ。

あと、そもそもリョウヘイの記事に誤植があってejsをejisと書いてあった。新しいJISコード体系ができたのかと思ってだいぶ混乱したぞ。

今は記事の方は修正してある。

さて、基本的にはBlock Rockin’ Codesの最初の手順に従えばいいんだけど、expressはnode.js用のフレームワークで、ejsはテンプレートエンジンだそうな(ひな形を作成してくれる仕組みだと思っていたのは勘違いでした。@mesoさんに教えていただきました。ありがとうございます)。

これはこれで非常に便利なんだけど、手っ取り早く触れるサンプルが欲しい、という人のためにとりあえず動くチャットのサンプルをzipに固めてみたぞ

node.jsのチャットサンプル(nodechat.zip)

これを適当なフォルダに展開してそのフォルダに移動し、

node app.js

とコマンドラインでやると・・・

ってな感じでポート3000くらいで待ち構えてくれる

次にWebブラウザを開き、http://localhost:3000/test.htmlと入力するとチャットが立ち上がる

ほぼBlock Rockin’ Codesのサンプル通りだけど、チャットに関する部分だけ追加してある。サーバは全く弄っていない。

sample.js

window.onload=function(){
    logDiv = document.getElementById("log");
}

var logDiv;
var log = function(){ console.log(arguments);logDiv.innerHTML+=arguments[0]+"<BR>"; }
var socket = io.connect('http://localhost'); // 1

socket.on('connect', function() { // 2
  log('connected');
  socket.emit('msg send', 'data'); // 3
  socket.on('msg push', function (msg) { // 7
    log(msg); // 8
   
  });
});

function ping(){
  var text = document.getElementById("text").value;
  socket.emit('msg send', text); // 3
}

test.html

<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/sample.js"></script>
</head>
<body>
<input type="text" id="text" size=50></input>
<button  onclick=javascript:ping() >ping</button>
<div id="log"></div>
</body>

複数のブラウザを立ち上げてhttp://localhost:3000/test.htmlを開いてみよう。

なにかテキストエリアに文字を入力して「ping」ボタンを押すと、他のブラウザにもこんな感じでリアルタイムに通信が共有されるぞ!!

いままではWebでリアルタイム通信を扱おうと思ったら、Cometとかややこしい仕組みを実装しなければならなかった。
けれどもnode.jsを使えば非常に簡単にリアルタイム通信を扱う事が出来るみたいだ。

今回かかった時間はインストールで悩む時間も含めてわずか10分
コードだけなら3分以下で書く事が出来た。

これは面白いね

このエントリーをはてなブックマークに追加
はてなブックマーク - 10分で作るnode.jsで動くリアルタイムwebチャット
Post to Google Buzz
Share on GREE

Related posts:

  1. node.js + socket.io + enchant.js でつくる、リアルタイム通信ゲーム
  2. JavaScriptで MMOGをつくってみよう その4
  3. shi3z式ゲームプログラミング #6 覚えておくといいテクニック
  4. [9leap] geolocationAPIを使ってGPS連動ゲームを作ろう!
  5. [投稿]JavaScriptでBASICっぽい言語をつくる

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*