Node.js
jQuery
Socket.io

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

More than 3 years have passed since last update.

遅ればせながら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);

(追記終わり)