如何立即收聽來自客戶端（vue）的服務器（快遞）發送的事件

Question

我正在嘗試從我的 vue js 客戶端監聽 Express 服務器發送的事件。 一發出就想聽。 但是直到整個過程完成后才可以。

我的 Express 控制器代碼是：

exports.getFruits = (req, res, next) => {
   const fruits = ["mango", "jackfruit", "banana", ...........];
   for(let i = 0; i < fruits.length; i++){
      res.emit('fruit', fruits[i]);
   }
};

從我的 vue 客戶端，我提出了這個請求

axios.get("localhost:3000/get-fruits")
.then(res => {
   console.log(res.data);
})
.catch(err => {
   console.log(err);
});

如何在此處收聽服務器立即發送的 Emit？ 任何幫助將不勝感激。

Answer 1

這是node.js預期行為，任何同步循環都將始終阻塞線程，循環完成后它將處理其他事件。

請參閱事件循環以獲取更多信息，但要了解重點：

有5個階段

 ┌───────────────────────────┐ ┌─>│ timers │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ │ │ pending callbacks │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ │ │ idle, prepare │ │ └─────────────┬─────────────┘ ┌───────────────┐ │ ┌─────────────┴─────────────┐ │ incoming: │ │ │ poll │<─────┤ connections, │ │ └─────────────┬─────────────┘ │ data, etc. │ │ ┌─────────────┴─────────────┐ └───────────────┘ │ │ check │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ └──┤ close callbacks │ └───────────────────────────┘

現在poll是執行同步代碼的地方，而pending callbacks的回調是處理您的回調的地方。 因此，當階段移動到poll它已經檢查了所有回調和 async/libuv 內容。 所以你的for loop就在這里，現在直到它完全執行它不會進入事件循環的下一個階段並返回到pending callbacks階段。

因此，在循環完成后，它將進入其他階段，並會看到那里有多個 unservices 回調（您的事件），並且它將一一處理。 希望你理解這個概念。

您可以做的一件事是，您可以分叉另一個進程來為您的事件提供服務並使用process.send而不是事件發送fruits 。 然后該過程將立即為事件處理程序提供服務。