使用node.js,node-formidable和socket.io将上载进度更新发送到客户端

时间:2016-06-10 09:39:39

标签: javascript node.js file-upload socket.io formidable

我的代码显示了一个简单的上传表单(node-formidablenode.js)。我正在使用socket.io更新客户端的当前上传文件进度。 我的问题是我目前向每个客户端发送进度更新。例如,如果我使用clientA开始上传,然后使用clientB连接到网站,clientB将看到完全相同的进度条客户端A。通常, clientA和clientB应该是不同的,具有各自的进度条,仅与其各自的上传链接。

这是我的app.js文件

// Required modules
var formidable = require('formidable'),
    http = require('http'),
    util = require('util'),
    fs = require('fs-extra');

// Path to save file, server side
var savePath = "./uploadedFiles/";

// Loading index.html
var server = http.createServer(function(req, res) {
    // Form uploading Process code
    //Upload route
    if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
        // creates a new incoming form. 
        var form = new formidable.IncomingForm();

        // set the path to save the uploaded file on server
        form.uploadDir = savePath;

        // updating the progress of the upload
        form.on('progress', function(bytesReceived, bytesExpected) {
            io.sockets.in('sessionId').emit('uploadProgress', (bytesReceived * 100) / bytesExpected);
        });

        // parse a file upload
        form.parse(req, function (err, fields, files) {
            res.writeHead(200, { 'content-type': 'text/plain' });
            res.write('Upload received :\n');
            res.end(util.inspect({ fields: fields, files: files }));
        });
        form.on('end', function (fields, files) {
            /* Temporary location of our uploaded file */
            var temp_path = this.openedFiles[0].path;
            /* The file name of the uploaded file */
            var file_name = this.openedFiles[0].name;
            /* Files are nammed correctly */
            fs.rename(temp_path, savePath + file_name, function(err) {
                if ( err ) console.log('ERROR: ' + err);
            });
        });
        return;
    }

    fs.readFile('./index.html', 'utf-8', function(error, content) {
        res.writeHead(200, {"Content-Type": "text/html"});
        res.end(content);
    });
});

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

io.on('connection', function (socket) {
  socket.join("sessionId");
});

server.listen(8080);

这是我的index.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Socket.io</title>
    </head>

    <body>
        <h1>Test d'upload</h1>

        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io.connect('http://localhost:8080');
            socket.on('uploadProgress' , function (progress){
                document.getElementById("currentProgress").value = progress;
            });
        </script>

        <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="upload" multiple="multiple"><br>
        <input type="submit" value="Upload">
        </form>

        <p><progress id="currentProgress" value="0" max="100"></progress></p>
    </body>
</html>

我没有比这更多的代码。我是node.js和socket.io的新手,所以我不确定它们之间以及客户端和服务器之间的交互。

如何更改我的代码以仅更新正确的客户端?

无论如何,谢谢你的时间。

1 个答案:

答案 0 :(得分:1)

一个建议 有一个基本的方法

socketIO.sockets.socket(this.socketid).emit(<event>, dataObj);

如果你的函数在你的套接字代码中......否则我会经常做这样的事情

connection.query("select socketid from websocket_sessions  where user_id=" + data.form.user_id, function(err, users) {
  socketIO.sockets.socket(users[0].socketid).emit(<event>, dataObj);
});

我总是在更新或