VSnake notes: Resumable HTTP file upload

Кто о чем, а вшивый о бане. В продолжение этого поста: возобновляемая закачка файлов на веб-сервер с использованием HTML5 FileAPI + Node.js + Socket.io

я проверил работоспособность предлагаемого решения

net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-resumable-video-uploade-in-node-js

lecaw.ru/index.php/categories/jquery/item/205-kak-sozdat-video-zagruzchik

habrahabr.ru/post/145959

Заодно и код причесал (см.полный листинг в конце поста)

Кому лень читать многабукаф, заявляю сразу — предлагаемое решение вполне работоспособно. Если нужен веб-сервис по надежной, возобновляемой заливке мега(гига)файлов недорого — берите, пользуйтесь.

Остальные читают дальше :)

В результате получилась как бы инструкция по созданию веб-сервиса по заливке файлов практически любого размера на сервер. На самых современных технологиях :)

Для создания сервиса мне понадобится:

виртмашина с Debian testing на борту, это будет сервер;
Node.js;
Socket.io;
текстовый редактор;
браузер с поддержкой HTML5 File API (Google Chrome 19);
файл гигов на 5 и более для тестирования.

Виртмашина с дебианчиком

Со страницы debian.org/devel/debian-installer

забрал образ debian-wheezy-DI-a1-i386-netinst.iso

и поставил из него систему в виртуалбоксе. Выделил 2 ядра и 512 мегабайт оперативки.

Свежепоставленную систему доточил напильником:

nano .bashrc # для рута и своей учетки

shopt -s histappend
shopt -s cmdhist
export PROMPT_COMMAND='history -a'
export HISTFILESIZE=1000
export HISTSIZE=1000
export HISTCONTROL=ignoreboth:erasedups

# репозитории
nano /etc/apt/sources.list

deb http://mirror.yandex.ru/debian/ testing main contrib non-free
deb-src http://mirror.yandex.ru/debian/ testing main contrib non-free
deb http://security.debian.org/ testing/updates main
deb-src http://security.debian.org/ testing/updates main
deb http://mirror.yandex.ru/debian/ testing-proposed-updates contrib non-free main
deb-src http://mirror.yandex.ru/debian/ testing-proposed-updates contrib non-free main

# доустановить пакеты
aptitude update; aptitude safe-upgrade; aptitude full-upgrade
aptitude install linux-headers-$(uname -r) dkms make gcc g++
aptitude install git-core curl build-essential openssl libssl-dev wget

Сервер к приему софта готов.

Node.js

Веб-сервер Node.js ставится из исходников традиционным образом. Я собрал и запустил ноду по инструкции с сайта разработчиков github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

# mkdir -p /root/build/node && cd $_
# git clone https://github.com/joyent/node.git .
# git checkout v0.6.19
# ./configure --openssl-libpath=/usr/lib/ssl
# make
# make test
# make install
# node -v

Хоть и написано «установка ноды через пакетный менеджер», инфы по установке из исходников там достаточно.

Теперь нужно выйти из рута, можно поиграться с нодой, позапускать хелловорд и прочее.

Socket.io

Это будет модуль к Node.js. Установка модуля проста до безобразия

$ mkdir -p ~/node && cd $_
$ npm install socket.io

# после заливки программ на сервер, запустить тут веб-сервер
# node app.js

Типа, всё, сервер готов. Дальше пишем программу.

Код программы

см.в самом низу. Здесь приведу только сниппеты. Еще раз — код не мой а Габриэля Манрика, я его творение только слегка переписал. CSS & HTML вообще не трогал.

Файлов два: один — это HTML для скармливания браузеру; второй — JS код сервера.

Ключевые места программы, приблизительный ход выполнения

