2

私は独学で Ajax を学んでいる最中でした。このレッスンでは、単純なファイル アップロード フォームをローカルで作成する必要がありました。Windows 7でXAMPPを実行しており、仮想ホストがhttp://test. この本の解決策は、ノードと、フォームデータを解析することになっていた「マルチパート」と呼ばれるほとんど知られていないパッケージを使用することでしたが、私にはうまくいきませんでした。

仕事に最適なパッケージを探しましたが、それは手ごわいようです。それはトリックを行い、私のファイルはローカルにアップロードされ、Ajax を介してすべての詳細を取得します。しかし、progress 要素でアップロードの進行状況を表示する本からの単純な JS コードではうまくいきません。SO、私は周りを見回し、人々はsocket.ioを使用して進行状況情報をクライアントページに送信することを提案しました.

私はローカルで手ごわい作業をすることに成功し、socket.io をいくつかの基本的なチュートリアルで動作させることができました。今、私は一生、彼らを一緒に働かせることはできません. 手ごわいがそのことをしている間、socket.ioから私のページに送り返される単純なコンソールログメッセージを取得することさえできません。

まず、ファイル アップロード フォーム自体を次に示します。upload.html ページ内のスクリプト:

document.getElementById("submit").onclick = handleButtonPress;
var httpRequest;

function handleResponse() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
        document.getElementById("results").innerHTML = httpRequest.responseText;
    }
}

function handleButtonPress(e) {
    e.preventDefault();

    var form = document.getElementById("myform");
    var formData = new FormData(form);

    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = handleResponse;
    httpRequest.open("POST", form.action);
    httpRequest.send(formData);
}

そして、これが対応するノードスクリプトです (重要な部分は form.on('progress')

var http = require('http'),
    util = require('util'),
    formidable = require('formidable');

http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    var form = new formidable.IncomingForm(),
        files = [],
        fields = [];

    form.uploadDir = './files/';
    form.keepExtensions = true;

    form
      .on('progress', function(bytesReceived, bytesExpected) {
        console.log('Progress so far: '+(bytesReceived / bytesExpected * 100).toFixed(0)+"%");
      })
      .on('file', function(name, file) {
        files.push([name, file]);
      })
      .on('error', function(err) {
        console.log('ERROR!');
        res.end();
      })
      .on('end', function() {
        console.log('-> upload done');
        res.writeHead(200, "OK", {
            "Content-Type": "text/html", "Access-Control-Allow-Origin": "http://test"
        });
        res.end('received files: '+util.inspect(files));
      });
    form.parse(req);
  } else {
    res.writeHead(404, {'content-type': 'text/plain'});
    res.end('404');
  }
  return;
}).listen(8080);

console.log('listening');

OK、すべてが期待どおりに機能するようにします。これは、前の 2 つに注入して進行状況情報をページに送り返すことを望んでいる最も単純な socket.io スクリプトです。クライアント側のコードは次のとおりです。

var socket = io.connect('http://test:8080');

socket.on('news', function(data){
    console.log('server sent news:', data);
});

サーバー側のノード スクリプトは次のとおりです。

var http = require('http'),
    fs = require('fs');

var server = http.createServer(function(req, res) {
    fs.createReadStream('./socket.html').pipe(res);
});

var io = require('socket.io').listen(server);

io.sockets.on('connection', function(socket) {
    socket.emit('news', {hello: "world"});
});

server.listen(8080);

したがって、これはそれ自体でうまく機能しますが、socket.ioコードをフォーム内に配置しようとすると問題が発生します..リモートで意味のある場所に配置しようとしましたが、非同期モードfs.readFileも試しました、しかし、クライアントに何も送り返さないだけです-その間、ファイルのアップロード部分は引き続き正常に機能します. 2 つのパッケージ間である種のハンドシェイクを確立する必要がありますか? ここで私を助けてください。私はフロントエンドの人なので、このバックエンドのことにはあまり詳しくありません。今はこれを脇に置いて、他のレッスンに移ります。

4

1 に答える 1