2016年6月21日火曜日

socket.ioでブラウザ双方向通信をする

ブラウザで双方向通信できないかと調べたところ、socket.ioというnode.js用ライブラリを使うとできるということなので、実際に動かしてみた。socket.ioはWebSocketを扱うためのライブラリ。WebSocketはサーバとクライアント間の双方向通信するための規格で、Ajaxなどの従来の技術よりも通信効率がいい。

今回はUbuntuにnode.jsをインストールし、ブラウザはFirefoxを使用。node.jsサーバを起動し、ブラウザで2つ画面を開いて、その2つの画面間でnode.jsサーバ経由の通信を行う。以下はそのときの手順。

１．node.jsインストール

node.jsに加えてsocket.ioのインストールに使うnpmもインストールする。


インストールするとnode.jsのコマンド名はデフォルトではnodejsになっているので、シンボリックリンクを作成してnodeで実行できるようにする。


バージョン確認。


２．socket.ioインストール

socket.ioをインストールすると、ホームディレクトリにnode_modules/socket.ioディレクトリが作成される。


３．クライアントサイドのコーディング

①socket.ioライブラリの読み込み
1
2
<!-- socket.ioライブラリの読み込み -->
<script src="/socket.io/socket.io.js" type="text/javascript"></script>
②HTML部の記述（bodyタグ内）
1
2
3
4
5
6
7
8
9
<div>
<h1>
socket.io test</h1>
<form action="" name="form">
<button name="button" onclick="sendData()" type="button">送信</button>
<input name="input" type="text" value=""></form>
<div id="display">
</div>
</div>
③javascript部の記述
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// ソケットへ接続（node.jsサーバとブラウザを起動するPCが別の場合は、node.jsサーバのアドレスを指定）
  var socket = io( 'http://localhost:9001/' );
  socket.on( 'connect', function () {
    // 相手ブラウザからのメッセージを受け取る
    socket.on( 'message', function ( message ) {
      // 相手ブラウザのメッセージを表示
      dispData( message );
    });
 
 
    // 相手ブラウザが切断した通知を受け取る
    socket.on( 'disconnect', function () {
      dispData( 'The other browser was disconnected' );
    });
 
  });
   
// 相手ブラウザにデータを送信
function sendData() {
  var message = document.form.input.value;
  socket.emit( 'message', message );
}
// 相手ブラウザから送られてきたメッセージを表示
function dispData( message ) {
  var display = document.getElementById( 'display' );
  display.innerHTML = message;
}
socket.onでサーバからのデータを受信し、socket.emitでサーバにデータを送信する。 その際に第1引数にmessageなどとイベント名を指定することで、送受信するデータを特定する。

４．サーバサイドのコーディング

node.js用のコードは以下の通り。ここではポート9001を使い、３で作成したHTMLをindex.htmとして保存し、それをサーバに置いて読み込む。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// モジュール読み込み
var http = require( 'http' );
var socketio = require( 'socket.io' ); // socket.ioモジュールの読み込み
var fs = require( 'fs' );
 
// HTTPサーバ（ポート9001）の生成
var port = 9001;
var server = http.createServer( function( req, res ) {
    res.writeHead( 200, { 'Content-Type' : 'text/html' } );
    // 表示するhtmlの読み込み
    res.end( fs.readFileSync( __dirname + '/index.html', 'utf-8' ) );
}).listen( port );
 
// HTTPサーバへのソケットのひも付け
var io = socketio.listen( server );
 
io.sockets.on( 'connection', function (socket) {
  // ブラウザからメッセージを受け取る
  socket.on( 'message', function ( message ) {
    // もう一方のブラウザへメッセージを送る
    socket.broadcast.emit( 'message', message);
  });
 
  // ブラウザ切断時にもう一方に切断したことを伝える
  socket.on( 'disconnect', function () {
    socket.broadcast.emit( 'disconnect' );
  });
});

socket.onでブラウザからのデータを受信し、socket.broadcast.emitでもう一方のブラウザにデータを送信する。 クライアントサイドと同様に、第1引数にmessageなどとイベント名を指定することで、送受信するデータを特定する。  socket.broadcast.emitはデータを受け取ったクライアント以外すべてのクライアントに送信する。

５．ファイルをnode.jsサーバに配置

サーバサイド、クライアントサイド両方のファイルをnode.jsサーバに配置する。ここではサーバサイドのファイルをtest.js、クライアントサイドのファイルをindex.htmlとする。

６．node.jsサーバの起動



７．ブラウザからアクセス

ブラウザの画面を2つ開き、以下のurlにアクセスする。ブラウザを起動するPCがnode.jsサーバと別の場合は、localhostをnode.jsサーバのIPアドレスに変える。

以下のような画面が表示される。送信ボックスに何か入力して「送信」ボタンを押すと、もう一方の画面に入力した内容が表示される。



この送信ボックスからはHTMLタグやスタイルシートも送れる。例えば「<b style="color: #ff0000;">test</b>」を送ると太字で赤いtestが相手ブラウザに表示される。さらには、googleマップやYouTubeの埋め込みコードも送れるので、相手のブラウザに突然地図や動画を表示させることもできる。インターネット上で使うにはセキュリティ対策が必要だろうけれど、使い方次第で面白いことができそう。

投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)