html5 및 File API를 사용하여 서버 (node.js)에 파일을 저장하지 않고 한 클라이언트 브라우저에서 다른 클라이언트 브라우저로 파일을 전송하는 방법

Question

서버에 파일을 저장하지 않고 다른 클라이언트 브라우저로 파일을 전송해야합니다 .js) HTML5 및 File API로 어떻게 할 수 있습니까?

실제로 용액 구현 :

최종 solutionlooks을이 같은

2. 파일 어레이는 키 기억 파일 객체를 포함하는 클라이언트 입력으로부터 파일을 가져 [TYPE = 파일] 시드에 . slice/mozSlice 메서드를 사용하여 청크를 분할하면 Object.slice가 Blob 객체를 반환합니다.

3. FileReader 사용 Blob은 원시 이진 데이터 또는 base64 인코딩 된 데이터로 읽을 수 있습니다. FileReader는 base64로 읽기위한 readAsDataURL (blob)과 원시 이진 데이터로 읽기위한 readAsBinaryString (blob)을 구현합니다. BLOB에서 읽은 데이터에 액세스하려면 'onloadend'FileReader 이벤트를 참조하십시오.

4. 인코딩 된 데이터가 socket.io를 통해 전송되는

5. 당신은 정확히 같은 크기의 덩어리를 얻을 수있는 위치를 정지/청크 크기 (* 64 일반적으로 1024)와 다음 슬라이스 시작에 따라 청크 수를 계산하는 로직을 구현해야

   유일한 서버 측 로직이 수신 된 데이터를 socket.io를 통해 연결된 배에 보내야하는 node.js

6. 가장 흥미로운 점은 모든 청크를 배의 클라이언트 브라우저에서 BLOB로 함께 가져 오는 것입니다. 원시 이진 데이터에서 BLOB를 만들면 잘못된 BLOB 크기가 발생하고 잘못된 결과가 발생합니다. 이것이 seeder에서 base64로 인코딩 된 데이터를 전송하는 이유입니다.
   디코딩 자체가 구현해야하므로 디코딩이 문제가 될 수 있습니다.

   function decode64 (data) { 
       var mimeString = data.split(',')[0].split(':')[1].split(';')[0], 
       // remove all chars before ',' 
       byteString = atob(data.split(',')[1]), 
       // if BlobBuilder available 
       ab = new ArrayBuffer(byteString.length), 
       ia = new Uint8Array(ab); 
   
       for (var i = 0; i < byteString.length; i++) { 
        ia[i] = byteString.charCodeAt(i); 
       } 
       blob = new Blob([ia], {'type' : (mimeString) }); 
   return blob; 
   } 
   

우리 aother 청크 디코딩 함유 배열 밀어해야 블롭 데이터 디코딩 데. 7. 모양 디코딩 덩어리의 배열에서의 Blob을 만들기 파일이나

Answer 1

WebSocket을 내가 상상할 수있는 유일한 방법입니다하고 싶은대로 할 파일 API를 쓰기 방울을 사용하여이

new Blob (array_of_decoded_blobs_returned_by_decode64_function, {type:'mime-type'}) 

처럼 떨어지게 이렇게하면 서버 측 프록시가 필요합니다.

참조 : Do websockets allow for p2p (browser to browser) communication?

Answer 2

체크 아웃 webrtc. 브라우저로 파일을 직접 보낼 수 있습니다. 서버는 한 클라이언트 브라우저에 다른 클라이언트 브라우저의 "주소"만을 알려줍니다.