如何从后端通知前端？

Question

我正在使用multer进行文件上传。在服务器端，我有以下代码：

stream.on('finish', () => {                                                                              
  console.log('finished')                                                                                
  next()
})

如何通过哪个命令通知前端“完成”事件是最佳方式？我需要知道这一点，以便显示加载条。

- konyv12

---

这就是Websockets的作用。服务器可以向客户端发送数据，反之亦然。请查看socket.io。服务器：socket.emit("upload finished")，客户端：socket.on("upload finished", function...)。 - Jeremy Thille

真棒！谢谢你。 - konyv12

我已将其添加为答案，如果您能验证一下就感激不尽了 :) - Jeremy Thille

Answer 1

那就要用到Websockets了。服务器可以向客户端发送数据，反之亦然。请查看socket.io。

服务器： socket.emit("upload finished") 客户端： socket.on("upload finished", function...)

- Jeremy Thille

Answer 2

虽然Jeremy Thille的回答很好，但要注意广播事件给所有人。

Socket.emit()仅将消息广播到所有连接的客户端。

因此，您需要存储上传者的客户端ID，并仅向该客户端而不是所有客户端通知进度。 请参考这个。

- vinoth h

---

你说得对，所有的内容都在文档中列出了（这也是我提供链接的原因）。 - Jeremy Thille

Answer 3

你可以使用socket来进行此类通信。socket.io是用于Web Socket的Node软件包。在服务器端，您需要

socket.emit('done')

在客户端，您可以附加到 "emit" 以接收新数据，而不是在服务器端。

socket.on('done', function (data) {
    // Do something with data
}); 

- Ivan Mladenov

Answer 4

嗯，我知道我晚了5年7个月，但我仍然想分享我的意见。 Socket是一个非常好的方法，但另一种方式也可以使用SSE（服务器发送事件）通过HTTP自动通知前端，但您也可以仅使用文本消息通知前端。

对于前端：

1. 首先，您必须创建eventsource对象。

let sse = new EventSource(
       "URL for backend",
        { withCredentials: true }
      )

这里的凭证是用于传递cookie的。

2.现在添加事件监听器以从后端获取结果。

see.onmessage = (e)=>{
let data = JSON.parse(e.data)
//now do whatever you want with the data
}

后端开发：

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
const PORT = 5000;
let clients = [];

const event = (req, res) => {
 
  const headers = {
    'Content-Type': 'text/event-stream',
    'Connection': 'keep-alive',
    'Cache-Control': 'no-cache',
  }
  
  res.writeHead(200, headers)
  let message = { event_name: 'ONGOING' }

  const data = `data: ${JSON.stringify(facts)}\n\n`

  res.write(data)
  const clientId = Date.now()

  const newClient: Client = {
    id: clientId,
    response: res,
  }

  clients.push(newClient)

  req.on('close', () => {
    console.log(`${clientId} Connection closed`)
    clients = clients.filter((clients: Client) => clients.id !== clientId)
  })
};
const notifyEvent = ()=>{
 let newMessage = { event_name: 'FINISHED' }

  const data = `data: ${JSON.stringify(newMessage)}\n\n`
  
  // Send a message to each client
  clients.forEach((client) => client.response.write(data))
}
//Here goes your part
stream.on('finish', () => {                                                                              
  console.log('finished')
  return notifyEvent()                                                                         
  next()
})
app.get("/event", event);

app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
});

这就是整个内容了。 我附上了一个链接，帮助我理解SSE。 https://www.digitalocean.com/community/tutorials/nodejs-server-sent-events-build-realtime-app

- Sulagna Ghosh