socket.ioを使ってimageをuploadする

画像なんてsocket越しにアップロードするものかわかりませんが。
expressjs + socket.ioでsocketごしに画像をサーバーに送信 > サーバー側でそれを画像として保存後、URLをクライアントに配信 > それをまた画面で受け取って表示するというサンプルを書いて実験してみました。

ポイントとしては
FileReader#readAsDataURLでDataURI形式にした画像を文字列としてサーバーに送る

         var file = input.files[0];
         var name = file.name;

         var reader = new FileReader();
         reader.onloadend = function (e) {
             var data = e.target.result;

             if (!data) {
                 return ;
             }

             socket.emit('upload', { name : name, data : data});
         };

         reader.readAsDataURL(file);

サーバー側で文字列的にbase64でencodeしてある部分を取り出して画像としてファイルに出力

                var imgStructure = img.split(',');
                var base64 = imgStructure[1];

                fs.writeFile(
                    './public/' + name,
                    new Buffer(base64, 'base64'),
                    function (err) {
                        console.log(err);
                    }
                );

その後はクライアント側で関しているイベントにたいして出力した画像のパスを配信

socket.emit('notify', {url : publicUrl});

クライント側で、受け取った画像パスをimgタグに突っ込んで表示

     socket.on('notify', function (data) {
                   console.log(data);
                   $('#image001').attr('src', data.url);

               });

実際に作成したサンプルは下においてあります。
https://github.com/hiroyukimizukami/socketio-image