Tải lên tệp lớn với WebSocket

Question

Tôi đang cố tải lên các tệp lớn (ít nhất 500MB, tốt nhất là tối đa một GB) bằng API WebSocket. Vấn đề là tôi không thể tìm ra cách để viết "gửi lát này của tập tin, phát hành các nguồn lực được sử dụng sau đó lặp lại". Tôi đã hy vọng tôi có thể tránh sử dụng một cái gì đó như Flash/Silverlight cho việc này.

Hiện nay, tôi đang làm việc với một cái gì đó dọc theo dòng:

function FileSlicer(file) { 
    // randomly picked 1MB slices, 
    // I don't think this size is important for this experiment 
    this.sliceSize = 1024*1024; 
    this.slices = Math.ceil(file.size/this.sliceSize); 

    this.currentSlice = 0; 

    this.getNextSlice = function() { 
     var start = this.currentSlice * this.sliceSize; 
     var end = Math.min((this.currentSlice+1) * this.sliceSize, file.size); 
     ++this.currentSlice; 

     return file.slice(start, end); 
    } 
} 

Sau đó, tôi sẽ tải lên sử dụng:

function Uploader(url, file) { 
    var fs = new FileSlicer(file); 
    var socket = new WebSocket(url); 

    socket.onopen = function() { 
     for(var i = 0; i < fs.slices; ++i) { 
      socket.send(fs.getNextSlice()); // see below 
     } 
    } 
} 

Về cơ bản này trả về ngay lập tức, bufferedAmount là không thay đổi (0) và nó tiếp tục lặp lại và thêm tất cả các lát vào hàng đợi trước khi cố gắng gửi nó; không có socket.afterSend để cho phép tôi xếp hàng đúng cách, đó là nơi tôi bị kẹt.

Answer 1

EDIT: Thế giới web, trình duyệt, tường lửa, proxy, đã thay đổi rất nhiều kể từ khi câu trả lời này được thực hiện. Ngay bây giờ, việc gửi tệp bằng cách sử dụng websockets có thể được thực hiện hiệu quả, đặc biệt là trên các mạng cục bộ.

Ổ cắm web rất hiệu quả cho giao tiếp hai chiều, đặc biệt là khi bạn quan tâm đến việc đẩy thông tin (tốt nhất là nhỏ) từ máy chủ. Chúng hoạt động như các ổ cắm hai chiều (do đó tên của chúng).

Websockets trông không giống như công nghệ phù hợp để sử dụng trong trường hợp này. Đặc biệt, việc sử dụng chúng cho biết thêm không tương thích với một số proxy, trình duyệt (IE) hoặc thậm chí là tường lửa.

Ở đầu bên kia, tải lên tệp chỉ đơn giản là gửi yêu cầu POST tới máy chủ có tệp trong phần nội dung. Trình duyệt là rất tốt ở đó và chi phí cho một tập tin lớn thực sự là gần không có gì. Không sử dụng websockets cho nhiệm vụ đó.

Answer 2

Tôi tin rằng phương pháp send() là không đồng bộ, đó là lý do tại sao nó sẽ trả về ngay lập tức. Để làm cho nó xếp hàng, bạn cần máy chủ để gửi một tin nhắn trở lại cho khách hàng sau khi mỗi lát được tải lên; sau đó khách hàng có thể quyết định xem nó có cần gửi lát tiếp theo hay thông báo "tải lên hoàn tất" trở lại máy chủ hay không.

Điều này có thể sẽ dễ dàng hơn khi sử dụng XMLHttpRequest (2); nó có hỗ trợ gọi lại tích hợp và cũng được hỗ trợ rộng rãi hơn API WebSocket.

Answer 3

Bạn có thể sử dụng https://github.com/binaryjs/binaryjs hoặc https://github.com/liamks/Delivery.js nếu bạn có thể chạy node.js trên máy chủ.

Answer 4

Để serialize hoạt động này, bạn cần máy chủ để gửi cho bạn một tín hiệu mỗi khi một lát được nhận & bằng văn bản (hoặc một lỗi xảy ra), bằng cách này bạn có thể gửi các miếng tiếp theo để đáp ứng với onmessage sự kiện , khá nhiều như thế này:

function Uploader(url, file) { 
    var fs = new FileSlicer(file); 
    var socket = new WebSocket(url); 

    socket.onopen = function() { 
     socket.send(fs.getNextSlice()); 
    } 
    socket.onmessage = function(ms){ 
     if(ms.data=="ok"){ 
      fs.slices--; 
      if(fs.slices>0) socket.send(fs.getNextSlice()); 
     }else{ 
      // handle the error code here. 
     } 
    } 
} 

Answer 5

sử dụng lao web cho các tập tin lớn chế biến thay vì làm việc đó trong chủ đề chính và tải lên khối dữ liệu tập tin sử dụng file.slice().

Điều này article giúp bạn xử lý các tệp lớn trong công nhân. thay đổi XHR gửi đến Websocket trong chủ đề chính.

//Messages from worker 
function onmessage(blobOrFile) { 
ws.send(blobOrFile); 
} 

//construct file on server side based on blob or chunk information.