socket.ioを使ってブラウザ間で画像を送る

socket.ioでブラウザ双方向通信をするで、node.jsサーバを介してブラウザ間でテキストを送れることが確認できたので、今度は画像を送ってみる。画像は直接は送れないようなので、base64形式で送る。ブラウザでファイルを読み込んで、base64形式でnode.jsサーバに送り、サーバはその画像データをもう一方のブラウザへ送るという流れ。

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

①socket.ioライブラリの読み込み

②HTML部の記述（bodyタグ内）

socket.io test

画像ファイルを読み込むためのボタンを設置。

③javascript部の記述

// ソケットへ接続（node.jsサーバとブラウザを起動するPCが別の場合は、node.jsサーバのアドレスを指定）
  var socket = io( 'http://localhost:9001/' );
  socket.on( 'connect', function () {

    // サーバから送られた画像を受け取って表示
    socket.on( 'image', function( imageData ) {
      if ( imageData ) {
        var canvas = document.createElement( 'canvas' );
        var ctx = canvas.getContext( '2d' );
        var img = new Image();
        img.src = imageData;
        img.onload = function() {
          // キャンバスに画像を描画
          // ロードし終わってからでないとキャンバスに描画されない
          canvas.width = img.width;
          canvas.height = img.height
          ctx.drawImage( img, 0, 0, 640, 480 );
          // bodyにcanvasを追加
          document.body.appendChild( canvas );
        }
      }
    });

  });
  
// 相手ブラウザに画像を送る
function sendImage( event ) {
  // 選択したファイルのうち1つ目を取得
  var file = event.target.files[0];

  var reader = new FileReader();

  reader.onload = function( event ) {
    // Data URLで読み込むとデータはbase64形式になっているので、そのまま送信する
    socket.emit( 'image', event.target.result );
 };
 // Data URLで画像を読み込む
 reader.readAsDataURL( file );
}
//ファイルを読み込むボタンのリスナー登録
var file = document.getElementById( 'file' );
file.addEventListener( 'change', sendImage, false );

ボタンを押して画像ファイルを選択すると、sendImageで選択したファイル（ひとつ目）をbase64形式で読み込んでsocket.emitでサーバに送る。また、socket.onでサーバから送られてきた画像を受け取り表示する。

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

１で作成したHTMLをindex.htmとして保存し、それをサーバに置いて読み込む。ポートは9001を使う。

// モジュール読み込み
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( 'image', function ( imageData ) {
    // ブラウザから受け取った画像をもう一方のブラウザへ送る
    socket.broadcast.emit( 'image', imageData );
  });

});

socket.onでブラウザからの画像を受け取り、socket.broadcast.emitでもう一方のブラウザに画像を送る。

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

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

４．ブラウザからのアクセス

node.jsサーバを以下のコマンドで起動し、ブラウザの画面を2つ開き、http://localhost:9001/にアクセスする。ブラウザを起動するPCがnode.jsサーバと別の場合は、localhostをnode.jsサーバのIPアドレスに変える。
$ node test.js

ブラウザに以下のような画面が表示される。

「参照．．．」ボタンを押して画像ファイルを選択すると、もう一方のブラウザ画面に画像が表示される。