如何在 socket.io 中将数据从服务器异步发送到客户端

Question

这里我从 app.js 发出数据到 index.html page.But 我没有得到异步数据。

我在这里尝试下载一个文件，并尝试将下载进度发送到 index.html。但是在 "index.html"，我在下载 [=31] 后获取数据=] 不希望这种情况发生。

如果文件下载了 40%，那么在浏览器中应该显示相同的内容 also.How 我可以实现吗？谁能帮帮我...

我的 app.js :

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var fs = require('fs');
var request = require('request');
var progress = require('request-progress');

var DOWNLOAD_DIR = '/usr/local/';
var file_name = 'jquery.js' 

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express ();
var http = require('http').createServer(app);
var io = require('socket.io')(http);



http.listen(8085, function(){
    console.log('listening on *:8085');
});

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

app.get('/get', function (req, res) {
progress(request('https://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js'), {
    throttle:0,   
    delay: 0       
})
.on('progress', function(state){
    console.log('received size in bytes', state.received);
    console.log('total size in bytes', state.total);
    console.log('percent', state.percent);
io.of('/socket_issue').on('connection', function (socket) {
    console.log("Socket connected :"+socket.id);
 socket.emit('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));
});


})

.pipe(fs.createWriteStream(DOWNLOAD_DIR + file_name))
.on('error', function (err) {
 console.log("error");  
})
.on('close', function (err){
console.log("Download Complete"); 
});

 res.sendfile('views/index.html');

});




// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

我的 index.html :

<html>

<body>
<script src="http://localhost:8085/javascripts/socket.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://localhost:8085/javascripts/bootstrap.js"></script>
<script src="http://localhost:8085/javascripts/bootstrap-progressbar.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://localhost:8085/stylesheets/bootstrap.css" />

    <div id="progressbar"><div>

<script type="text/javascript">
var socket = io('http://localhost:8085/socket_issue');
  socket.on('connect', function(){ console.log('connected to socket'); });
  socket.on('error', function(e){ console.log('error' + e); });
  socket.on('message', function(data){
   console.log(data);


       function progress(percent, $element) {
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
    }
    progress(JSON.parse(data).percent, $('#progressbar'));

  });
  socket.on('disconnect', function(){});
</script>
</body>
</html>

在 index.html（已编辑）

<body onload="timedRefresh(10000);">

<script type="text/javaScript">
    function timedRefresh(timeoutPeriod) {
     setTimeout("window.location.reload(true);",timeoutPeriod);
    }
</script>

Answer 1

您正在服务器上下载一个 200kb 的文件...您的客户端要加载的内容要多得多。例如，仅 jquery-ui 就超过 400 KB。所以服务器可能在客户端有机会连接和监听下载进度之前就完成了文件下载。

附带说明一下，我建议您将 io.of('socket_issue').on... 移到 .on('progress' 事件之外。每次有人请求 /get

时就开始监听 socket.io 连接是没有意义的

如何在 socket.io 中将数据从服务器异步发送到客户端

How do I emit the data asynchronously from server to client in socket.io

asynchronous

node.js

socket.io