服务端事件推送——HTTP协议的事件流（EventStream）

已于 2024-10-29 09:47:03 修改
阅读量8.3k 收藏 24
点赞数 14
分类专栏： javaweb 文章标签： http 网络协议 网络 java SSE chatgpt
于 2024-07-03 10:18:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34877257/article/details/140131646
版权

背景

最近由于工作要求需要使用Springboot搭建一个流式响应服务，即客户端发送一次请求，服务端需要多次响应才能返回完整的数据。使用场景就是与chatGPT对话，你问一个问题，页面会逐字将结果打印出来。

下面我在SpringBoot中可以简单的实现一下这种场景需求，即SSE（Server-Sent Events）模式

前端请求实现方式

目前前端的请求实现方式有两种，一个是采用EventSource实现，这种实现方式不支持自定义的请求头，也就没有办法再请求头部中增加Token这样的用户身份验证信息。并且该方式只支持GET请求方式。所以这种实现方式只适用于，不需要验证用户身份并且请求参数内容少的情况下。

若要传输更多的参数信息或者在请求头中增加自定义内容建议使用AbortController实现

若传输过程中链接断开，EventSource可以实现自动重新链接，AbortController不能实现自动重新链接。

使用EventSource实现

       // 建立连接
       let source = new EventSource('http://localhost:8080/sse/connect/' + userId);

        /**
         * 连接一旦建立，就会触发open事件
         * 另一种写法：source.onopen = function (event) {}
         */
        source.addEventListener('open', function (e) {
            console.log("建立连接。。。");
        }, false);

        /**
         * 客户端收到服务器发来的数据
         * 另一种写法：source.onmessage = function (event) {}
         */
        source.addEventListener('message', function (e) {
           console.log(e.data);
        });


        /**
         * 如果发生通信错误（比如连接中断），就会触发error事件
         * 或者：
         * 另一种写法：source.onerror = function (event) {}
         */
        source.addEventListener('error', function (e) {
            if (e.readyState === EventSource.CLOSED) {
                console.log("连接关闭");
            } else {
                console.log(e);
            }
        }, false);

使用AbortController实现

<template>
  <div>
    <input v-model="name" placeholder="Enter your name">
    <button @click="sendPost">Send POST request</button>
    <button @click="stopGenerating">Stop Generating</button>
    <button @click="restartGenerating">Restart Generating</button>
    <pre>{{ response }}</pre>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      name: '',
      response: '',
      controller: new AbortController(),
      isStopped: false
    }
  },
  methods: {
    async sendPost() {
  this.controller = new AbortController()
  this.response = ''
  this.isStopped = false
  const response = await fetch('http://127.0.0.1:5000/stream', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: this.name }),
    signal: this.controller.signal
  })
  const reader = response.body.getReader()
  while (true) {
    if (this.isStopped) break
    const { done, value } = await reader.read()
    if (done) break
    this.response += new TextDecoder().decode(value)
  }
},
 
    stopGenerating() {
      this.controller.abort()
      this.isStopped = true
    },
    restartGenerating() {
      this.controller = new AbortController()
      this.sendPost()
    }
  }
}
</script>

后端响应实现方式

使用SseEmitter实现

 @RequestMapping(value = "/talkeAbouttestSseEmitter")
    public SseEmitter talkeAbouttestSseEmitter(HttpServletResponse response, @RequestBody JSONObject object) throws IOException {
        SseEmitter emitter = new SseEmitter();
        logger.info("【prompt内容】：{}", object.getString("prompt"));
        String str = "       什么是爱而不得? \n" +
                "东边日出西边雨，道是无晴却有晴。\n" +
                "他朝若是同淋雪，此生也算共白头。\n" +
                "我本将心向明月，奈何明月照沟渠。\n" +
                "此时相望不相闻，愿逐月华流照君。\n" +
                "衣带渐宽终不悔，为伊消得人憔悴。\n" +
                "此情可待成追忆，只是当时已惘然。\n" +
                "人生若只如初见，何事西风悲画扇。\n" +
                "曾经沧海难为水，除却巫山不是云。\n" +
                "何当共剪西窗烛，却话巴山夜雨时。\n" +
                "天长地久有时尽，此恨绵绵无绝期。\n" +
                "\n";
        response.setHeader("Content-Type", "text/event-stream");
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Pragma", "no-cache");
        new Thread(() -> {
//            // 响应流
            try {
                for (int i = 0; i < str.length(); i++) {
                    // 指定事件标识  event: 这个为固定格式
                    emitter.send(String.valueOf(str.charAt(i)));
                    Thread.sleep(100);
                }
                emitter.send("stop");
                emitter.complete(); // Complete the SSE connection
            } catch (IOException e) {
                e.printStackTrace();
            }
        }).start();
        return emitter;
    }

