LoginSignup
167
169

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-12-07

遅ればせながら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);
(追記終わり)

167
169
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
167
169