在Web开发中,服务端向前端推送数据是一种常见的需求。这种实时数据推送可以为用户提供及时更新的信息,例如聊天应用中的新消息通知或者实时股票行情。本文将介绍几种常用的服务端推送数据到Web前端的方式,并提供相应的源代码示例。
轮询(Polling):
轮询是一种简单粗暴的方式,即前端定期向服务端发送HTTP请求,询问是否有新数据。如果有新数据,则服务端返回数据,否则返回空响应。前端收到响应后,解析数据并更新页面。然后等待一段时间后,再发送下一次请求。这种方式的缺点是频繁的HTTP请求会增加服务器和网络的负担,并且由于固定的轮询间隔,可能导致数据更新的延迟。
function pollData() {
setInterval(function() {
选择适合自己需求的方式,并结合具体的技术栈进行实现,可以实现高效的服务端推送数据到Web前端的功能。这种方式相比于轮询和长轮询,减少了不必要的HTTP请求,提供了更低的延迟和更高的实时性。轮询是一种简单粗暴的方式,即前端定期向服务端发送HTTP请求,询问是否有新数据。这种方式的缺点是频繁的HTTP请求会增加服务器和网络的负担,并且由于固定的轮询间隔,可能导致数据更新的延迟。长轮询是对轮询方式的改进,它在服务端接收到请求后,如果没有新数据可用,将保持连接处于挂起状态,直到有新数据到达或者超时才返回响应。
public class ShowTimeController {
private static Logger logger = LoggerFactory.getLogger(ShowTimeController.class);
@RequestMapping("/time")
public String normal(){
return "showtime";
文章目录1. ==AJAX轮询==2. iframe3. comet长轮询(long polling)XHR长轮询Comet实现框架CometD服务器和内部构件Atmosphere框架PushletComet实现要点4. ==websocket==总结
通常情况下,打开网页或app去查询或者刷新时,客户端向服务器发出请求然后返回数据,客户端与服务端对应的模式是: 客户端请求–服务端响应, 而在有些...
在互联网高速发展的时代里,web应用大有取代桌面应用的趋势,不必再去繁琐的安装各种软件,只需一款主流浏览器即可完成大部分常规操作,这些原因都在吸引着软件厂商和消费者。而随着各大厂商浏览器版本的迭代,前端技术的不断革新,消息推送用到的场景也越来越多了。
@Bean
public HandlerMapping handlerMapping() {
Map<String, WebSocketHandler> map = new HashMap<>();
map.put("/video", new VideoWebSocketHandler());
SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
mapping.setUrlMap(map);
mapping.setOrder(1);
return mapping;
@Bean
public WebSocketHandlerAdapter handlerAdapter() {
return new WebSocketHandlerAdapter();
public class VideoWebSocketHandler implements WebSocketHandler {
private Flux<DataBuffer> videoData;
public VideoWebSocketHandler() {
// 从文件或网络中读取 FLV 视频数据
// 这里假设已经将数据读取为一个 Flux<DataBuffer> 对象
this.videoData = readVideoData();
@Override
public Mono<Void> handle(WebSocketSession session) {
return session.send(videoData.map(session::binaryMessage))
.and(session.receive().map(WebSocketMessage::getPayloadAsText).log());
private Flux<DataBuffer> readVideoData() {
// 这里使用一个简单的随机数据生成器模拟视频数据
// 实际应用中需要从文件或网络读取真实的 FLV 视频数据
return Flux.generate(() -> new byte[1024], (bytes, sink) -> {
new Random().nextBytes(bytes);
sink.next(DefaultDataBufferFactory.sharedInstance.wrap(bytes));
return bytes;
在上面的代码中,我们定义了一个 `VideoWebSocketHandler` 类,它实现了 `WebSocketHandler` 接口,用于处理 WebSocket 连接。在 `VideoWebSocketHandler` 类的构造方法中,我们读取了 FLV 视频数据并将其转换为一个 `Flux<DataBuffer>` 对象。在 `handle` 方法中,我们使用 `session.send` 方法将视频数据发送给客户端,并使用 `session.receive` 方法接收客户端的消息。这里我们假设客户端不会发送任何消息,因此我们只是简单地将接收到的消息记录到日志中。
在 `WebSocketConfig` 类中,我们定义了一个 `HandlerMapping` Bean,用于将 `/video` 路径映射到 `VideoWebSocketHandler` 处理器。我们还定义了一个 `WebSocketHandlerAdapter` Bean,用于将 `WebSocketHandler` 对象适配成 Spring WebFlux 的 `HandlerAdapter` 接口。
使用上面的代码,我们可以在 Spring WebFlux 中实现一个 WebSocket 服务端,用于推送 FLV 视频数据给前端播放。
CSDN-Ada助手:
Oracle数据库管理常用的性能监控脚本
CSDN-Ada助手:
JSP连接MySQL数据库详解
CSDN-Ada助手:
使用VirtualBox构建MySQL测试环境的笔记
CSDN-Ada助手:
Vue组件之间的参数传递与方法调用
CSDN-Ada助手: