Socketioで画像を飛ばす方法

こんにちは。

タイトル通りの質問です。
画像を送ることは可能でしょうか？

文字や信号は送れるのですが、画像データはどのようにすれば良いのかと‥‥

よろしくお願いいたします。

追記：
回答者様のアドバイスから、base64に変換して送信するということがわかったので、inputのfileタイプでアップロードした画像をsocketで送るというのをやってみたのですが（以下のコード）、base64に変換してからsocketで送信することは出来ているものの、受信側でエラー（[object%20Object] 404 (Not Found)）
なるものが出て、画像になりません。どこが間違っているのでしょうか？よろしくお願いいたします

javascript
1//app.js
2var express = require('express'),
3    app = express(),
4    server = require('http').Server(app),
5    io = require('socket.io').listen(server),
6    ejs = require('ejs');
7
8
9app.set('views',__dirname+'/views');
10app.set('view engine', 'ejs');
11
12app.use('/public',express.static(__dirname+'/public'));
13
14app.get('/',function(req,res){
15    res.render('index');
16})
17
18app.get('/index2',function(req,res){
19    res.render('index2');
20})
21
22
23server.listen(3000);
24console.log('now comming...');
25
26
27io.sockets.on('connection',function(socket){
28    //画像をindex1からindex2へと渡す
29    socket.on('send_img',function(data){
30        console.log(data);
31        io.sockets.emit('send_img',data);
32    });
33    
34})

html
1//index1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta charset="UTF-8">
6<title>index</title>
7</head>
8<body>
9    <h1>画像を送る側</h1>
10    <input type="file" accept="image/*" id="image">
11    <button id="send">send</button>
12<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
13<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
14
15<script>
16$(function(){
17    //socket接続
18    var socket = io.connect();
19    
20    //画像プレビュー
21    var image = $('#image').on('change',function(){
22        var fileList = $(this).prop('files');
23        var reader = new FileReader();
24        reader.readAsDataURL(fileList[0]);
25        
26        reader.onload = function(){
27            $('<img width="200" class="preview">').attr('src',reader.result).appendTo('body');
28        }
29    })
30    
31//sendボタンを押して、index2へと画像送信
32    $('#send').on('click',function(){
33        var src = $('.preview').attr('src');
34        socket.emit('send_img',{
35            data: src
36        });
37    });
38    
39})
40</script>
41</body>
42</html>

html
1//index2
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta charset="UTF-8">
6<title>index2</title>
7</head>
8<body>
9   <h1>ここに画像が流れてくるよ</h1>
10   <div id="come_image"></div>
11<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
12<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
13<script>
14$(function(){
15    //socket接続
16    var socket = io.connect();
17    
18    socket.on('send_img',function(data){
19        console.log(data); //これは出てきました
20        $('<img width="200">').attr('src',data).appendTo('#come_image');//これが画像にならない
21    })
22})
23</script>
24</body>
25</html>

行動規範の内容に同意します

回答1件

ベストアンサー

前スレでも書いたように、base64 のテキストでーたに変換して送るんです。
作ったのがあるので見せてあげたいけど、自宅マシン起動しないと動かないので。
自宅tomcatサーバ、firefox からローカルホストでサーバに接続、
firefox と外部のサーバ通信に、milkcocoa、外部のサーバにクライアントを配置。
クライアントから、画像クレ、と。指示を出すと、
milkcocoa push サーバ経由で、自宅のfirefox に繋がり、firefox からローカルサーバに画像イメージをbase64 変換したものをリクエストして受信、milkcocoa の1パケット転送サイズが約4kbなので、サイズに合うように分割して送信、クライアントで分割データをすべて受信完了したら、
1つに繋げて img タグに、image/png,base64,のデータスキーマを付けて表示。
てな感じですね。pushサーバでやるには結構面倒ですよ。

2016/2/9 追記

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="utf-8" />
6  <title>FileReader Demo</title>
7  <script src="jquery.js"></script>
8<script>
9$(function() {
10
11  $("#file").on("change", function(e) {
12
13      var file = e.target.files[0];
14
15      var fr = new FileReader();
16      fr.onloadend = function() {
17
18          var t = $("<textarea />");
19          t.val(fr.result);
20          $("#res").append(t);
21          $("#res").append($("<img />").attr("src", fr.result));
22      };
23
24      fr.readAsDataURL(file);
25  });
26});
27</script>
28<style>
29</style>
30</head>
31<body>
32  <input type="file" id="file" />
33  <hr />
34  <div id="res"></div>
35</body>
36</html>
37

投稿2016/02/09 04:40

編集2016/02/09 14:42

ipadcaron

総合スコア1693

dialbird

2016/02/09 09:53

ご返答ありがとうございます。アドバイスを参考に、base64で送信してみたはずなのですが、受け取り側でエラーが発生して読み込めていません........。これは長すぎることが原因なのでしょうか？コードをあげるので、何が問題なのか教えてくだされば幸いです。よろしくお願いいたします

ipadcaron

2016/02/09 11:52

base64 返還後の文字列の先頭20文字をここに載せてください。というか、base64 データスキーマ img タグとか検索しましたか。

dialbird

2016/02/12 02:51

返信が大変遅れて申し訳ありません。実は非常に単純なミスで、送る側でbase64データをdataプロパティに詰め込んでいたため、受け取った側（index2）のsrcに渡すのが、「data」ではなく、「data.data」と打たなければ情報が受け取れないということでした........。大変失礼いたしました！そして改めて、アドバイスをありがとうございました！

行動規範の内容に同意します