使用socket.io进行异步/等待操作

Question

这段代码发送第一个 emit 到客户端，客户端接收到消息 "Job is starting..."，这部分没有问题。

然后代码启动了 Puppeteer 并生成截图 example.png，也没有问题。

但是第二个 emit 没有被触发，也没有发送给客户端。

在服务器的 console.log 中我得到了以下输出：

• job is starting
• CAPTURE FINISHED
• job is finished

这部分也没有问题。

发生了什么？为什么第二个 emit 没有被触发？

const express = require('express');
const puppeteer = require('puppeteer')
const app = express();
const server = app.listen(3000);

app.set('view engine', 'ejs');
var io = require('socket.io').listen(server);

app.get('/', function (req, res, next) {
  res.render('index');
});

app.get('/scan', function (req, res, next) {
  console.log('job is starting');

  io.sockets.on('connection', function (socket) {
    socket.emit('messageStart', 'Job is starting...');
  });

  (async () => {
    const browser = await puppeteer.launch({headless:false});
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({ path: 'example.png' });
    await browser.close();
    console.log('CAPTURE FINISHED');
  })().then(()=>{
      console.log('job is finished');

      io.sockets.on('connection', function (socket) {
          socket.emit('messageEnd', 'Job is done!');
        });
    });
  res.render('scan');
});

- Pedro

Answer 1

您需要先监听一次连接，然后向套接字发送两次信息。

const scanner = async () => {
  const browser = await puppeteer.launch({headless:false});
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
  console.log('CAPTURE FINISHED');
}

app.get('/scan', async function (req, res, next) {
  // emit to all clients on start
  console.log('job is starting');
  io.emit('messageStart', 'Job is starting...');

  // do the actual stuff
  await scanner();

  // emit to all clients on finish
  console.log('job is finished');
  io.emit('messageEnd', 'Job is done!');

  res.render('scan');
});

- Md. Abu Taher

---

谢谢您，先生，您的回答帮了我很多。但是它还没有完全起作用。我在io.sockets.on('connection', function (socket) {之前添加了代码，并且现在它可以工作了...我还在扫描器函数中添加了io.sockets.on('connection', function (socket) { io.emit('messageDoing', 'Doing the Job ...'); });来进行调试，我在客户端上看到了3个正确时间的emit。再次感谢您节省了我的时间。我将在下面发布完整的代码。希望它能帮助其他人。 - Pedro

Answer 2

这是基于Md. Abu Taher的代码的完整代码。

const scanner = async () => {
    // emit this message when the scan really starts
    io.sockets.on('connection', function (socket) {
        io.emit('messageDoing', 'Doing the Job ...');
    });
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({ path: 'example.png' });
    await browser.close();
    console.log('CAPTURE FINISHED');
};

app.get('/scan', async function (req, res, next) {
    // emit to all clients on start
    console.log('job is starting');
    io.sockets.on('connection', function (socket) {
        io.emit('messageStart', 'Job is starting...');
    });

    // do the actual stuff
    await scanner();

    // emit to all clients on finish
    console.log('job is finished');
    io.sockets.on('connection', function (socket) {
        io.emit('messageEnd', 'Job is done...');
    });
    res.render('scan')
});

- Pedro

---

你每次都在添加连接事件，这样会导致长期的问题。尝试将它们移除。 - Md. Abu Taher

我理解了，但是当我移除io.sockets.on('connection',时，没有任何东西被发送。工作已完成，但客户端接收不到任何内容。 - Pedro