HTML5 服务器发送事件(Server-Sent Events)

news/2024/11/15 8:29:38/
htmledit_views">

参考:HTML5 服务器发送事件(Server-Sent Events) | 菜鸟教程

一,sse介绍

Server-Sent 事件 - 单向消息传递

        Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

例子:Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。

项目目录:

二,服务端 main.py

        pip install flask

from flask import Flask, Response
import datetime
import timeapp = Flask(__name__)@app.route('/sse')
def send_server_time():def generate_server_time():while True:current_time = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')yield f"data: The server time is: {current_time}\n\n"# 按需调整刷新频率,这里每秒发送一次sleep_duration = 3  # Use a different variable name to avoid conflict with the 'time' moduletime.sleep(sleep_duration)'''配置响应内容类型、缓存控制及启动服务:
使用Response类包装生成器对象,指定mimetype为'text/event-stream',表示这是SSE响应。
添加响应头'Cache-Control': 'no-cache',防止浏览器缓存SSE消息。'''return Response(generate_server_time(), mimetype='text/event-stream',headers={'Cache-Control': 'no-cache','Access-Control-Allow-Origin': '*','Access-Control-Allow-Headers': 'Content-Type,Authorization','Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS'})if __name__ == '__main__':app.run(debug=False, port=5000)

三,web客户端 client.html

html"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title>
</head><body><h1>获取服务端更新数据</h1><div id="result"></div><script>// 检测服务器发送事件的浏览器支持情况:if (typeof (EventSource) !== "undefined") {const eventSource = new EventSource('http://127.0.0.1:5000/sse');eventSource.onmessage = function (event) {const data = event.data;console.log('Received server time:', data);// 在此处更新DOM或执行其他操作以展示收到的时间信息document.getElementById("result").innerHTML += event.data + "<br>";};eventSource.onerror = function (error) {console.error('Error occurred with EventSource:', error);};}else {document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 server-sent 事件...";}</script></body></html>

四,测试

       启动服务端项目:python main.py 

       同时打开多个浏览器client.html


http://www.ppmy.cn/news/1436674.html

相关文章

C++友元friend

简介&#xff1a;C友元的作用是让外部的对象&#xff08;全局函数、类、类成员函数&#xff09;能够访问到某个类里面的private修饰的数据&#xff0c;因此&#xff0c;必然是使用方法或者函数来操作数据。 1、全局函数做友元 使用全局函数做友元&#xff0c;函数接收一个对象&…

项目上线流程(保姆级教学)

01&#xff1a;注册阿里云账户 02&#xff1a;登录阿里云 03&#xff1a;在桌面新建记事本保存个人账号密码等信息 04&#xff1a;完成重置密码 05&#xff1a;安装宝塔面板 命令行 yum install -y wget && wget -O install.sh http://download.bt.cn/install/instal…

java可盈保险合同管理系统的设计与实现(springboot+mysql源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的可盈保险合同管理系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 基于Spring Boot的…

基于springboot+vue+Mysql的广场舞团管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

【Node.js从基础到高级运用】二十五、Node.js中Cluster的作用

引言 Node.js中的cluster模块允许您轻松创建共享服务器端口的子进程。这是一个核心模块&#xff0c;用于在Node.js应用程序中实现多进程架构&#xff0c;以充分利用多核CPU系统的计算能力。 cluster介绍 当您启动一个Node.js应用程序时&#xff0c;默认情况下它运行在单个进程…

Leaflet加载geowebcache的WMTS服务

方法1&#xff1a;leaflet.TileLayer.WMTS插件 插件地址https://github.com/alexandre-melard/leaflet.TileLayer.WMTS 用法示例https://hanbo.blog.csdn.net/article/details/80768710 我的示例代码 <!DOCTYPE html> <html lang"zh"> <head><…

浏览器打不开DevTools?

随笔记录下某网站禁止通过F12, CtrlShiftI等快捷键来打开开发者工具&#xff0c;其次通过浏览器宽高定时来重定向。 目标网站 aHR0cHM6Ly93d3cuemhpaHUuY29tL21hcmtldC9wYWlkX2NvbHVtbi8xNjkxOTY2MTg4MzY2ODYwMjg4L3NlY3Rpb24vMTc1MjcyNjI3MjMzMjIxMDE3Nw问题描述 当我们通过…

代码随想录-算法训练营day23【二叉树09:修剪二叉搜索树、将有序数组转换为二叉搜索树、把二叉搜索树转换为累加树】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第六章 二叉树part09今日内容&#xff1a;● 669. 修剪二叉搜索树 ● 108.将有序数组转换为二叉搜索树 ● 538.把二叉搜索树转换为累加树 ● 总结篇 详细布置 669. 修剪二叉搜索树 这道题目比较难&#xff0c;比 添…