// на клиенте
// по щелчку на кнопке «старт» в сокет уходит событие fileMeta с именем и размером файла;
// на событие «чтение файла ридером» вешается обработчик, который отправляет в сокет событие fileData
//с именем файла и куском считанных бинарных данных
var socket = io.connect(); // connect at the same host / port as your website
...
socket.on('nextChunk', onSocketNextChunk);
socket.on('fileProcessed', onSocketFileProcessed);
...
function onClickStartUpload() {
...
  fReader = new FileReader();
...
  fReader.onload = function(evnt) {
   socket.emit('fileData', {'Name' : fileName, 'Data' : evnt.target.result});
  }
  socket.emit('fileMeta', {'Name' : fileName, 'Size' : selectedFile.size});
…

// на сервере, приняв событие fileMeta, код проверяет наличие файла и открывает его на запись;
// открытие файла отправляет в сокет (в браузер) событие nextChunk
// с номером следующего чанка и числом отработанных процентов
var app = require('http').createServer(httpResponder)
 , io = require('socket.io').listen(app)
...
app.listen(8080); // http://servername:8080/
io.sockets.on('connection', onSocketConnect);
...
function onSocketConnect(socket) {
 socket.on( 'fileMeta', function(data) { onSocketFileMeta(data, socket); } );
 socket.on( 'fileData', function(data) { onSocketFileData(data, socket); } );
}
…
function onSocketFileMeta (data, socket) {
...
  var stat = fs.statSync(fullName);
  if(stat.isFile()) {
   fObj.rcvdBytes = stat.size;
...
 fs.open(fullName, 'a', 0644, function(err, fd) { onFileOpen(err, fd, fName, socket); });
…
function getNextChunk(fObj, socket) {
 var pct = (fObj.rcvdBytes / fObj.fSize) * 100;
 var chunkNum = fObj.rcvdBytes / chunkSize;
 socket.emit('nextChunk', { 'ChunkNum' : chunkNum, 'Percent' : pct });

// на клиенте, обработчик события nextChunk считывает из файла следующий чанк данных,
// после чего обработчик события «чтение файла ридером» отправляет в сокет событие fileData
function onSocketNextChunk (data) {
...
 var blob = getNextBlob(selectedFile, nextByte, chunkSize);
 fReader.readAsBinaryString(blob);
…
function getNextBlob(fileObj, startPos, numBytes) {
 var endPos = startPos + Math.min( numBytes, (fileObj.size - startPos) );
 if(fileObj.webkitSlice)
  return fileObj.webkitSlice(startPos, endPos);

// на сервере, приняв событие fileData, код ветвится на три дорожки:
// в приемном буфере еще есть место — запросить следующий чанк;
// буфер полон — сбросить его на диск и запросить следующий чанк;
// все данные уже здесь — завершить запись в файл, переместить его в репозиторий и отправить уведомление браузеру
function onSocketFileData(data, socket) {
...
 if(fObj.rcvdBytes == fObj.fSize) {
  fs.write(fObj.fHandle, fObj.bytesBuf, null, 'Binary', function(err, written, buffer) {
   onFileWriteDone(err, written, buffer, fName, socket);
  });
 }
 else if(fObj.bytesBuf.length > bufMaxSize) {
  fs.write(fObj.fHandle, fObj.bytesBuf, null, 'Binary', function(err, written, buffer) {
   onFileWriteBuffer(err, written, buffer, fName, socket);
  });
 }
 else {
  getNextChunk(fObj, socket);
 }
…
function onFileWriteBuffer(err, written, buffer, fName, socket) {
 fObj.bytesBuf = '';
...
 getNextChunk(fObj, socket);
}
…
function onFileWriteDone(err, written, buffer, fName, socket) {
...
 fs.close(fObj.fHandle, function(err) {
  fObj.fHandle = '';
...
 });
...
 util.pump(inp, out, function() {
  fs.unlink(tempName, function () {
   socket.emit('fileProcessed', {'Preview' : 'thumbnail.jpg'});
  });
 });
}
… и так далее

Все на асинхронных событиях и коллбеках, довольно прикольно.

Запуск и тестирование

После написания файлов надо залить их на сервер

rsync -av "/home/valik/Desktop/node/" "node:node/"

на сервере запустить ноду

$ cd node; mkdir Repo; mkdir Temp; node app.js

После успешного запуска я провел тестирование на предмет — как оно в целом. Выяснилось, что в целом — неплохо. За исключением того, что очень долго выполняется финальная стадия, а именно перенос закачанного файла из папки Temp в папку Repo. Этот кусок кода надо переделать.

В общем, файл размером 8621 мегабайт был передан успешно, со средней скоростью 3.5 мегабайта в секунду. Этот же файл через rsync залился со скоростью 25 мб/сек. Откуда берется такое замедление — неясно, задача почти не дает нагрузки на ресурсы компа.

Браузер (Chrome 19) сожрал 1 гигабайт вирт.памяти, 128 реальной оперативки, 70% процессора (одного ядра). Утечек памяти нет.

Node.js сожрала 140 мегабайт вирт.памяти, 90 реальной, 40% процессора (одного ядра). Утечек памяти нет. В сумме, четырехядерный процессор был занят на 15%.

Файл передавался чанками по 3 мегабайта; серверный буфер 10 мегабайт, после его заполнения буфер сбрасывается на диск.

Финальный сброс буферов и перенос файла из временной папки в репозиторий занял около 3-х минут.

Также я проверил возобновление прерванной закачки. Работает как и ожидалось — ни падение браузера, ни падение сервера не мешает продолжить закачку с того места, где остановились в прошлый раз.

Вывод.

Технология рабочая, рекомендую к использованию.

Полный код аплоадера

index.html

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>File Uploader</title>
 <script src="/socket.io/socket.io.js"></script>

<script type="text/javascript" charset="utf-8">

window.addEventListener("load", onDocReady);

var socket = io.connect(); // connect at the same host / port as your website
var fReader = '';         // FileReader object
var fileName = '';        // selected file name
var selectedFile = '';     // file object
var mbBytes = 1048576;     // bytes in megabyte
var chunkSize = 3 * mbBytes; // chunk size in bytes

socket.on('nextChunk', onSocketNextChunk);
socket.on('fileProcessed', onSocketFileProcessed);

function onDocReady() {
 if(window.File && window.FileReader) { //These are the necessary HTML5 objects the we are going to use
  document.getElementById('UploadButton').addEventListener('click', onClickStartUpload);
  document.getElementById('FileBox').addEventListener('change', onFileChosen);
 }
 else {
  document.getElementById('UploadArea').innerHTML = "Your Browser Doesn't Support The File API. Please Update Your Browser";
 }
} // function onDocReady()


function onClickStartUpload() {
 if(selectedFile !== '') {
  fReader = new FileReader();
  fileName = document.getElementById('NameBox').value;
  htmlUploading();
  fReader.onload = function(evnt) {
   socket.emit('fileData', {'Name' : fileName, 'Data' : evnt.target.result});
  }
  socket.emit('fileMeta', {'Name' : fileName, 'Size' : selectedFile.size});
 }
 else {
  alert("Please Select A File");
 }
} // function onClickStartUpload()


function onFileChosen(evnt) {
 selectedFile = evnt.target.files[0];
 document.getElementById('NameBox').value = selectedFile.name;
} // function onFileChosen(evnt)


function onSocketNextChunk (data) { // socket.emit('nextChunk', { 'ChunkNum' : chunkNum, 'Percent' : pct });
 var pct = data['Percent'];
 var chunkNum = data['ChunkNum']; // chunk number (0 <= chunkNum < n; n = fSize/chunkSize)
 htmlUpdatePct(pct);
 var nextByte = chunkNum * chunkSize; //The Next Blocks Starting Position
 var blob = getNextBlob(selectedFile, nextByte, chunkSize);
 fReader.readAsBinaryString(blob);
} // function onSocketNextChunk (data)


function getNextBlob(fileObj, startPos, numBytes) {
 var endPos = startPos + Math.min( numBytes, (fileObj.size - startPos) );
 if(fileObj.webkitSlice)
  return fileObj.webkitSlice(startPos, endPos);
 else
  return fileObj.mozSlice(startPos, endPos);
} // function getNextBlob(fileObj, startPos, numBytes)


function htmlUploading() {
 var htmlContent = "<span id='NameArea'>Uploading " + selectedFile.name + " as " + fileName + "</span>";
 htmlContent += '<div id="ProgressContainer"><div id="ProgressBar"></div></div><span id="percent">0%</span>';
 htmlContent += "<span id='Uploaded'> - <span id='MB'>0</span>/" + Math.round(selectedFile.size / mbBytes) + "MB</span>";
 document.getElementById('UploadArea').innerHTML = htmlContent;
} // function htmlUploading()


function htmlUpdatePct(percent) {
 document.getElementById('ProgressBar').style.width = percent + '%';
 document.getElementById('percent').innerHTML = (Math.round(percent * 100) / 100) + '%';
 var mbDone = Math.round(((percent / 100.0) * selectedFile.size) / mbBytes);
 document.getElementById('MB').innerHTML = mbDone;
} // function htmlUpdatePct(percent)


function onSocketFileProcessed (data) { // socket.emit('fileProcessed', {'Preview' : 'thumbnail.jpg'});
 var htmlContent = "File Successfully Uploaded!"
 htmlContent += "<img id='Thumb' src='" + data['Preview'] + "' alt='" + fileName + "'><br>";
 htmlContent += "<button type='button' name='Upload' value='' id='Restart' class='Button'>Upload Another</button>";
 document.getElementById('UploadArea').innerHTML = htmlContent;
 document.getElementById('Restart').addEventListener('click', onRefresh);
 document.getElementById('UploadBox').style.width = '270px';
 document.getElementById('UploadBox').style.height = '270px';
 document.getElementById('UploadBox').style.textAlign = 'center';
 document.getElementById('Restart').style.left = '20px';
} // function onSocketFileProcessed (data)


function onRefresh() {
 location.reload(true);
}

</script>

<style type="text/css" media="screen">
body {
 background: #F9F9F9;
 font-family: Calibri;
 font-size: 18px;
}

h2 {
 font-size: 40px;
 margin-top: 6px;
 margin-bottom: 10px;
}

#Thumb {
 max-width: 230px;
 max-height: 130px;
}

#ProgressContainer {
 width: 396px;
 height: 36px;
 background: #F8F8F8;
 margin-top: 14px;
 border: 1px solid #E8E8E8;
 border-top: 1px solid #D8D8D8;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 padding: 2px;
}

#ProgressBar {
 height: 100%;
 width: 0%;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 background: -webkit-gradient( linear, left top, left bottom, from(#a50aad), color-stop(0.50, #6b0d6b), to(#4a074a));
}

#UploadBox {
 background: #FFF;
 padding: 20px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -200px;
 margin-top: -150px;
 height: 200px;
 width: 400px;
 border: 1px solid #DFDFDF;

 -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
 box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);

 -webkit-border-radius: 11px;
 -moz-border-radius: 11px;
 border-radius: 11px;
}

button.Button {
 font-size: 18px;
 color: #ffffff;
 padding: 8px 30px;
 background: -webkit-gradient( linear, left top, left bottom, from(#a50aad), color-stop(0.50, #6b0d6b), to(#4a074a));

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 border: 1px solid #5b139e;

 -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,0.4);
 -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,0.4);
 box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,0.4);
 text-shadow: 0px -1px 0px rgba(000,000,000,0.1), 0px 1px 0px rgba(145,035,145,1);
 position: absolute;
 bottom: 20px;
 right: 20px;
 cursor: pointer;
}

button.Button:hover {
 background: -webkit-gradient( linear, left top, left bottom, from(#a50aad), color-stop(0.80, #6b0d6b), to(#a50aad));
 color: #D3D3D3;
}

button.Button:active {
 background: -webkit-gradient( linear, left top, left bottom, from(#4a074a), color-stop(0.80, #6b0d6b), to(#a50aad));
}

input {
 margin-top: 10px;
 margin-bottom: 8px;
}

input[type=text] {
 border: 1px solid #CDCDCD;
 border-top: 1px solid #676767;

 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 font-size: 18px;
 padding: 2px;
 width: 300px;
 margin-left: 10px;
}

</style>
</head>
<body>
 <div id="UploadBox">
  <h2>Chunked File Uploader</h2>
  <span id='UploadArea'>
   <label for="FileBox">Choose A File: </label><input type="file" id="FileBox"><br>
   <label for="NameBox">Name: </label><input type="text" id="NameBox"><br>
   <button type='button' id='UploadButton' class='Button'>Upload</button>
  </span>
 </div>
</body>
</html>

app.js

//# -*- mode: javascript; coding: utf-8 -*-

var tempDir = 'Temp';
var targetDir = 'Repo';          // mkdir Temp; mkdir Repo; node app.js
var mbBytes = 1048576;           // bytes in megabyte
var chunkSize = 3 * mbBytes;     // chunk size in bytes
var bufMaxSize = 10485760;       // 10 MB

var app = require('http').createServer(httpResponder)
 , io = require('socket.io').listen(app)
 , fs = require('fs')
 , exec = require('child_process').exec
 , util = require('util')
 , filesList = {};

app.listen(8080); // http://servername:8080/
io.sockets.on('connection', onSocketConnect);


function httpResponder(req, res) {
 fs.readFile(__dirname + '/index.html',
  function (err, data) {
   if (err) {
    res.writeHead(500);
    return res.end('Error loading index.html');
   }
   res.writeHead(200);
   res.end(data);
  }
 );
} // function httpResponder(req, res)


function onSocketConnect(socket) {
 socket.on( 'fileMeta', function(data) { onSocketFileMeta(data, socket); } );
 socket.on( 'fileData', function(data) { onSocketFileData(data, socket); } );
} // function onSocketConnect(socket)


function onSocketFileMeta (data, socket) { // start recieve file
 // socket.emit('fileMeta', {'Name' : fileName, 'Size' : selectedFile.size});
 var fName = data['Name'], fSize = data['Size'];
 var fullName = tempDir + '/' + fName;
 var fObj = {  // Create a new Entry in The Files List
  fSize     : fSize, // file size
  bytesBuf  : '',    // data buffer, 10 MB max
  rcvdBytes : 0,     // count of recieved bytes
  fHandle   : ''     // file handle
 }

 try { // if file exist already
  var stat = fs.statSync(fullName);
  if(stat.isFile()) {
   fObj.rcvdBytes = stat.size;
  }
 }
 catch(err) { // It's a New File
  console.log(err);
 }

 filesList[fName] = fObj;
 fs.open(fullName, 'a', 0644, function(err, fd) { onFileOpen(err, fd, fName, socket); });
} // function onSocketFileMeta (data, socket)


function onSocketFileData(data, socket) { // socket.emit('fileData', {'Name' : fileName, 'Data' : evnt.target.result});
 var fName = data['Name'];
 var blob = data['Data']

 var fObj = filesList[fName];
 fObj.rcvdBytes += blob.length;
 fObj.bytesBuf += blob;
 filesList[fName] = fObj;

 if(fObj.rcvdBytes == fObj.fSize) { //If File is Fully Uploaded
  fs.write(fObj.fHandle, fObj.bytesBuf, null, 'Binary', function(err, written, buffer) {
   onFileWriteDone(err, written, buffer, fName, socket);
  });
 } // finish

 else if(fObj.bytesBuf.length > bufMaxSize) { //If the Data Buffer reaches 10MB
  fs.write(fObj.fHandle, fObj.bytesBuf, null, 'Binary', function(err, written, buffer) {
   onFileWriteBuffer(err, written, buffer, fName, socket);
  });
 }
 else {
  getNextChunk(fObj, socket);
 }
} // function onSocketFileData(data, socket)


function getNextChunk(fObj, socket) {
 var pct = (fObj.rcvdBytes / fObj.fSize) * 100;
 var chunkNum = fObj.rcvdBytes / chunkSize;
 socket.emit('nextChunk', { 'ChunkNum' : chunkNum, 'Percent' : pct });
} // function getNextChunk(fObj, socket)


function onFileOpen(err, fd, fName, socket) {
 var fObj = filesList[fName];
 if(err) {
  console.log(err);
 }
 else {
  fObj.fHandle = fd; // We store the file handler so we can write to it later
  filesList[fName] = fObj;
  getNextChunk(fObj, socket);
 }
} // function onFileOpen(err, fd, fName, socket)


function onFileWriteBuffer(err, written, buffer, fName, socket) { // buffer writed
 var fObj = filesList[fName];
 fObj.bytesBuf = ''; // Reset The Buffer
 filesList[fName] = fObj;
 getNextChunk(fObj, socket);
} // function onFileWriteBuffer(err, written, buffer, fName, socket)


function onFileWriteDone(err, written, buffer, fName, socket) {
 var fObj = filesList[fName];
 fs.close(fObj.fHandle, function(err) {
  fObj.fHandle = '';
  filesList[fName] = fObj;
 });
 var tempName = tempDir + '/' + fName;
 var inp = fs.createReadStream(tempName);
 var out = fs.createWriteStream(targetDir + '/' + fName);
 util.pump(inp, out, function() {
  fs.unlink(tempName, function () {
   socket.emit('fileProcessed', {'Preview' : 'thumbnail.jpg'});
//   exec("ffmpeg -i Video/" + Name  + " -ss 01:30 -r 1 -an -vframes 1 -f mjpeg Video/" + Name  + ".jpg", function(err){
//    socket.emit('Done', {'Image' : 'Video/' + Name + '.jpg'});
//   });
  });
 });
} // function onFileWriteDone(err, written, buffer, fName, socket)

Tools

VSnake notes

2012-06-29

Resumable HTTP file upload

Виртмашина с дебианчиком

Node.js

Socket.io

Код программы

Запуск и тестирование

Полный код аплоадера

Комментариев нет:

Отправить комментарий

Архив блога

Ярлыки

Обо мне

Links