チャットアプリ開発に見る、Socket.IOの基本ライブラリの使い方：Socket.IOで始めるWebSocket超入門（2）（3/3 ページ）

» 2016年04月28日 05時00分 公開
[猪熊朔也，三菱総研DCS]
前のページへ 1|2|3 　　　　　　

個別送信

　次に、個別送信について説明します。Socket.IOでアクセスしたクライアントには必ず一意のIDが割り当てられます。このIDを利用することで、特定のクライアントに対してのみサーバからデータを送信できます。個別送信では、「io.to(ID).emit(送信イベント名, 送信データ)」を使用します。

個別送信概要図

　今度は、入室時のユーザー名を、入力したユーザーだけに表示する処理を実装します。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>websocket-chat</title>
  6.     <link rel="stylesheet"
  7.     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  9.     <!-- C01. Socket.IOクライアントライブラリの読み込み -->
  10.     <script type="text/javascript" src="/socket.io/socket.io.js"></script>
  11. </head>
  12. <body>
  13.     <div class="container">
  14.         <h1>WebSocket-Chat</h1>
  15.         <form class="form-inline">
  16.             <div class="form-group">
  17.                 <label for="msgForm">名前：</label>
  18.                 <input type="text" class="form-control" id="msgForm">
  19.             </div>
  20.             <button type="submit" class="btn btn-primary" id="sendButton">入室</button>
  21.         </form>
  22.         <div id="chatLogs"></div>
  23.     </div>
  24.  
  25.     <script type="text/javascript">
  26.         var socket = io.connect(); // C02. ソケットへの接続
  27.         var isEnter = false;
  28.         var name = '';
  29.  
  30.         // C04. server_to_clientイベント・データを受信する
  31.         socket.on("server_to_client", function(data){appendMsg(data.value)});
  32.  
  33.         function appendMsg(text) {
  34.             $("#chatLogs").append("<div>" + text + "</div>");
  35.         }
  36.  
  37.         $("form").submit(function(e){
  38.             var message = $("#msgForm").val();
  39.             $("#msgForm").val('');
  40.             if (isEnter) {
  41.               message = "[" + name + "]: " + message;
  42.                 // C03. client_to_serverイベント・データを送信する
  43.                 socket.emit("client_to_server", {value : message});
  44.             } else {
  45.                 name = message;
  46.                 var entryMessage = name + "さんが入室しました。";
  47.                 // C05. client_to_server_broadcastイベント・データを送信する
  48.                 socket.emit("client_to_server_broadcast", {value : entryMessage});
  49.                 // C06. client_to_server_personalイベント・データを送信する
  50.                 socket.emit("client_to_server_personal", {value : name});
  51.                 changeLabel();
  52.             }
  53.             e.preventDefault();
  54.         });
  55.  
  56.         function changeLabel() {
  57.             $("label").text("メッセージ：");
  58.             $("button").text("送信");
  59.             isEnter = true;
  60.         }
  61.  
  62.     </script>
  63. </body>
  64. </html>
index.html（49、50行目が追加・変更部分）
  • C06.　client_to_server_personalイベント・データを送信する

　名前欄に入力された値をサーバに送信する処理をclient_to_server_personalイベントとして追加しています。

  1. // S01. 必要なモジュールを読み込む
  2. var http = require('http');
  3. var socketio = require('socket.io');
  4. var fs = require('fs');
  5. // S02. HTTPサーバを生成する
  6. var server = http.createServer(function(req, res) {
  7.     res.writeHead(200, {'Content-Type' : 'text/html'});
  8.     res.end(fs.readFileSync(__dirname + '/index.html', 'utf-8'));
  9. }).listen(3000);  // ポート競合の場合は値を変更
  10.  
  11. // S03. HTTPサーバにソケットをひも付ける（WebSocket有効化）
  12. var io = socketio.listen(server);
  13.  
  14. // S04. connectionイベント・データを受信する
  15. io.sockets.on('connection', function(socket) { 
  16.     var name;
  17.     // S05. client_to_serverイベント・データを受信する
  18.     socket.on('client_to_server', function(data) {
  19.         // S06. server_to_clientイベント・データを送信する
  20.         io.sockets.emit('server_to_client', {value : data.value});
  21.     });
  22.     // S07. client_to_server_broadcastイベント・データを受信し、送信元以外に送信する
  23.     socket.on('client_to_server_broadcast', function(data) {
  24.         socket.broadcast.emit('server_to_client', {value : data.value});
  25.     });
  26.     // S08. client_to_server_personalイベント・データを受信し、送信元だけに送信する
  27.     socket.on('client_to_server_personal', function(data) {
  28.         var id = socket.id;
  29.         name = data.value;
  30.         var personalMessage = "あなたは、" + name + "さんとして入室しました。"
  31.         io.to(id).emit('server_to_client', {value : personalMessage})
  32.     });
  33. });
app.js（16、26～32行目が追加・変更部分）
  • S08.　client_to_server_personalイベント・データを受信し、送信元だけに送信する

　データを送信する前に、各クライアントに一意に割り当てられるIDを取得します。「socket.id」によって取得することが可能です。そのIDに対して、つまり特定のクライアントに対してのみデータを送信しています。

　コードの変更・保存が完了したら、再度アプリケーションの動作を確認します。“node app.js”を実行し、複数のブラウザウィンドウでアプリケーションを開いてください。

