数据结构
网络
关系数据库管理系统 (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://127.0.0.1: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 次浏览
