常州做网站推广,sem投放是什么意思,泉州专业网站营销,深圳黑马品牌网站设计前端获取实时数据的三种主流方式
本文聊聊前端获取实时数据的三种主要方式。想象一下#xff0c;我们在网上购物时#xff0c;经常能看到最新的优惠信息弹出#xff0c;或者在社交媒体上看到朋友的最新动态更新。这些都是因为后端在默默地向我们的页面推送了最新的消息。那…前端获取实时数据的三种主流方式
本文聊聊前端获取实时数据的三种主要方式。想象一下我们在网上购物时经常能看到最新的优惠信息弹出或者在社交媒体上看到朋友的最新动态更新。这些都是因为后端在默默地向我们的页面推送了最新的消息。那么这背后到底使用了什么样的技术呢主要有三种方式轮询Polling、网页套接字WebSocket 和服务器发送事件Server-Sent Events, SSE。下面我们就来近距离接触一下它们。
轮询Polling
原理
轮询的工作方式很像是孩子不断地问父母“我们到了吗”。在这个比喻中前端孩子定时向后端父母发送请求来检查是否有新数据是否到目的地了。轮询又分为短轮询和长轮询两种。
短轮询前端每隔一定时间就发送一个请求无论数据是否更新后端都立即返回响应。长轮询前端发出请求后后端会挂起这个请求直到有数据更新或者超时才返回响应。
优缺点
总体上说轮询的优点在于它简单易实现几乎所有的服务器和客户端技术都能支持。但缺点也很明显因为它需要不断地发送请求这会导致大量的网络流量而且实时性不高数据更新有延迟。
具体到短轮询和长轮询可以对它俩再做一个对比
短轮询 优点 实现简单兼容性好。
缺点 频繁的请求会增加服务器负担实时性不够资源浪费较多。
长轮询 优点 相比短轮询减少了请求次数提高了实时性。
缺点 实现相对复杂服务器端需要维护挂起的请求可能会导致资源占用。
适用场景
轮询通常用在对实时性要求不是特别高的场景比如一些后台管理系统的消息通知、网页上的非实时统计信息展示。下面是使用轮询的一些真实案例
微信扫码登录微信的扫码登录功能使用的是轮询机制。当你扫描二维码时你的手机上的微信客户端会向服务器发送信息然后你的网页客户端会周期性地询问服务器用户是否已经通过手机确认。这里使用轮询是因为登录操作并不频繁且对实时性的要求不需要毫秒级而且轮询是一种简单且兼容性好的实现方式。Facebook的实时通知在Facebook早期他们使用长轮询来实现实时通知。用户的浏览器会开启一个到服务器的长连接这样一旦有新通知服务器就能立即推送数据。这种方式对于当时的技术来说是一个很好的折中方案因为它在不牺牲太多实时性的情况下减少了请求次数。
代码示例
这里演示一个短轮询。下面我们将要使用Node.js编写一段后端程序在这段代码中我们提供两个接口一个接口用于接受轮询、返回最新的消息另一个接口则用于更新消息。 后端 poll-server.js 的代码如下
const express require(express);
const app express();
let message No new message;// 指定public文件夹是静态资源的目录
app.use(express.static(public));// 前端要轮询访问这个接口这个接口会返回最新的message
app.get(/poll, (req, res) {res.send(message);message No new message;
});// 在其他地方调用这个接口更新message
app.post(/update, (req, res) {message Heres a new message!;res.status(200).send(Message updated);
});app.listen(3000, () {console.log(Server running on port 3000);
});前端 poll-client.html 则每隔几秒钟就发送一次请求代码如下
script typetext/javascript
setInterval(function() {fetch(/poll).then(response response.text()).then(data {if (data ! No new message) {console.log(data);}});}, 5000); // 每5秒请求一次
/script
程序启动后我们调用一次 /update前端日志就会输出Heres a new message!否则就一直输出No new message。
网页套接字WebSocket
原理
WebSocket是一种网络通信协议它提供了全双工通信机制它允许前后端建立一个持久的连接并且双方都可以通过这个连接随时发送数据。就像打电话双方可以随时说话和听对方说话。
优缺点
WebSocket 的优点在于它能够提供真正的实时通信服务器和客户端都可以随时发送数据而且相比轮询它减少了HTTP请求的开销。但缺点是它的实现相对复杂在弱网环境下可能不稳定而且旧版的浏览器可能不支持 WebSocket。
适用场景
WebSocket 非常适合需要高实时性的场景比如在线游戏、股票交易平台、实时聊天应用等。下面是使用WebSocket的一些真实案例
Slack这个流行的团队沟通工具使用WebSocket来实现实时消息传输。由于团队成员需要即时接收信息和通知WebSocket的全双工通信机制提供了几乎零延迟的数据交换。多人在线游戏许多现代的多人在线游戏使用WebSocket来同步玩家之间的状态。这种技术允许快速的数据传输确保了游戏体验的流畅和实时互动。
代码示例
在Node.js中使用ws模块来创建一个WebSocket服务器
const WebSocket require(ws);
const wss new WebSocket.Server({ port: 3000 });wss.on(connection, function connection(ws) {ws.on(message, function incoming(message) {console.log(received: %s, message);});ws.send(something);
});
前端代码是这样的
script typetext/javascript
const socket new WebSocket(ws://localhost:3000);socket.addEventListener(open, function (event) {socket.send(Hello Server!);
});socket.addEventListener(message, function (event) {console.log(Message from server , event.data);
});
/script
运行这段程序之后服务端会收到前端传递的 Hello Server! 前端会收到服务端发送的 something 服务器发送事件 (SSE)
原理
服务器发送事件SSE就像是一个广播站当有新节目数据时它就会向所有打开的收音机客户端发送信号。SSE 允许服务器主动向客户端发送数据流。与WebSocket不同的是SSE 是单向通信只能服务器向客户端发送数据。
优缺点
优点与WebSocket比实现更简单只需要简单的HTTP协议就可以实现并且支持自动重连与轮询比SSE可以减少服务器和客户端之间不必要的通信服务器推送的方式更高效。
缺点只支持单向通信服务器到客户端注意老旧浏览器可能不支持SSE比如IE6、7、8、9。
适用场景
SSE适用于不需要客户端向服务器发送消息的场景比如股票价格的更新、新闻直播、或者任何只需服务器单向推送的实时数据显示。下面是使用SSE的一些真实案例
ChatGPT作为一个能够与用户进行互动的聊天机器人ChatGPT使用服务器发送事件SSE来实现与用户的实时通信。ChatGPT在响应用户输入时并不需要双向实时通信它主要是接收用户的请求并返回计算结果。SSE可以在现有的HTTP基础设施上运行这对于大规模服务而言在连接管理和服务器资源分配方面可能更容易维护和优化。股票行情更新许多金融网站使用SSE来推送实时股票价格和市场数据。由于股市信息需要实时更新SSE为用户提供了一个不断流动的数据源这样他们就可以看到最新的市场变化而不必手动刷新页面。
代码示例
在Node.js中我们可以使用如下方式创建一个SSE服务器它每隔1秒向前端推送1条数据
const express require(express);
const app express();app.use(express.static(public));app.get(/events, function(req, res) {res.writeHead(200, {Content-Type: text/event-stream,Cache-Control: no-cache,Connection: keep-alive});// 每隔1秒钟写出1条数据setInterval(() {res.write(data: ${new Date().toLocaleTimeString()}\n\n);}, 1000);
});app.listen(3000, () {console.log(SSE server running on port 3000);
});客户端代码如下它接收事件并打印消息
script typetext/javascript
const evtSource new EventSource(/events);evtSource.onmessage function(event) {console.log(New message:, event.data);
};
/script
运行效果如下 本文简要地介绍了三种主要的后端向前端推送数据的方式。每种技术都有自己的适用场景和优缺点选择哪种技术取决于你的具体需求。不论你是在打造一个实时聊天应用还是一个股票交易平台这些技术都能帮助你提供更好的用户体验。
关注萤火架构加速技术提升
