Socket.IO開発時に役立つツール4選とroom、namespaceライブラリの使い方：Socket.IOで始めるWebSocket超入門（終）（2/3 ページ）

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

namespaceを使った別機能の実装

　次に、namespaceを使って、チャット以外の機能を実装します。今回は例として、接続したクライアントに今日の運勢を表示する機能を追加します。イメージ図を以下に記載します。

今日の運勢機能追加イメージ図

　それでは、実装です。

サーバ側の実装

　room解説時とは異なり、サーバサイドから説明します。

  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. // チャット機能
  15. // S04. connectionイベントを受信する
  16. var chat = io.of('/chat').on('connection', function(socket) {
  17.     var room = '';
  18.     var name = '';
  19.  
  20.     // roomへの入室は、「socket.join(room名)」
  21.     socket.on('client_to_server_join', function(data) {
  22.         room = data.value;
  23.         socket.join(room);
  24.     });
  25.     // S05. client_to_serverイベント・データを受信する
  26.     socket.on('client_to_server', function(data) {
  27.         // S06. server_to_clientイベント・データを送信する
  28.         chat.to(room).emit('server_to_client', {value : data.value});
  29.     });
  30.     // S07. client_to_server_broadcastイベント・データを受信し、送信元以外に送信する
  31.     socket.on('client_to_server_broadcast', function(data) {
  32.         socket.broadcast.to(room).emit('server_to_client', {value : data.value});
  33.     });
  34.     // S08. client_to_server_personalイベント・データを受信し、送信元のみに送信する
  35.     socket.on('client_to_server_personal', function(data) {
  36.         var id = socket.id;
  37.         name = data.value;
  38.         var personalMessage = "あなたは、" + name + "さんとして入室しました。"
  39.         chat.to(id).emit('server_to_client', {value : personalMessage});
  40.     });
  41.     // S09. dicconnectイベントを受信し、退出メッセージを送信する
  42.     socket.on('disconnect', function() {
  43.         if (name == '') {
  44.             console.log("未入室のまま、どこかへ去っていきました。");
  45.         } else {
  46.             var endMessage = name + "さんが退出しました。"
  47.             chat.to(room).emit('server_to_client', {value : endMessage});
  48.         }
  49.     });
  50. });
  51.  
  52. // 今日の運勢機能
  53. var fortune = io.of('/fortune').on('connection', function(socket) {
  54.     var id = socket.id;
  55.     // 運勢の配列からランダムで取得してアクセスしたクライアントに送信する
  56.     var fortunes = ["大吉", "吉", "中吉", "小吉", "末吉", "凶", "大凶"];
  57.     var selectedFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
  58.     var todaysFortune = "今日のあなたの運勢は… " + selectedFortune + " です。"
  59.     fortune.to(id).emit('server_to_client', {value : todaysFortune});
  60. });
app.js（14、16、28、39、47、52～60行目が追加・変更部分）

　サーバサイドでは、チャット用・今日の運勢用それぞれのWebSocketコネクションをnamespace（名前空間）を区切って定義しています。チャットは/chat、今日の運勢は/fortuneです。namespaceを指定するには、「of(/namespace名)」を使用します。

　追加実装前は、ioという変数を介してデータの送受信を行っていました。しかし、追加実装後は名前空間が指定されたコネクションを、それぞれchat、fortune変数を介して使用します。そのため、データのやりとりを行うためにはio変数部分をそれぞれchat、fortuneに変更することが必要です。

　ただし、データの受信とbroadcast送信は、名前空間を定義した場合でもsocket変数を介して行います。socket.onとsocket.broadcast部分には変更がないことに注目してください。今日の運勢機能では、運勢データをランダムでクライアントに送信する処理を追加しています。

クライアント側の実装

　次に、クライアントサイドです。

  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 class="roomLabel" for="rooms">部屋：</label>
  18.                 <select class="form-control" id="rooms">
  19.                     <option value="room01">部屋01</option>
  20.                     <option value="room02">部屋02</option>
  21.                 </select>
  22.                 <label class="nameLabel" for="msgForm">名前：</label>
  23.                 <input type="text" class="form-control" id="msgForm">
  24.             </div>
  25.             <button type="submit" class="btn btn-primary" id="sendButton">入室</button>
  26.         </form>
  27.         <br>
  28.         <div id="chatLogs">
  29.             <p>=====チャットログ=====</p>
  30.         </div>
  31.         <br>
  32.         <div id="fortune">
  33.             <p>======今日の運勢======</p>
  34.         </div>
  35.     </div>
  36.  
  37.     <script type="text/javascript">
  38.         var chat = io('http://localhost:3000/chat');
  39.         var fortune = io('http://localhost:3000/fortune');  // C02. ソケットへの接続
  40.         var isEnter = false;
  41.         var name = '';
  42.  
  43.         // C04. server_to_clientイベント・データを受信する
  44.         chat.on("server_to_client", function(data){appendMsg(data.value)});
  45.         fortune.on("server_to_client", function(data) {appendFortune(data.value)});
  46.  
  47.         function appendMsg(text) {
  48.             $("#chatLogs").append("<div>" + text + "</div>");
  49.         }
  50.  
  51.         function appendFortune(text) {
  52.             $("#fortune").append("<div>" + text + "</div>");
  53.         }
  54.  
  55.         $("form").submit(function(e){
  56.             var message = $("#msgForm").val();
  57.             var selectRoom = $("#rooms").val();
  58.             $("#msgForm").val('');
  59.             if (isEnter) {
  60.               message = "[" + name + "]: " + message;
  61.                 // C03. client_to_serverイベント・データを送信する
  62.                 chat.emit("client_to_server", {value : message});
  63.             } else {
  64.                 name = message;
  65.                 var entryMessage = name + "さんが入室しました。";
  66.                 chat.emit("client_to_server_join", {value : selectRoom});
  67.                 // C05. client_to_server_broadcastイベント・データを送信する
  68.                 chat.emit("client_to_server_broadcast", {value : entryMessage});
  69.                 // C06. client_to_server_personalイベント・データを送信する
  70.                 chat.emit("client_to_server_personal", {value : name});
  71.                 changeLabel();
  72.             }
  73.             e.preventDefault();
  74.         });
  75.  
  76.         function changeLabel() {
  77.             $(".nameLabel").text("メッセージ：");
  78.             $("#rooms").prop("disabled", true);
  79.             $("button").text("送信");
  80.             isEnter = true;
  81.         }
  82.     </script>
  83. </body>
  84. </html>
index.html（27、31～34、38、39、44、45、51～53、62、66～70行目が追加・変更部分）

　クライアントサイドでは、ソケット接続処理を変更しています。これは、サーバサイドで/chatと、/fortune2つのWebSocketコネクションを定義したためです。

　namespaceが与えられたソケット接続には「io(connectionURL)」を使用します。引数なしの「io()」や「io.connect()」使用時には、デフォルトで「/」という名前空間を持つWebSocketコネクションが生成されます。チャット用のイベントはchat変数を、今日の運勢用のイベントはfortune変数を介して発火されます。

動作確認

　コードの変更・保存が完了したら、アプリケーションの動作を確認します。

　nodeプロセスを再起動した後に、ブラウザウィンドウでアプリケーションを開いてください。チャットログエリアの下に、今日の運勢が表示されていることが確認できると思います。

今日の運勢機能動作確認

　クライアントサイド、サーバサイドそれぞれ独自に定義した変数を使って処理が実行されます。このようにnamespaceを使用することで、機能追加でコードの量が増えても、1つ1つの処理がどの機能のものか分かりやすい形で追加開発を進めることが可能です。

namespaceの定義：of(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のメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。