详解如何通过SSE实现Web站内消息推送

这篇具有很好参考价值的文章主要介绍了详解如何通过SSE实现Web站内消息推送。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

Web站内消息推送主要是通过WebSocket技术实现的,但是在某些情况下,WebSocket并不是最好的选择,比如在防火墙严格的环境下,WebSocket可能会被阻拦。

为了解决这个问题,我们可以使用SSE技术(Server-Sent Events)。

SSE是一种轻量级的服务器推送技术,可以实现服务器向客户端单向发送消息,它优势在于可以在不轮询服务器的情况下实现实时消息推送。

如何实现SSE

1. 服务端代码(Java)

1.1 servlet实现

首先我们需要在服务端创建一个Servlet,用于接收客户端的请求。

在Servlet类中,我们需要设置响应头信息,使其支持SSE。

在支持SSE的响应头信息中,Content-Type的值应该是"text/event-stream"。

另外为了保持连接不断开,我们需要设置一个无限循环,将服务端产生的数据不断发送给客户端。

@WebServlet("/sse")
public class SSEServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        res.setContentType("text/event-stream");
        res.setCharacterEncoding("UTF-8");
        res.setHeader("Cache-Control", "no-cache");
        res.setHeader("Connection", "keep-alive");
        res.flushBuffer();
        PrintWriter out = res.getWriter();
        while (true) {
            Date now = new Date();
            out.printf("data: %s\n\n", now.toString());
            out.flush();
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
}

1.2 springboot框架实现

SSE是Server-Sent Events的缩写,是一种Web API,用于客户端从服务器获取实时消息,并以事件流的形式接收消息。在Java Springboot中,可以使用Spring Webflux库来实现SSE。

以下是在Java Springboot中实现SSE的步骤:

1.2.1 在Maven或Gradle中添加依赖项:

<!-- Spring Webflux -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-webflux</artifactId>
</dependency>

1.2.2 创建一个用于订阅实时消息的Endpoint:

@RestController
@RequestMapping("/sse")
public class SSEController {

    @GetMapping(produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<String> getMessages() {
        return Flux.interval(Duration.ofSeconds(1))
                .map(i -> "Message " + i);
    }
}

在这里,我们创建了一个名为“sse”的端点,它在每个1秒钟的间隔中向客户端推送一条消息。

`produces`参数将返回内容的媒体类型设置为`text/event-stream`,这是一种用于SSE的特殊媒体类型。

`Flux.interval(…)` 会以指定的时间间隔向 SSE 输出流推送数据,可以使用它返回的 `Flux` 输出流将 `String` 消息写入 SSE 流中。

2. 客户端代码(JavaScript)

在客户端,我们可以使用JavaScript获取服务端推送的数据,然后展示在浏览器页面上。

这里我们使用XMLHttpRequest对象来接收服务端的数据。

var source = new EventSource('/sse');
source.onmessage = function(event) {
    console.log(event.data);
};

这里我们创建了一个名为source的EventSource对象,它的参数是一个URL,然后我们使用onmessage函数,接收服务器推送的数据。

这里我们把数据输出到控制台,在实际应用中,我们可以将数据展示在界面上。

至此,我们就完成了SSE的实现,相比起WebSocket,SSE更加轻量级,更易于实现。

这样我们就可以在不支持WebSocket的环境下,使用SSE实现消息推送了。文章来源地址https://www.toymoban.com/news/detail-597423.html

到了这里,关于详解如何通过SSE实现Web站内消息推送的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如果让你实现实时消息推送你会用什么技术?轮询、websocket还是sse

    在日常的开发中,我们经常能碰见服务端需要主动推送给客户端数据的业务场景,比如_数据大屏的实时数据_,比如_消息中心的未读消息_,比如_聊天功能_等等。 本文主要介绍SSE的使用场景和如何使用SSE。 学习就完事了 我们常规实现这些需求的方案有以下三种 轮询 websock

    2024年03月19日
    浏览(48)
  • SpringBoot SSE服务端主动推送事件详解

