SSE 在单页面应用中的应用实例
前置知识
本文将讲述 SSE（Server-sent Event）在单页面应用中的应用实例，因此需要有一定的前端开发基础，以下为本文所涉及的一些基础知识：
- HTML/CSS/JavaScript 基础
- jQuery 基础
- AJAX 基础
SSE 简介
SSE 是一种基于 HTTP 协议的服务器推送技术。与传统的 AJAX 轮询和 WebSocket 不同，SSE 只需要使用浏览器内置的 EventSource 接口即可实现消息的实时推送。这个接口封装了浏览器和服务器之间的长连接并支持自定义事件。
SSE 有以下几个好处：
- 不需要使用额外的协议，只需要 HTTP
- 对现有的应用程序容易集成
- 不需要配置服务器
- 支持自定义事件
单页面应用实例
在开发单页面应用中，我们通常需要在某一个界面上实时展示数据，比如聊天室、在线游戏等。如果使用传统的轮询技术，会大量占用服务器资源，影响用户体验。使用 SSE 可以有效地解决这个问题。
本文以一个在线聊天室为例，介绍 SSE 在单页面应用中的应用实例。
前端代码
以下是前端代码的基本结构，需要使用到 jQuery：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天室</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form id="messageForm">
<input type="text" id="messageInput">
<button type="submit">发送</button>
</form>
</body>
<script>
// 创建 EventSource 对象
var eventSource = new EventSource("/chat");
// 监听事件
eventSource.addEventListener("message", function(event) {
// 接收到消息
var message = JSON.parse(event.data);
$("#messages").append("<li>" + message.text + "</li>");
});
// 发送消息
$("#messageForm").submit(function(event) {
event.preventDefault();
var message = { text: $("#messageInput").val() };
$.post("/chat", JSON.stringify(message));
$("#messageInput").val("");
});
</script>
</html>在这个例子中，我们在 <ul> 标签中展示所有的消息，在 <form> 标签中发送新的消息。EventSource 对象的 addEventListener 方法监听 "message" 事件，当后端推送消息时，浏览器会触发该事件，并在页面中添加接收到的新消息。
后端代码
下面是一个使用 Node.js 和 Express 的后端代码示例，需要安装 express 和 body-parser 模块：
// javascriptcn.com 代码示例
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
// 中间件
app.use(bodyParser.json());
// 聊天室
const messages = [];
app.post("/chat", function(req, res) {
const message = req.body;
messages.push(message);
res.sendStatus(200);
});
app.get("/chat", function(req, res) {
res.setHeader("Content-Type", "text/event-stream");
res.setHeader("Cache-Control", "no-cache");
res.setHeader("Connection", "keep-alive");
const intervalId = setInterval(function() {
res.write("event: message\n");
res.write("data: " + JSON.stringify(messages) + "\n\n");
}, 1000);
// 关闭 SSE 连接
req.on("close", function() {
clearInterval(intervalId);
});
});
// 启动服务器
const port = 3000;
app.listen(port, function() {
console.log(`Listening on port ${port}...`);
});在这个例子中，我们创建了一个 Express 应用程序，并且定义了一个名为 /chat 的路由。当浏览器通过 GET 方法访问该路由时，服务器会返回一个 SSE 流。服务器端每分钟将当前的消息列表返回给浏览器，当浏览器访问该路由时，浏览器将与服务器进行长连接，然后等待服务器端发送新消息。
当浏览器通过 POST 方法向该路由提交新的消息时，服务器端将新的消息添加到消息列表中，并返回 200 状态码。
总结
SSE 是一种简单易用的服务器推送技术，适用于多种场景，如实时聊天、在线游戏等。在单页面应用中，使用 SSE 可以实现实时展示数据，提高用户体验，降低服务器压力。本文以一个聊天室为例，讲述了 SSE 在单页面应用中的应用实例，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653398497d4982a6eb724bce