連載
» 2016年03月14日 05時00分 公開

いまさら聞けないWebSocketとSocket.IOの基礎知識&インストールSocket.IOで始めるWebSocket超入門(1)(2/2 ページ)

[猪熊朔也,三菱総研DCS]
前のページへ 1|2       

チャットアプリケーションのひな型作成

 最後に、チャットアプリケーションのひな型を作成します。今後、このひな型アプリケーションにコードを追記しながらSocket.IOライブラリを解説していきます。「websocket-chat」ディレクトリ直下に以下の2ファイルを作成します。

  1. index.html:クライアントサイド(ユーザーが使用するチャット画面を実装)
  2. app.js:サーバサイド(メッセージ送受信等サーバサイド処理を実装)
ひな型ファイル作成確認

 各ファイルに以下のようなコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>websocket-chat</title>
  <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
  <div class="container">
    <h1>WebSocket-Chat</h1>
      <form class="form-inline">
        <div class="form-group">
          <label for="msgForm">メッセージ:</label>
          <input type="text" class="form-control" id="msgForm">
        </div>
          <button type="submit" class="btn btn-primary">送信</button>
      </form>
      <div id="chatLogs"></div>
  </div>
    
    <script type="text/javascript">
        var socket = io.connect();
    
        socket.on("server_to_client", function(data){appendMsg(data.value)});
    
        function appendMsg(text) {
            $("#chatLogs").append("<div>" + text + "</div>");
        }
    
        $("form").submit(function(e){
            var message = $("#msgForm").val();
            $("#msgForm").val('');
            socket.emit("client_to_server", {value : message});
            e.preventDefault();
        });
    </script>
</body>
</html>
index.html
var http = require('http');
var socketio = require('socket.io');
var fs = require('fs');
var server = http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type' : 'text/html'});
    res.end(fs.readFileSync(__dirname + '/index.html', 'utf-8'));
}).listen(3000);  // ポート競合の場合は値を変更
 
var io = socketio.listen(server);
 
io.sockets.on('connection', function(socket) {
    socket.on('client_to_server', function(data) {
        io.sockets.emit('server_to_client', {value : data.value});
    });
});
app.js

チャットアプリケーションの実行確認

 コードを記述したら、ひな型アプリケーションの動作を確認します。ターミナルにて、「websocket-chat」ディレクトリに移動し、以下のコマンドを実行します。

$ node app.js

 コマンドを実行したら、「http://localhost:3000/」に2つのウィンドウから接続してみましょう。以下のようなチャットウィンドウが表示されていればひな型アプリケーションの起動成功です。

websocket-chat起動確認

 それでは、実際にひな型アプリケーションを操作してみます。片方のウィンドウ上で任意のメッセージを入力し、送信ボタンを押下します。

メッセージ送受信

 2つのウィンドウに、入力したメッセージがリアルタイムに反映されたことが確認できたと思います。ちなみに、「F12」キーを押下してChrome Developer Toolsを開き、「Network」パネルを確認すると、確かにWebSocket通信が開始されていることも確認できます。

WebSocket通信確認

次回からSocket.IOライブラリの解説

 いかがでしたでしょうか。今回は環境構築のみで終了となりますが、次回からチャットアプリケーションを実装しながらSocket.IOライブラリの解説に入っていきますので、お楽しみに。

前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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