資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 JavaScript 中接收伺服器傳送的事件通知？
伺服器傳送事件是一種伺服器和客戶端之間進行單向通訊的方式。當我們只需要從伺服器向客戶端傳送資料，而不需要從客戶端向伺服器傳送資料時，可以使用伺服器傳送事件。
我們可以透過建立客戶端和伺服器之間的連線來使用伺服器傳送事件。在這裡，伺服器傳送資料，客戶端接收資料並處理資料以顯示在網頁上。伺服器可以是任何東西，例如 Node、PHP 或 Ruby 應用程式。
因此，當伺服器傳送資料時，客戶端 JavaScript 上會觸發“message”事件，並且可以透過事件監聽器處理資料。
以下是一個示例，演示瞭如何透過伺服器傳送事件接收事件通知。
示例
步驟 1 − 首先，我們需要從客戶端向伺服器傳送請求以建立客戶端和伺服器之間的連線。
步驟 2 − 建立一個 index.html 檔案。在 <script> 標籤中，使用“EventSource”建構函式初始化新的 eventSource 物件。
const source = new EventSource('URL');
在上述語法中，URL 是伺服器的 API 端點，我們必須請求 JavaScript 建立連線。
步驟 3 − 為“message”事件新增事件監聽器。因此，每當伺服器向客戶端傳送訊息時，事件監聽器的回撥函式都可以處理訊息資料。
步驟 4 − 將以下程式碼新增到 index.html 檔案中。
<html>
<body>
<h2>Using the <i> Server-sent events </i> for unidirectional communication in JavaScript.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
const source = new EventSource('https://:5000/subscribe');
source.addEventListener('message', message => {
output.innerHTML += "Updated message is: " + message.data + "<br>";
});
</script>
</body>
</html>
步驟 5 − 現在，我們需要建立一個 Node 應用程式用作伺服器。在專案目錄中執行以下命令以建立一個新的 Node 應用程式。
npm init -y
步驟 6 − 接下來，執行以下命令安裝“express”和“cors”NPM 包。“express”用於構建伺服器，“cors”用於允許訪問所有來源。
npm i cors express
步驟 7 − 使用 express 初始化應用程式伺服器，並確保應用程式使用 cors。
步驟 8 − 建立一個“subscribe”API 端點，該端點可以呼叫“subscribeClient()”函式。
步驟 8.1 − subScribeClient() 函式有兩個引數。第一個是請求，第二個是響應。
步驟 8.2 − 建立標頭並將它們新增到函式的響應中。
步驟 8.3 − 使用 push() 方法將客戶端物件新增到“allConnectedClient”陣列中，該陣列儲存所有已連線和活動的客戶端。
步驟 8.4 − 建立一個字串資料陣列。現在，使用無限 while 迴圈，每次迭代後等待 5 秒，選擇隨機資料並將其傳送給客戶端。
步驟 9 − 將以下程式碼新增到 Node 應用程式的 app.js 檔案中。
const express = require("express");
const cors = require("cors");
const app = express();
// use cors
app.use(cors());
const PORT = 5000;
// array to store all connected clients
let allConnectedClients = [];
// add the client to the list
async function subscribeClient(req, res) {
// set headers
const headers = {
"Content-Type": "text/event-stream",
Connection: "keep-alive",
};
// adding 200 response code
res.writeHead(200, headers);
// create a client object and add it to the list
const id = Date.now();
const client = {
id,
res,
};
allConnectedClients.push(client);
console.log(`Client is connected Successfully and its id is: ${id}`);
let cnt = 0;
// Create data of strings and choose a random string
let data = [
"Hello",
"World",
"How",
"Are",
"You",
"Today",
"I",
"Am",
"Fine",
];
while (true) {
// wait for 5 seconds
await new Promise((resolve) => setTimeout(resolve, 5000));
console.log("Data updated", ++cnt);
// send data to the client
res.write(`data: ${data[Math.floor(Math.random() * data.length)]}
`);
}
}
// adding endpoints
app.get("/subscribe", subscribeClient);
// run the server
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}`);
});
步驟 10 − 在當前專案目錄中使用以下命令執行 Node 應用程式。
node app.js
輸出
執行 Node 應用程式伺服器後，在 Web 瀏覽器中開啟或重新整理 index.html 檔案。使用者可以觀察到它每 5 秒列印一次資料。
使用者學習瞭如何使用伺服器傳送事件在 JavaScript 中接收通知。在這裡，我們每 5 秒從伺服器傳送一次資料，但是開發人員只有在資料更新時才能傳送資料。
因此，透過這種方式，我們可以使用伺服器傳送事件在客戶端 JavaScript 中接收伺服器端資料更新的通知。
伺服器端事件類似於輪詢技術。在輪詢中，客戶端每隔一段時間向伺服器傳送請求並請求更新，這會增加伺服器的負載，因為它即使伺服器沒有更新也會發出請求。但是，伺服器傳送事件在資料更新時會將資料傳送給客戶端，客戶端無需向伺服器請求更新。
646 次瀏覽