個別送信動作確認

　先ほどと同様に、どれか1つのブラウザの名前欄に値を入力し、入室ボタンを押します。入力ウィンドウには、「あなたは、～さんとして入室しました。」というメッセージが表示され、それ以外のウィンドウには「～さんが入室しました。」というメッセージが表示されることが確認できると思います。

　このように、socket.idを指定してデータを送信すると、特定のクライアントのみにデータを送信することができます。

io.to(id).emit('server_to_client', {value : personalMessage})

クライアント切断時の処理

　最後にクライアントとのコネクションが切断したときの処理を実装します。ブラウザウィンドウを閉じたユーザーがいたら、その他のユーザーに退出メッセージを表示する処理を追加します。

  1. // S01. 必要なモジュールを読み込む
  2. var http = require('http');
  3. var socketio = require('socket.io');
  4. var fs = require('fs');
  5. // S02. HTTPサーバを生成する
  6. var server = http.createServer(function(req, res) {
  7.     res.writeHead(200, {'Content-Type' : 'text/html'});
  8.     res.end(fs.readFileSync(__dirname + '/index.html', 'utf-8'));
  9. }).listen(3000);  // ポート競合の場合は値を変更
  10.  
  11. // S03. HTTPサーバにソケットをひも付ける（WebSocket有効化）
  12. var io = socketio.listen(server);
  13. // S04. connectionイベント・データを受信する
  14. io.sockets.on('connection', function(socket) {
  15.     var name;
  16.     // S05. client_to_serverイベント・データを受信する
  17.     socket.on('client_to_server', function(data) {
  18.         // S06. server_to_clientイベント・データを送信する
  19.         io.sockets.emit('server_to_client', {value : data.value});
  20.     });
  21.     // S07. client_to_server_broadcastイベント・データを受信し、送信元以外に送信する
  22.     socket.on('client_to_server_broadcast', function(data) {
  23.         socket.broadcast.emit('server_to_client', {value : data.value});
  24.     });
  25.     // S08. client_to_server_personalイベント・データを受信し、送信元のみに送信する
  26.     socket.on('client_to_server_personal', function(data) {
  27.         var id = socket.id;
  28.         name = data.value;
  29.         var personalMessage = "あなたは、" + name + "さんとして入室しました。"
  30.         io.to(id).emit('server_to_client', {value : personalMessage});
  31.     });
  32.     // S09. disconnectイベントを受信し、退出メッセージを送信する
  33.     socket.on('disconnect', function() {
  34.         if (name == 'undefined') {
  35.             console.log("未入室のまま、どこかへ去っていきました。");
  36.         } else {
  37.             var endMessage = name + "さんが退出しました。"
  38.             io.sockets.emit('server_to_client', {value : endMessage});
  39.         }
  40.     });
  41. });
app.js（32～40行目が追加・変更部分）
  • S09.　disconnectイベントを受信し、退出メッセージを送信する

　クライアントサイドのindex.htmlへのコードは不要です。Socket.IOはクライアントが切断すると、自動的にdisconnectイベントを発生させます。つまり、コネクション切断時の処理はサーバサイドにてdisconnectイベント受信後のコールバック関数を定義するだけで実装できます。

    socket.on('disconnect', function() {
        // この中に切断時の処理を記述する
    });

　再度、同じ要領で動作確認を行います。複数のブラウザウィンドウを開き、1つのウィンドウを閉じてみてください。

コネクション切断処理動作確認【1】
コネクション切断処理動作確認【2】

　「～さんが退出しました。」というメッセージが残りの開かれているウィンドウに表示されたと思います。

　また、入室しないままウィンドウを閉じると、以下のようにターミナル上にメッセージが表示されることも確認してみてください。

コネクション切断処理動作確認【3】

Socket.IO基本ライブラリのまとめ

　いかがでしたでしょうか。今回説明した内容を表形式でまとめます。

処理概要 クライアントサイド サーバサイド
WebSocket通信準備 ・モジュール読み込み
　（/socket.io/socket.io.js）
・ソケット接続（io.connect）		 ・モジュール読み込み（require）
・HTTPサーバ生成（createServer）
・ソケットのひも付け（listen）
データ送信 emit：一斉送信
― broadcast：自分以外
― to(id)：自分のみ
データ受信 on：イベント・データ受信
切断時の処理 ― disconnectイベント定義

　次回は、Socket.IOライブラリのうち、データ送信対象をグループ化できる「room」と、サーバサイドの機能を分割できる「namespace」に焦点を当てて解説します。

前のページへ 1|2|3 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

HTML5�ｽ�ｽ陋幢ｽｽX 鬮ｫ�ｪ陋滂ｿｽ�ｽ�ｺ闕ｵ譁溷ｸｷ�ｹ譎｢�ｽ�ｳ驛｢�ｧ�ｽ�ｭ驛｢譎｢�ｽ�ｳ驛｢�ｧ�ｽ�ｰ

髫ｴ蟷｢�ｽ�ｬ髫ｴ魃会ｽｽ�･髫ｴ蟶ｷ�｣�ｯ闖ｫ�｣

注目のテーマ

4AI by ＠IT - AIを作り、動かし、守り、生かす
Microsoft ＆ Windows最前線2025
AI for エンジニアリング
ローコード／ノーコード セントラル by ＠IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by ＠IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。