客户端接收 text/event-stream

html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>Event Stream Demo</title>

		<style type="text/css">

			body {

				font-family: Arial, sans-serif;

				text-align: center;

			}

			#event-stream-data {

				margin: 50px auto;

				max-width: 600px;

				border: 1px solid #ccc;

				padding: 10px;

			}

		</style>

	</head>

	<body>

		<div id="event-stream-data"></div>

		<script>

			const eventStreamDataElement = document.getElementById('event-stream-data');

			function handleEventStreamMessage(event) {

				console.log(event)

				const eventText = event.data;

				displayEvent(eventText);

			}

			function displayEvent(eventText) {

				const eventElement = document.createElement('p');

				eventElement.textContent = eventText;

				eventStreamDataElement.appendChild(eventElement);

			}

			function connectToEventStream() {

				fetch('http://localhost:8004/website/events', {

						method: 'POST',

						headers: {

							'Content-Type': 'application/json'

						},

						body: JSON.stringify({

							data: 'example'

						}) // Replace with your POST data

					})

					.then(response => {

						const reader = response.body.getReader();

						const decoder = new TextDecoder();

						return reader.read().then(function processResult(result) {

							console.log(result)

							if (result.done) {

								return;

							}

							const chunk = decoder.decode(result.value, {

								stream: true

							});

							handleEventStreamMessage({

								data: chunk

							});

							return reader.read().then(processResult);

						});

					})

					.catch(error => {

						console.error('Error occurred while fetching event stream:', error);

					});

			}

			connectToEventStream();

		</script>

	</body>

</html>

服务端发送（springboot）

    @PostMapping(value = "/events", produces = MediaType.TEXT_EVENT_STREAM_VALUE)

    public SseEmitter eventStream(@RequestBody Object obj) {

        SseEmitter emitter = new SseEmitter();

        System.out.println(obj.toString());

        ScheduledExecutorService executorService = Executors.newScheduledThreadPool(1);

        executorService.scheduleAtFixedRate(() -> {

            try {

                // 模拟产生一条事件数据

                String eventData = "Event data: " + System.currentTimeMillis();

                emitter.send(SseEmitter.event().data(eventData));

            } catch (IOException e) {

                emitter.complete();

            }

        }, 0, 1, TimeUnit.SECONDS);

        return emitter;

    }

text/event-stream协议的更多相关文章

  1. [Reactive Programming] Using an event stream of double clicks -- buffer()

    See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect doubl ...

  2. [html5] 学习笔记-服务器推送事件

    1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是Html5规范的一个组成部分,可以用来从服务端实时推送数据到浏览器端. 传统的服务器推送技术----WebSo ...

  3. 《Web性能权威指南》

    <Web性能权威指南> 基本信息 原书名:High performance browser networking 原出版社: O'Reilly Media 作者: (加)Ilya Grig ...

  4. Web性能权威指南 PDF扫描版​

    Web性能权威指南是谷歌公司高性能团队核心成员的权威之作,堪称实战经验与规范解读完美结合的产物.<Web性能权威指南>目标是涵盖Web开发者技术体系中应该掌握的所有网络及性能优化知识.全书 ...

  5. HTTP协议开发应用-HTTP&XML协议栈开发

    Netty HTTP+XML协议栈开发 由于HTTP协议的通用性,很多异构系统间的通信交互采用HTTP协议,通过HTTP协议承载业务数据进行消息交互,例如非常流行的HTTP+XML或者RESTful+ ...

  6. 多点触摸(MT)协议（翻译）

    参考: http://www.kernel.org/doc/Documentation/input/multi-touch-protocol.txt 转自:http://www.arm9home.ne ...

  7. 内核中的多点触摸协议文档 Multi【转】

    转自:http://www.arm9home.net/read.php?tid=24754 前段时间改写了一个GT801的内核驱动,仔细阅读 MT Event 上报的时候,发现这个驱动是针对 Andr ...

  8. Stream computing

    stream data 从广义上说,所有大数据的生成均可以看作是一连串发生的离散事件.这些离散的事件以时间轴为维度进行观看就形成了一条条事件流/数据流.不同于传统的离线数据,流数据是指由数千个数据源持 ...

  9. zz:NETCONF协议详解

    随着SDN的大热,一个诞生了十年之久的协议焕发了第二春,它就是NETCONF协议.如果你在两年前去搜索NETCONF协议,基本得到的信息都是"这个协议是一个网管协议,主要目的是弥补SNMP协 ...

  10. XMPP即时通讯协议使用（十二）——基于xmpp搭建简单的局域网WebRTC

    创建HTML和JS ofwebrtc.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

随机推荐

  1. 深入了解 Python MongoDB 操作：排序、删除、更新、结果限制全面解析

    Python MongoDB 排序 对结果进行排序 使用 sort() 方法对结果进行升序或降序排序. sort() 方法接受一个参数用于"字段名",一个参数用于"方向& ...

  2. Qt调用动态库的三种方式（linux）

    本文章主要记录Qt在linux电脑上调用so库的三种调用方式 方式一:静态加载so库 方式二:动态加载so库(QLibrary) 方式三:动态加载so库(dlopen)   其他: 封装的so库叫做: ...

  3. 【Java面试指北】单例模式

    单线程下的单例模式: public class Singleton { private static Singleton instance; private Singleton() {} public ...

  4. ArkUI框架，更懂程序员的UI信息语法

     原文:https://mp.weixin.qq.com/s/LQA6AYiG8O_AeGE1PZwxZg,点击链接查看更多技术内容.   ArkUI框架简化代码的"秘密" 在传统 ...

  5. android 当在github下载一个android项目后

    前言 github是一个很好的社区,有时候呢,我们从android下载项目下来无法build,有很多原因,比如说库不见了,或者说自己没有安装过支持的api版本等,会遇到各种问题. 在此总结一下. 问题 ...

  6. 重新整理.net core 计1400篇[七] (.net core 中的依赖注入)

    前言 请阅读第六篇,对于理解.net core 中的依赖注入很关键. 和我们上一篇不同的是,.net core服务注入保存在IServiceCollection 中,而将集合创建的依赖注入容器体现为I ...

  7. vue中img标签图片 加载时 与 加载失败 的处理方法

    开发过程中经常需要和图片处理打交道,看了网上很多有关图片处理的方法,都是讲解得一知半解,没有比较全面的总结.下面,将简单总结一个我们通过vue去处理img标签过程中,图片加载时,与图片加载失败时的处理 ...

  8. Tencent 闲聊对话机器人接口调用，画像：设计员小白

    from datetime import datetime import time import requests from hashlib import md5 from urllib import ...

  9. 对象数组(java)

    如果程序需要某个类的若干个对象,例如Student类的10个对象,显然如下声明10个Student对象是不可取的: Student stul, stu2, stu3, stu4, stu5, stu6 ...

  10. 揭秘sealer背后实现整个集群一键交付的奥秘 | 龙蜥技术

    ​简介:解读集群镜像"开箱即用"神器--sealer! 编者按:集群镜像把整个集群看成一台服务器,把 k8s 看成云操作系统,实现整个集群的镜像化打包和交付,为企业级软件提供一种& ...