JavaScript中可用于服务器发送事件的事件是什么?

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”事件触发时,它会打印数据。用户可以在以下输出中观察输出。

JavaScript中可用于服务器发送事件的事件是什么?

用户学会了如何在客户端使用服务器发送事件的四个事件。 第一个事件是“开启(open)”,确保连接建立。 第二个事件是“消息(message)”事件,使我们可以处理从服务器获取的数据。 第三个事件是“错误(error)”事件,处理错误,最后一个事件是“关闭(close)”事件,用于了解连接何时终止。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 教程