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