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

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

双方向通信の実装（データの送受信）

　次に、双方向通信によるデータ送受信の実装についてです。ひな型の処理の流れに沿って説明します。ポイントは、emitは送信、onは受信ということです。

データの送信 データの受信
emit(送信イベント名, 送信データ) 関数 on（受信イベント名, 受信データ） 関数

クライアントからサーバへのデータ送信

  1.         $("form").submit(function(e){
  2.             var message = $("#msgForm").val();
  3.             $("#msgForm").val('');
  4. // C03.  client_to_serverイベント・データを送信する
  5.             socket.emit("client_to_server", {value : message});
  6.             e.preventDefault();
  7.         });
index.html
  • C03. client_to_serverイベント・データを送信する

　フォームがsubmitされたら入力値を取得し、その値をclient_to_serverイベントとしてサーバへ送信しています。

サーバでのデータ受信とクライアントへのデータ送信

  1. // S04. connectionイベント・データを受信する
  2. io.sockets.on('connection', function(socket) {
  3.     // S05. client_to_serverイベント・データを受信する
  4.     socket.on('client_to_server', function(data) {
  5.     	// S06. server_to_clientイベント・データを送信する
  6.         io.sockets.emit('server_to_client', {value : data.value});
  7.     });
  8. });
app.js
  • S04.　connectionイベント・データを受信する

　クライアント～サーバ間でWebSocket通信が確立すると、io.socketsオブジェクトに対してconnectionイベントが発火（データが送信）されます。このconnectionイベントはWebSocket通信が確立している限り有効です。そのため、connectionイベント受信時のコールバック関数として、必要なサーバサイドの処理を定義することになります。

io.sockets.on('connection', function(socket) {
    // この中に必要な処理を記述する
});
  • S05.　client_to_serverイベント・データを受信する

　クライアントから送信されたclient_to_serverイベントとデータを受信しています。

  • S06.　server_to_clientイベント・データを送信する

　受信したデータをserver_to_clientイベントとして、接続している全クライアントへ送信しています。全クライアントにデータを送信するには、「io.sockets.emit(送信イベント名, 送信データ)」を使用します。

        io.sockets.emit('server_to_client', {value : data.value});

クライアントでのデータ受信

  1.         // C04. server_to_clientイベント・データを受信する
  2.         socket.on("server_to_client", function(data){appendMsg(data.value)});
  3.     
  4.         function appendMsg(text) {
  5.             $("#chatLogs").append("<div>" + text + "</div>");
  6.         }index.html
  • C04.　server_to_clientイベント・データを受信する

　サーバから送信されたserver_to_clientイベントを受信し、データを取得します。コールバック関数（appendMsg(text)）で、チャットログエリアにデータを表示します。

　以上が、クライアント～サーバ間での双方向通信の実装です。emit／onを交互に使用してデータをやりとりしていることが確認できたと思います。

その他のデータ送信方法

　Socket.IOサーバライブラリには、全クライアントにデータを送信する「io.sockets.emit(送信イベント名, 送信データ)」だけではなく、他にもデータ送信用ライブラリが存在します。

ブロードキャスト送信

　まずは、「socket.broadcast.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.                 changeLabel();
  50.             }
  51.             e.preventDefault();
  52.         });
  53.  
  54.         function changeLabel() {
  55.             $("label").text("メッセージ：");
  56.             $("button").text("送信");
  57.             isEnter = true;
  58.         }
  59.  
  60.     </script>
  61. </body>
  62. </html>
index.html（17、20、27、28、40～50、54～58行目が追加・変更部分）
  • C05.　client_to_server_broadcastイベント・データを送信する

　“～さんが入室しました。”というメッセージをサーバに送信するclient_to_server_broadcastイベントを新しく追加しています。

  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.     // 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. });
app.js（21～24行目が追加・変更部分）
  • S07.　client_to_server_broadcastイベント・データを受信し、送信元以外に送信する

　client_to_server_broadcastイベントより取得した入室メッセージをクライアントに送信する処理を追加しています。

　コードの変更・保存が完了したら、アプリケーションの動作を確認します。ターミナルで、websocket-chatディレクトリに移動し、「node app.js」コマンドを実行してください（既に実行中の場合は、1度停止した後に再度実行してください）。その後、ブラウザウィンドウを複数開き、「http://localhost:3000/」にアクセスしてみましょう。

ブロードキャスト送信動作確認【1】

　どれか1つのウィンドウで、名前欄に値を入力し、入室ボタンを押下します。

ブロードキャスト送信動作確認【2】

　ボタン押下後、入力ウィンドウ以外に、「～さんが入室しました。」というメッセージが表示されていることが確認できたと思います。

　このように、broadcastを利用すると、自分以外の全てのクライアントにメッセージを送信できます。

        socket.broadcast.emit('server_to_client', {value : data.value});
前のページへ 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のメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。