画像やファイルも送ることができるSocket.ioチャットアプリ

Question

私は最近Socket.ioプロジェクトに興味を持ちました。他のライブラリを使わなくても画像や他のタイプのファイルを簡単に送ることができるのだろうかと思います。私はファイルをサーバーにアップロードして保存しようとしていないので、その時点でチャットルームにいる人にブロードキャストしたいだけです。したがって、コードは最小限に抑える必要があります。しかし、私は実際にエンコード/デコードのもので悪いので、いくつかの例のコードは素晴らしいだろう。

Answer 1

私はSocket.ioの公式チャットの例を修正し、ファイル/画像、さらにはビデオをBase64エンコーディングで送信する機能を追加しました。client.jsとindex.jsのソースコードを見ることができますそれはあなたに役立つことを願っています。クライアント側では

：サーバー側で

$('#uploadfile').bind('change', function(e){ 
    var data = e.originalEvent.target.files[0]; 
    readThenSendFile(data);  
}); 

function readThenSendFile(data){ 

    var reader = new FileReader(); 
    reader.onload = function(evt){ 
     var msg ={}; 
     msg.username = username; 
     msg.file = evt.target.result; 
     msg.fileName = data.name; 
     socket.emit('base64 file', msg); 
    }; 
    reader.readAsDataURL(data); 
} 

：ここ

socket.on('base64 file', function (msg) { 
    console.log('received base64 file from' + msg.username); 
    socket.username = msg.username; 
    // socket.broadcast.emit('base64 image', //exclude sender 
    io.sockets.emit('base64 file', //include sender 

     { 
      username: socket.username, 
      file: msg.file, 
      fileName: msg.fileName 
     } 

    ); 
}); 

プロジェクトです：

https://github.com/Arch1tect/Chatbox