JavaScript中可用于服务器发送事件的事件是什么?
服务器发送事件使开发人员能够在服务器和客户端之间打开连接,从服务器向客户端发送数据。基本上,这是一种单向通信,这意味着我们可以从服务器向客户端发送数据,但不能从客户端向服务器发送数据。
在这里,我们将讨论JavaScript中用于服务器发送事件的所有事件。
JavaScript中可用的服务器发送事件事件
共有4个不同的事件可用于JavaScript中的服务器发送事件。
- “onopen” −当客户端和服务器之间的连接成功建立时,“open”事件触发。我们可以使用“open”事件来确保连接成功。
newEvent.onopen = () => {
//执行某些操作
}
- “onmessage” −客户端接收服务器发送消息或数据时触发“message”事件。我们可以使用“message”事件从服务器获取更新的数据并在客户端处理它。
newEvent.onmessage = message => {
//处理消息数据
};
- “onerror” −当连接服务器和客户端时发生问题时,“error”事件触发。我们可以使用“error”事件捕获错误,并在每个时间间隔后重试连接,直到连接成功建立为止。
newEvent.onerror = event => {
//处理错误
}
- “onclose” −当客户端和服务器之间的连接被服务器或客户端关闭时,“close”事件触发。当“close”事件触发时,我们可以清除浏览器缓存和其他数据。
newEvent.onclose = event => {
//清除数据
}
所有四个事件都可以在客户端上使用。在此,我们将通过下面的示例学习如何在客户端上使用上述事件。
实例
首先,用户需要创建一个index.html文件并将以下代码添加到其中。
在下面的示例中,我们使用EventSource()构造函数创建了“newEvent”对象。之后,我们添加了“onopen”事件到代码中,当它被触发时,我们打印一个简单的消息。
接下来,我们添加了“onmessage”事件,该事件在客户端从服务器接收到消息时触发,我们在触发时处理数据。
文件名 – index.html
<html>
<body>
<h2>使用<i>JavaScript</i>的<i>服务器发送事件</i>进行单向通信。</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
const newEvent = new EventSource('http://localhost:3000/connect');
// 当连接建立时,触发开放事件。
newEvent.onopen = () => {
output.innerHTML += '成功建立与服务器的连接。<br>';
}
// 当服务器向客户端发送数据时触发消息事件。
newEvent.onmessage = message => {
output.innerHTML += "更新的消息数据为:" + message.data + "<br>";
};
// 当连接关闭时触发错误事件。
newEvent.onerror = event => {
output.innerHTML += `服务器发送事件出错:${event}`;
}
// 当连接关闭时触发关闭事件。
newEvent.onclose = event => {
output.innerHTML += '客户端与服务器的连接已关闭。';
}
</script>
</body>
</html>
现在,用户需要创建一个Node应用程序,并通过以下命令安装“express”和“cors”NPM包。
npm i express cors
之后,在Node应用程序中创建一个server.js文件,并在文件中添加以下代码。
在下面的代码中,我们创建了’manageClient()’函数的“connect”API端点。在’manageClient()’函数中,我们在响应中添加所需的标头。还要在响应中添加客户端。
接下来,我们使用for循环使用服务器发送通知向客户端发送5个更新。
const express = require("express");
const cors = require("cors");
const app = express();
// 使用cors
app.use(cors());
const PORT = 3000;
// 存储所有连接的客户端的数组
let clients = [];
// 将客户端添加到列表中
async function manageClient(req, res) {
// 设置标头
const requiredHeaders = {
"Content-Type": "text/event-stream",
Connection: "keep-alive",
};
// 添加200个响应代码
res.writeHead(200, requiredHeaders);
// 创建客户端对象并将其添加到列表中
const client = {
id: Math.random(),
res,
};
clients.push(client);
console.log(`客户端成功连接`);
for (let i = 0; i < 5; i++) {
// 向客户端发送数据
res.write(`data: test{i}
`);
}
}
// 添加端点
app.get("/connect", manageClient);
// 运行服务器
app.listen(PORT, () => {
console.log(`应用程序在端口{PORT}监听`);
});
现在,使用以下命令运行Node应用程序的服务器。
node server.js
输出
当用户在浏览器中刷新index.html文件时,它将建立服务器和客户端之间的连接。同时,它打印了连接成功建立的消息,当触发“onopen”事件时。
之后,当“on message”事件触发时,它会打印数据。用户可以在以下输出中观察输出。
用户学会了如何在客户端使用服务器发送事件的四个事件。 第一个事件是“开启(open)”,确保连接建立。 第二个事件是“消息(message)”事件,使我们可以处理从服务器获取的数据。 第三个事件是“错误(error)”事件,处理错误,最后一个事件是“关闭(close)”事件,用于了解连接何时终止。