node.jsとsocket.ioで簡易チャットを作成する
本エントリーは「to-R JavaScript Advent Calendar 2015」6日目のエントリー、node.jsとsocket.ioで簡易チャットを作成する方法を解説します。
socket.ioはnode.jsでWebSocketを行うためのライブラリです。
WebSocketとはサーバーからクライアントに対して情報を送信するための技術です。これまでのチャットシステムの多くは、クライアントからサーバーに問い合わせてはじめて新しいメーセージがあるかどうか知ることができ、そのタイミングで新しいメッセージを表示していました。
WebSocketを利用するとサーバーがメッセージを受け取ったタイミングでチャットのメンバーに対して受けっとたメッセージを送信することができます。
インストール
node.jsのサーバーでsocket.ioを利用できるようにしましょう。
前回はnode.jsのExpressでローカルサーバーを構築したのでその続きで行っていきます。
以下のコマンドでsocket.ioをインストールします。
npm install socket.io
サーバーサイド(app.js)
次にapp.jsの中身を以下のように変更します。
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.use(express.static('htdocs'));
io.on('connection', function(socket){
socket.on('send_message', function(text){
io.sockets.emit('receive_message',text);
});
});
var port = 3000;
http.listen(port,function(){
console.log("Expressサーバーがポート%dで起動しました。モード:%s",port,app.settings.env)
});
io.on('connection',...)でsocket.ioのサービスを起動させ、 socket.on('send_message',...)でsocket.onでメッセージを受け取った場合の処理を設定しており、io.sockets.emit('receive_message',text);で受け取ったメッセージを全員に配信しております。
クライアントサイド(index.html)
index.htmlを以下のようにしましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="messages"></ul>
<input id="text"><button id="button">Send</button>
<script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var socket = io();
$("#button").click(function(){
socket.emit('send_message', $("#text").val());
$("#text").val("").focus()
});
socket.on('receive_message', function(text) {
$("#messages").append("<li>"+text+"</li>")
});
</script>
</body>
</html>
これでボタンがクリックされた際にsocket.ioにメッセージを送信し、socket.ioからメッセージを受け取った際にul内に表示するように設定しています。
次回はWebRTCの利用方法について解説します。
関連エントリー
5分でわかるWebRTCの仕組み - html5minutes vol.01