Socket.IOを利用する
Node.jsをインストールして、npmコマンドから "socket.io" モジュールを同ディレクトリにインストールしてください。
その後、同ディレクトリの app.js を起動して http://localhost:8080 にアクセスすると、最下部のフォームがチャットのように動作します。
このページに埋め込まれているSocket.IOクライアントコード
<form action="" method="post" onsubmit="return false;"> <input type="text" class="text" style="width: 300px;" id="message"/> <input type="submit" class="button" style="padding:10px" onclick="sendMessage();" value="Send" /> </form> <pre id="log" style="width: 300px;"></pre> <script src="/socket.io/socket.io.js"></script> <script> var sock = io.connect('http://localhost:8080'); sock.on('public_room', function(data) { var msg = data.value.replace(/</g, '<').replace(/>/g, '>').replace(/¥n/g, '') + '¥n'; var content = document.querySelector('#log').textContent; document.querySelector('#log').textContent = msg + content; }); function sendMessage(msg) { sock.emit('public_room', { value: document.querySelector('#message').value }); } </script>
サーバーコード(app.js)の内容
var http = require('http'); var socketio = require('socket.io'); var fs = require('fs'); var server = http.createServer(function(req, res) { fs.readFile(__dirname + '/list.html', function(err, data) { if (err) { res.writeHead(500); res.end('Not Found: index.html'); return; } res.writeHead(200, { 'Content-Type': 'text/html' }); res.end(data); }); }).listen(8080); var io = socketio.listen(server); io.sockets.on('connection', function(socket) { socket.on('public_room', function(data) { io.sockets.emit('public_room', { value: data.value }); }); });
フォームに入力された内容をサーバーに送信して、サーバから受信した内容をページ内に表示する簡易的なチャットシステム