今回は、Node.jsで双方向通信を簡単に実現できるWebSocketの技術を利用したチャットアプリの作り方について学習をしていきましょう！
「WebSocketを簡単に扱える方法が知りたい」
「Node.jsでチャットアプリを作る方法が分からない」
「Socket.IOの使い方が分からない」
このような疑問も含めて、本記事では以下のような内容で解説していきます！
【実践】「WebSocket」のサーバー制作
【実践】「WebSocket」のクライアント制作
この記事で、WebSocket & Socket.IOの使い方をしっかり学習してスキルアップを目指していきましょう！
「WebSocket」とは？
インターネットでWebサイトなどを閲覧する場合は「HTTP通信」と呼ばれる方式でサーバー側とクライアント側（ユーザー側）が一時的に接続されます。
この場合、クライアント側が「Webサイトを見せて！」と要求することで、サーバー側がWebサイトの情報を提供してブラウザ上に表示される流れになります。
しかし、これは逆に言うとクライアント側が何らかの要求をしない限り、サーバー側は情報を提供できないことを意味します。
そこでWebSocketを利用した通信にすると、サーバー側・クライアント側を常時接続状態にして双方向通信を実現できるわけです。
これにより、例えばチャットアプリやリアルタイム対戦ゲームなどを作ることができます。
「Socket.IO」について
WebSocketは双方向通信を実現するための重要な技術ではあるものの、ブラウザやユーザーの環境によって接続されないケースも少なくありません。
このような状況のなかで、あらゆるケースを想定してプログラムを組み立てるのは非常に困難で、初心者だとなおさら途方に暮れてしまうでしょう。
そのため、現在では「Socket.IO」というライブラリを利用することで、あらゆるケースを想定した双方向通信を実現できるようになっています。
Socket.IOは簡単な記述でユーザーの環境に合わせた接続を自動判別して繋げてくれるので、より開発に注力することができます。
「WebSocket」のサーバー制作
この章では、WebSocket＆Socket.IOの基本的な使い方について見ていきましょう！
主に、サーバーの環境作りや双方向通信に対応する方法について学んでいきます。
WebSocketを利用する準備
まずは、双方向通信を実現するためにサーバー作りから始めていきましょう！
本記事で扱う「Node.js」はすでにインストールされている前提で解説をしていきますが、まだの方は以下の記事を参考にしてみてください！
最初は簡単なHTTP通信ができるサーバーを作ることから始めていきましょう！
標準の「http」「fs」モジュールを利用して、HTMLを表示するサーバーを次のように作ります。
var http = require('http').createServer(handler);
var html = require('fs').readFileSync('views/index.html');
function handler(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(html);
}
http.listen(3000);
この例では、httpモジュールを利用してサーバーを構築しているのが分かります。
また、fsモジュールを利用して基本的なHTMLファイル（index.html）を取得し、サーバーを経由してブラウザに表示するようにしています。
これでひとまず基本的なサーバーが作れたので、いよいよ双方向通信の実装を進めていきましょう！
Socket.IOを使ったサーバーの構築
冒頭でも解説した通り、WebSocketの実装を効率化してくれるSocket.IOを利用してプログラミングをしていきましょう！
Socket.IOを利用するには、まず最初にNode.js向けに提供されているモジュールを次のようにインストールします。
$ npm install --save socket.io
そして、require()を使ってプロジェクトに組み込みます。
var io = require('socket.io')(http);
require末尾の(http)は、先ほど作成したサーバーと紐付けるという意味なので必ず設定をしておきましょう。
あとは、Socket.IOを使って双方向通信の実装を行うだけです！
今回は、簡単なチャットアプリを作ることを目標としていますので、クライアント側からメッセージが送信された際の処理を実装しましょう。
何らかのデータを受け取って処理を行うには「on()」メソッドの「connection」イベントを使うと良いでしょう。
io.on('connection', function(socket){
//ここに処理を記述する
});
処理の中身ですが、クライアント側から送信されたメッセージを受け取ってそれをすべてのユーザーに配信します。
このようにすれば、基本的なチャットの機能が作れますよね。
そこで、クライアントから受け取ったメッセージをemit()メソッドを使って全員に配信するには次のように記述します。
io.on('connection', function(socket){
socket.on('chat', function(msg){
io.emit('chat', msg);
});
});
connectionイベント内の引数「socket」を使ってon()メソッドを実行すると、クライアント側から送信されたデータを取得できます。
そして、取得したデータをemit()で送信すれば全員のブラウザにメッセージが表示されるわけです。
このサンプルで利用している「chat」というイベント名は、自分の好きな名称を指定することができます。
ただし、次章で解説するクライアント側の実装でも同じイベント名を利用する必要があることは忘れないようにしましょう！
「WebSocket」のクライアント制作
この章では、クライアント側（ユーザー側）の双方向通信におけるプログラミング手法を見ていきましょう！
主に、チャットで使う簡単なフォームの作り方とSocket.IOの連携方法について学んでいきます。
簡易チャットフォームの作成
まずは、チャットを行うための入力フォームを作っていきましょう。
次のサンプル例を見てください！
この例では、簡単な入力ボックスと送信ボタンが配置されています。
また、送信されたメッセージをulタグ内に表示することで、全員がメッセージを閲覧できるようにしています。
つまり、参加しているユーザー全員がそれぞれメッセージを送信することで、次々と画面にメッセージが列挙されていくというわけです。
あと、Socket.IOを利用するために提供されているライブラリを以下のように追加しておきましょう。
これで基本的な準備は整ったので、Socket.IOを利用したクライアント側の実装を行っていきましょう。
Socket.IOを使ってサーバーへ送信する処理
まず最初に、クライアント側のJavaScriptでSocket.IOを利用するために次の記述を行います。
var socket = io();
この記述だけでサーバー側と紐付けることができます。
また、特定のサーバーとだけ接続するような細かい設定も行えますが、今回は簡単に実装してみましょう。
次に、フォームへメッセージを入力してサーバーへ送信する処理を次のように記述します。
var form = document.forms.myform;
form.btn.addEventListener('click', function(e) {
e.preventDefault();
socket.emit('chat', form.text.value);
form.text.value = '';
})
この例では、formのname属性を利用して入力された文字やボタンのイベント処理を実装しています。
formは送信処理を行うと画面が一度リセットされて更新してしまうので、preventDefault()でキャンセルするようにしておきましょう。
そしてメッセージをサーバーへ送信するには、emit()を使ってフォームの文字列を指定します。
ポイントは、サーバー側で設定したイベント名「chat」に統一するという点です！
これにより、メッセージをサーバーへ送信する処理が完成したので、あとはメッセージを受信する処理を作るだけです！
Socket.IOを使ってサーバーから受信する処理
今度は、サーバー側から配信されるメッセージを受信する処理を実装していきましょう！
これはサーバー側の処理と同じようにon()メソッドを記述することで実現できます。
socket.on('chat', function(msg){
//ここに処理を記述する
});
サーバー側と共通のイベント名「chat」を使うことで、サーバー側から配信されたデータを取得できる状態になります。
あとは、HTML内に記述したulタグ内に配信されたメッセージを表示する処理を記述するだけです！
socket.on('chat', function(msg){
var li = document.createElement('li');
li.textContent = msg;
message.appendChild(li);
});
この例では、取得したメッセージを生成したli要素に適用したものをulタグ内に実装しています。
これにより、ユーザーが送信したメッセージがサーバー経由で全ユーザーに配信されて表示されるようになりましたね。
簡単なチャットアプリですが、WebSocketの基本的な知識を学ぶには良い材料なのでぜひみなさんも試してみてください！
まとめ
今回は、Node.jsで双方向通信を実現するWebSocket & Socket.IOについて学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
・Socket.IOを活用することでユーザー環境に合わせて自動接続してくれる
・通常のHTTP通信サーバーにSokcet.IOを連携することでWebSocketを実現できる
・クライアント側にSocket.IOのJSライブラリを使うことで双方向通信が可能
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