    SSE(Server Sent Event),直译为服务器发送事件,也就是服务器主动发送事件,客户端可以获取到服务器发送的事件。 我们常见的 http 交互方式是客户端发起请求,服务端响应,然后一次请求完毕。但是在SSE的使用场景下,客户端发起请求,然后建立SEE连接一直保持,服务端就可

    2024年02月07日
    浏览(33)
  • WEB通讯技术。前端实现SSE长连接,nodejs+express搭建简单服务器,进行接口调试,通过curl请求数据

    长连接(Keep-Alive)是一种HTTP/1.1的持久连接技术,它允许客户端和服务器在一次TCP连接上进行多个HTTP请求和响应,而不必为每个请求/响应建立和断开一个新的连接。长连接有助于减少服务器的负载和提高性能。 长连接的HTTP请求方法与普通HTTP请求方法相同,可以使用GET、P

    2024年02月09日
    浏览(53)
  • spring boot +微信小程序项目,通过微信公众号实现指定用户消息长期推送

    用户登录小程序,后台记录用户的小程序openId和用户唯一的UnionId。然后用户触发公众号事件(关注公众号或者发送指定消息),后台获取到用户公众号的openId,再调用接口通过公众号的openId查询用户的UnionId,再和数据库里的UnionId进行匹配,将用户的公众号openId存入数据库。此

    2024年02月03日
    浏览(61)
  • Python Tornado 实现SSE服务端主动推送方案

    SSE 是 Server-Sent Events 的简称, 是一种服务器端到客户端(浏览器)的单项消息推送。对应的浏览器端实现 Event Source 接口被制定为 HTML5 的一部分。相比于 WebSocket ,服务器端和客户端工作量都要小很多、简单很多,而 Tornado 又是 Python 中的一款优秀的高性能 web 框架,本文带领大

    2024年02月21日
    浏览(62)
  • 桥接模式:如何实现支持不同类型和渠道的消息推送系统?

            上一节课我们学习了第一种结构型模式:代理模式。它在不改变原始类(或者叫被代理类)代码的情况下,通过引入代理类来给原始类附加功能。代理模式在平时的开发经常被用到,常用在业务系统中开发一些非功能性需求,比如:监控、统计、鉴权、限流、事务

    2024年02月15日
    浏览(41)
  • 实时通信的服务器推送机制 EventSource(SSE) 简介,附 go 实现示例

    不知道大家有没有见过 Content-Type:text/event-stream 的请求头,这是 HTML5 中的 EventSource 是一项强大的 API ,通过服务器推送实现实时通信。 与 WebSocket 相比, EventSource 提供了一种简单而可靠的单向通信机制(服务器-客户端),实现简单,适用于许多实时应用场景。 本文将介绍

    2024年02月10日
    浏览(85)
  • 浅谈PHP结合JavaScript SSE(Server Sent Events)实现服务器实时推送功能

    如配置后Nginx遇到502/504的,请参考这两篇文章的解决方案 PHP-FPM与Nginx通信报 502 Bad Gateway或504 Gateway Timeout终极解决方案(适用于PHP执行耗时任务情况下的报错) Linux系统下配置Nginx使部分URL使用多套自定义的PHP-FPM配置 SSE 的全称是 Server Sent Events,即服务器推送事件。它是一种

    2024年02月08日
    浏览(46)
  • Spring Boot中使用Server-Sent Events (SSE) 实现实时数据推送教程

    Server-Sent Events (SSE) 是HTML5引入的一种轻量级的服务器向浏览器客户端单向推送实时数据的技术。在Spring Boot框架中,我们可以很容易地集成并利用SSE来实现实时通信。          在Spring Boot项目中,无需额外引入特定的依赖,因为Spring Web MVC模块已经内置了对SSE的支持。 辅助

    2024年03月18日
    浏览(63)
  • 微信小程序云开发通过服务号给用户推送模板消息

    主要参考下面两个文章 1、云函数接收公众号消息推送 | 微信开放社区 ​​​​​​2、微信小程序通过公众号(服务号)推送通知或提醒步骤及代码(一,获取推送前所需信息)_微信小程序推送服务通知_庆登登登的博客-CSDN博客  一些基本的概念就不讲了,这里主要讲下步骤和我

    2024年02月09日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包