node.js 和 html5 的 SSE 了解一下？-JavaScript中文网-JavaScript教程资源分享门户

什么是SSE？

SSE，全称为Server-Sent Events，即服务器推送事件，是一种服务器向浏览器推送数据的技术。和WebSocket类似，但不同于WebSocket的全双工通信，SSE是一种单向通信技术，只能由服务器向浏览器发送数据。

在HTML5中，浏览器原生支持SSE技术。通过使用JavaScript语言实现的EventSource对象，可以实现浏览器向服务器建立SSE连接，从而实现服务器推送数据到浏览器的操作。

Node.js中的SSE

Node.js是一个基于JavaScript的服务器端应用程序开发框架，它可以使用SSE技术实现服务器向浏览器推送数据。Node.js中使用了第三方模块sse-express来实现SSE。

以下是一个Node.js中使用SSE的示例代码：

// javascriptcn.com 代码示例
const express = require('express');
const sseExpress = require('sse-express');

const app = express();

app.get('/events', sseExpress(), (req, res) => {
  setInterval(() => {
    res.sse('data: ' + new Date() + '\n\n');
  }, 1000);
});

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

这段代码中，我们创建了一个基于Express框架的Node.js应用程序。我们通过使用sse-express模块创建了一个路由，并在回调函数中，使用setInterval函数每秒钟向浏览器推送一个包含当前时间的数据。

以上代码只是一个简单的示例，实际上，在Node.js中使用SSE可以实现多种不同的场景，例如实时聊天、在线游戏等等。

HTML5中的SSE

在HTML5中，浏览器原生支持SSE技术。在JavaScript中通过EventSource对象可以方便地向服务器建立SSE连接，并接收来自服务器的推送数据。

以下是一个HTML5中使用SSE的示例代码：

const eventSource = new EventSource('/events');

eventSource.onmessage = (event) => {
  console.log(event.data);
};

这段代码中，我们创建了一个EventSource对象来和服务器建立SSE连接，并在onmessage回调函数中接收服务器推送过来的数据。当服务器推送新数据时，会触发onmessage事件，并将数据传递到event对象中。

总结

SSE是一种非常有用的服务器推送技术，它可以帮助我们实现一些功能强大的Web应用程序，在Node.js和HTML5中都有着广泛的应用。本文介绍了SSE的基本概念和使用方法，并给出了一些示例代码，希望对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540e3697d4982a6eba76618