使用HttpServlet实现

    @RequestMapping(value = "/talkeAbouttestEvent")
    public void talkeAbouttestEvent(HttpServletResponse response, @Param("prompt") String prompt) throws IOException {
        logger.info("【prompt内容】：{}", prompt);
        String str = "       什么是爱而不得? \n" +
                "东边日出西边雨，道是无晴却有晴。\n" +
                "他朝若是同淋雪，此生也算共白头。\n" +
                "我本将心向明月，奈何明月照沟渠。\n" +
                "此时相望不相闻，愿逐月华流照君。\n" +
                "衣带渐宽终不悔，为伊消得人憔悴。\n" +
                "此情可待成追忆，只是当时已惘然。\n" +
                "人生若只如初见，何事西风悲画扇。\n" +
                "曾经沧海难为水，除却巫山不是云。\n" +
                "何当共剪西窗烛，却话巴山夜雨时。\n" +
                "天长地久有时尽，此恨绵绵无绝期。\n" +
                "\n";
        // 响应流
        response.setHeader("Content-Type", "text/event-stream");
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Pragma", "no-cache");
        try {
            // 指定事件标识  event: 这个为固定格式
            response.getWriter().write("event:open\n");
            response.getWriter().flush();

            for (int i = 0; i < str.length(); i++) {
                // 指定事件标识  event: 这个为固定格式
//                response.getWriter().write("event:msg\n");
                // 格式：data: + 数据 + 2个回车
                response.getWriter().write("data:{\"content\":\""+ String.valueOf(str.charAt(i)).getBytes(StandardCharsets.UTF_8) + "\"}\n\n");
                response.getWriter().flush();
                Thread.sleep(100);
            }
            // 指定事件标识  event: 这个为固定格式
            response.getWriter().write("event:error\n");
            response.getWriter().flush();
//            response.getWriter().close();
        } catch (IOException | InterruptedException e) {
            e.printStackTrace();
        } finally {
        }
    }

后端请求实现方式

 /**
     * *
     * @param url
     * @param json
     * @return
     */
    public static BufferedReader sendJsonPostResveEventStream(String url, String json) {
        PrintWriter out = null;
        BufferedReader in = null;
        BufferedReader reader = null;
        try {
            log.info("sendPost - {}", url);
            log.info("json - {}", json);
            URL realUrl = new URL(url);
            HttpURLConnection conn = (HttpURLConnection) realUrl.openConnection();
            conn.setRequestMethod("POST");
            conn.setDoOutput(true);
            conn.setDoInput(true);
            conn.setUseCaches(false);
            conn.setRequestProperty("Connection", "Keep-Alive");
            conn.setRequestProperty("Charset", "UTF-8");
            conn.setRequestProperty("Content-Type", "application/json; charset=UTF-8");
            conn.setRequestProperty("accept", "application/json");
            if (json != null && !json.equals("")) {
                byte[] writebytes = json.getBytes();
                conn.setRequestProperty("Content-Length", String.valueOf(writebytes.length));
                OutputStream outwritestream = conn.getOutputStream();
                outwritestream.write(json.getBytes());
                outwritestream.flush();
                outwritestream.close();
                conn.getResponseCode();
            }
            if (conn.getResponseCode() == 200) {
                reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
                return reader;
            }
        } catch (ConnectException e) {
            log.error("调用HttpUtils.sendPost ConnectException, url=" + url + ",param=" + json, e);
        } catch (SocketTimeoutException e) {
            log.error("调用HttpUtils.sendPost SocketTimeoutException, url=" + url + ",param=" + json, e);
        } catch (IOException e) {
            log.error("调用HttpUtils.sendPost IOException, url=" + url + ",param=" + json, e);
        } catch (Exception e) {
            log.error("调用HttpsUtil.sendPost Exception, url=" + url + ",param=" + json, e);
        } finally {
            try {
                if (out != null) {
                    out.close();
                }
                if (in != null) {
                    in.close();
                }
            } catch (IOException ex) {
                log.error("调用in.close Exception, url=" + url + ",param=" + json, ex);
            }
        }
        return null;
    }

