Question

搜索了SO和google的深度之后，我碰到了一堵墙。我不能为我的生活弄清楚套接字如何/为什么没有捕获我通过表单上传的文件，它只是在连接后停止。当我检查控制台时，我只看到表单提交确认，然后单击确认对话框。我确定这是一个相当简单的解决方案，所以如果我让它变得比需要的更复杂，我会道歉。

服务器

var express = require('express');
var formidable = require('formidable');
var app = express();
var http = require('http');
var httpServer = http.Server(app);
var io = require('socket.io')(httpServer);
var SocketIOFile = require('socket.io-file');
var dialog = require('dialog');
var moment = require('moment');

app.use(express.static('public'));
app.use(express.static(__dirname + '/index.js'));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/form.html');
});

app.post('/', function(req, res) {
  var form = new formidable.IncomingForm();
  form.parse(req);
  form.on('fileBegin', function(name, file) {
    file.path = __dirname + '/' + file.name;
  });
  form.on('file', function(name, file) {
    console.log('Uploaded ' + file.name);
  });

  res.sendFile(__dirname + '/form.html');
  dialog.info('File submitted! It may take a while to see your completed task reflected in Zendesk.',
    function(exitCode) {
      if (exitCode == 0) console.log('User clicked OK');
    });
});

app.get('/client.js', function(req, res) {
  res.sendFile(__dirname + '/client.js');
});
app.get('/socket.io.js', function(req, res) {
  res.sendFile(__dirname + '/node_modules/socket.io-client/dist/socket.io.js');
});
app.get('/socket.io-file-client.js', function(req, res) {
  res.sendFile(__dirname + '/node_modules/socket.io-file-client/socket.io-file-client.js');
});

io.on('connection', function(socket) {
  console.log('Socket connected.');

  var uploader = new SocketIOFile(socket, {
    uploadDir: 'data',
    accepts: ['text/csv'],
    rename: moment().toISOString()
  });

  uploader.on('start', function(fileInfo) {
    console.log('Start uploading');
    console.log(fileInfo);
  });
  uploader.on('stream', function(fileInfo) {
    console.log(`${fileInfo.wrote} / ${fileInfo.size} byte(s)`);
  });
  uploader.on('complete', function(fileInfo) {
    console.log('Upload Complete.');
    console.log(fileInfo);
  });
  uploader.on('error', function(err) {
    console.log('Error!', err);
  });
  uploader.on('abort', function(fileInfo) {
    console.log('Aborted: ', fileInfo);
  });
  io.emit('sending file', uploader);
});

httpServer.listen(3000, function() {
  console.log("Server listening on localhost:3000");
});

客户端

var socket = connect('http://localhost:3000');
var uploader = new SocketIOFileClient(socket);
var form = document.getElementById('form');

uploader.on('start', function(fileInfo) {
  console.log('Start uploading', fileInfo);
});
uploader.on('stream', function(fileInfo) {
  console.log('Streaming... sent ' + fileInfo.sent + ' bytes.');
});
uploader.on('complete', function(fileInfo) {
  console.log('Upload Complete', fileInfo);
});
uploader.on('error', function(err) {
  console.log('Error!', err);
});
uploader.on('abort', function(fileInfo) {
  console.log('Aborted: ', fileInfo);
});


form.onsubmit = function(ev) {
  ev.preventDefault();

  // send file element to upload
  var fileEl = document.getElementById('file');
  // or just pass it directly as an object
  var uploadIds = uploader.upload(fileEl.files);

};

HTML

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Zendesk Ticket Manager</title>

</head>

<body>
  <h1>Upload your CSV below</h1>
  <h2>Don't worry about the size of your file. We'll take care of that!</h2>
  <hr>
  <form action="/" method="post" enctype="multipart/form-data" id="form">
    <!-- onsubmit="onsubmit()" should be added as another tag above -->
    <!-- onsubmit="sendFile()" -->
    <fieldset>
      <label for="file"></label>
      <span>Please select a csv file: </span>
      <input type="file" id="file" name="file" placeholder="Please select a csv file" required/>
      <br/>
      <span>What should we do with the file? </span>
      <select>
              <option value="delete">Delete Tickets</option>
              <option value="update">Update Tickets</option>
              <option value="create">Create Tickets</option>
      </select>
      <br/>
      <input type="submit" value="Upload File" />
    </fieldset>
  </form>

  <script src="/client.js"></script>
  <script>
  var uploader = io();
  </script>

</body>

</html>

Answer 1

通过将emit函数放在uploader.on('complete'...)内而不是整个过程之外来解决。

Socketi在nodejs中连接后不发送文件

1 个答案: