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}监听`);
});