后端请求然后以事件流的方式发送给前端

    @PostMapping(value = "/talkeAbout", produces = "text/event-stream")
    public void talkeAbout(HttpServletResponse response, @RequestBody JSONObject object) throws IOException {
        response.setHeader("Content-Type", "text/event-stream");
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Pragma", "no-cache");
        talkeAboutToXinference(object.getString("prompt"), response);
    }

    public void talkeAboutToXinference(String msg, HttpServletResponse response) throws IOException {
        String json = CHAT_PRARAM.replace("user_talke_about", msg);
        BufferedReader reader = HttpUtils.sendJsonPostResveEventStream("http://localhost/chat" + CHAT_CHAT_COMPLETIONS, json);
        if (reader == null) return;
        String line = "";
        while ((line = reader.readLine()) != null) {
            response.getWriter().write(line +"\n");
            response.getWriter().flush();
        }
        response.getWriter().close();
    }

Spring Cloud Stream 之百万级消息推送实践
AI天才研究院
07-29 1402
随着互联网技术的飞速发展，网站应用、移动应用、物联网设备、游戏领域等越来越多地使用云计算资源。在云平台上部署服务时，由于网络带宽、存储容量等方面的限制，需要通过高效的数据流传输方式来提升性能和降低成本。即使在微小数据量下，如IoT设备或者移动应用程序数据上传，也会产生海量数据需要处理。因此，如何有效地处理海量数据的传输成为企业面临的新课题。
Spring Boot 实践折腾记（13）：使用WebFlux构建响应式「推送API 」
mickjoust的技术小屋
05-08 6180
西方著名宗教史家米尔恰·伊利亚德说，如果今天我们不生活在未来，那么未来，我们会生活在过去。 随着移动互联网的普及，基于C/S模式的APP开始了它的又一轮爆发式增长，过去，我们总说要去C/S模式，拥抱B/S，而实际上，任何开发模式都不过是具体的需求应用场景下的产物罢了，并没有绝对的好与坏。今天我们从推送的历史开始说起，介绍一下目前常见的推送实现方式，并结合反应式的例子来继续实战反应式的编程模型的应...
服务器推送技术之——SSE
实践求真知
08-18 2624
一 点睛 服务器推送技术在日常开发中较为常用。 SSE：Server send Event：服务端发送事件。 本项目推送技术是基于：当客户端向服务端发送请求，服务端会抓住这个请求不放，等有数据更新的时候才返回给客户端，当客户端接收到消息后，再向服务端发送请求，周而复始。这种方式的好处是减少了服务器的请求数量，大大减少了服务器的压力。 二 实战 1 控制器 package com.wi...
vue接收event-stream 流式数据并回显
m0_48308579的博客
09-06 4099
在这个示例中，客户端使用 EventSource 来接收服务器发送的实时事件。如果服务器返回的是 event-stream 流式数据，你可以使用 EventSource 来处理这些数据。EventSource 是一种服务器发送事件（Server-Sent Events, SSE）的 API，它允许服务器向客户端推送实时更新。请注意，EventSource 是一种单向通信方式，即只能从服务器向客户端发送数据。文章来源CodeGeeX 只作记录。
快速掌握 text/event-stream：开启实时通信新大门
最新发布
不会说话の猴子的博客
03-03 2723
Text/Event - Stream 是一种用于在 Web 应用程序中实现服务器推送（Server - Sent Events，SSE）的协议。它基于 HTTP 协议，允许服务器以流的形式向客户端发送数据。当浏览器收到带有响应头的 HTTP 响应时，会将响应解析为 SSE 流。
hyperf 中 http 设置响应头为 text/event-stream
gyk163的博客
05-07 2248
hyperf swoole 响应头设置为 text/event-stream
text/event-stream
顺其自然~专栏
08-22 894
GPT火了之后，一种新的Http MediaType慢慢火了起来，它就是。这几种类型本质上都是客户端与服务端打开了一个长连接，服务端可以多次写入一部分数据给客户端，客户端可以多次读取，直到全部读取完成。由于ChatGPT的特性，如果需要生成的token较多，等它全部生成完成将消耗较多的时间，但是如果你将它生成过程中的数据源源不断地展示给用户，那么用户端的体验也不会差（类似于在线播放视频，不需要把整个视频下载完成才能播放）支持服务端分多次往客户端写内容。
HTTP中的event-stream，eventsource，SSE，chatgpt，stream request，golang
猛犸象
09-20 2506
我们都知道chatgpt是生成式的，因此它返回给客户端的消息也是一段一段的，所以普通的HTTP协议无法满足，当然websocket是能满足的，但是这个是双向的通信，其实 SSE（Server-Sent Events） 正好满足这个需求。要实现SSE，服务端需要设置以下Headers。
Spring MVC Http Event Stream
cainiao1412的博客
09-06 2393
Event Stream 技术是一种实现服务器推送事件的方法，它通过在一个持续的 HTTP 连接上发送事件流来实现推送。具体来说，服务器发送一些事件到客户端，并将这些事件封装成一些指定格式的文本流。客户端通过监听这个流，就能实时收到服务器推送的事件。text/event-stream 是一个 HTTP 响应头，用于指示服务器返回的数据是一个事件流，而不是一个普通的 HTTP 响应。事件流是一种基于事件驱动的传输协议，通常用于在微服务架构中传输实时数据。
HTTP头中的Content-Type: text/event-stream；是什么鬼？
热门推荐
如果我年少有为不自卑
12-22 1万+
1、最近在研究nuxt.js。网上找了个vue的项目，改造为nuxt.js架构的SSR程序 在首页直出的时候，发现一个/webpack_hmr/client请求。如图： webpack热更新需要向浏览器推送信息，一般都会想到websocket，但是还有一种方式，叫做Server-Sent Events（简称SSE）。 SSE是websocket的一种轻型替代方案。 和websocket有以下几点不同： SSE是使用http协议，而websocket是一种单独的协议 SSE是单向传输，只能服务端向客户端推
解释一下HTTP协议中的服务器推送（Server Push）。
长风破浪会有时的博客
05-01 696
这就像是你正在网上浏览，突然收到一个弹出的消息通知，告诉你有新的消息或者更新，这就是服务器推送的一个例子。通常情况下，你需要主动去老师那里拿作业本，这就像是你在网上浏览时，需要点击链接或刷新页面来获取新的信息。服务器推送有很多用途。但是，有时候老师会直接走到你的面前，把作业本放到你的桌子上，你不需要主动去拿。这种方式就像是服务器推送，也就是服务器主动把信息发送给你，而不需要你主动去请求。总的来说，服务器推送就像是老师主动走到你面前分发作业本一样，服务器主动把信息发送给你，而不需要你主动去请求。
HTTP SSE （Server-Sent Events）流式服务器推送技术
csdn_ad986ad的博客
03-15 3364
SSE（Server-Sent Events）是一种基于HTTP协议的服务器推送技术，用于实现服务器向客户端实时发送事件的功能。在SSE中，服务器可以发送不同类型的消息给客户端。
text/event-stream使用demo源码
03-03
通过观察源码和实际运行结果，开发者可以更直观地掌握如何在服务端推送实时数据给客户端，并在客户端接收和处理这些数据。这无疑对于任何希望提升Web应用实时交互能力的开发者来说，是一个宝贵的参考材料。
http 服务器 推消息,HTTP 服务器消息推送之SSE
weixin_39603217的博客
08-03 440
HTTP 服务器推送也称 HTTP 流，是一种客户端-服务器通信模式，它将信息从 HTTP 服务器异步推送到客户端，而无需客户端请求。现在的 web 和 app 中，越来越多的场景使用这种通信模式，比如实时的消息提醒，IM在线聊天，多人文档协作等。以前实现这种类似的功能一般都是用ajax长轮询，而现在我们有了新的、更优雅的选择 —— WebSocket 和 SSE。WebSocket是HTML5开...
js轮询导致服务器瘫痪_服务器推送技术与websocket协议
weixin_39980002的博客
11-25 201
websocket 作为现代浏览器的长连接标准，可以很好的解决浏览器与服务器实时通讯的问题，那么在 websocket 出现之前是怎么解决这个问题的呢？首先来回顾一下在此之前浏览器和服务器的”长连接”之路。回顾在 websocket 协议出来之前，主要是有三种方向去实现类似 websocket 的功能的。Flashflash 支持 socket 通讯功能，基于 flash 可以很简单的实现与服务器...
event-stream: 用于Node.js的流处理库
gitblog_00065的博客
03-14 1173
event-stream: 用于Node.js的流处理库 event-streamEventStream is like functional programming meets IO项目地址:https://gitcode.com/gh_mirrors/ev/event-stream 简介 是一个用于Node.js的流处理库，它提供了一系列有用的功能，如并行处理、合并流、缓冲等。 应用场景 e...
服务端事件（Server-Sent Events）：实现实时Web通信的利器
2402_85761468的博客
08-24 690
服务端事件是一种基于HTTP的轻量级协议，允许服务器向客户端发送新数据，而无需客户端的请求。SSE使用标准的HTTP连接，并保持连接打开状态，以便服务器可以在任何时候发送更新。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值