Node.js + Socket.IO + jQuery で最小構成チャット

  • 170
    いいね
  • 4
    コメント
この記事は最終更新日から1年以上が経過しています。

遅ればせながらNode.js始めまして、チャットアプリを作ってみました。
なるべくソースが短くなるようにしてみました。

server.jsとindex.htmlをWebサーバの同じ場所に置いて
node server
で起動します。
ブラウザからサーバの3000番ポートを開いてチャットが出来ます。例http://example.com:3000

server.js
var html = require('fs').readFileSync('index.html');
var http = require('http').createServer(function(req, res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(html);
});
var io = require('socket.io')(http);
http.listen(3000);
io.on('connection', function(socket) {
  socket.on('msg', function(data) {
    io.emit('msg', data);
  });
});
index.html
<!doctype html>
<meta charset="utf-8">
<title>chat</title>
<script src="/socket.io/socket.io.js"></script>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<form><input></form><div></div>
<script>
var socket = io();
$('form').submit(function() {
  socket.emit('msg', $('input').val());
  $('input').val('');
  return false;
});
socket.on('msg', function(data) {
  $('div').prepend(data + '<br>');
});
</script>

注意点

socket.ioモジュールの読み込みに失敗するときは以下のコマンドでインストールしてください。

npm install socket.io

外部公開する場合はサニタイズしてください。index.htmlの
$('div').prepend(data + '<br>');
の前に
data = $('<div/>').text(data).html();
と一行加えるとタグを無効化できます。

(追記2013/12/8 Thanks to @LightSpeedC さん)
readFileSync メソッドの代わりに以下の様に createReadStreamstream.Readable.pipe を使うとブロックされずにパイプで繋いでファイルを流すことができます。
require('fs').createReadStream('index.html').pipe(res);
(追記終わり)