使用EventSource实现页面消息推送 与 websocket 的区别





什么是EventSource

确切的说应该问什么是Server-Sent Events(简称SSE)?Wikipedia的介绍是这样的:

Server-sent events (SSE) is a technology where a browser receives automatic updates from a server via HTTP connection. The Server-Sent Events EventSource API is standardized as part of HTML5[1] by the W3C.大致翻译下就是:SSE是一种能让浏览器通过HTTP连接自动收到服务器端更新的技术,SSE EventSource 接口被W3C制定为HTML5的一部分。

W3C部分的链接可以看这个: EventSource

这个技术的作用是可以完成从服务器端到客户端(浏览器)单向的消息传送。因此我们可以用这个来做推送。不过需要注意的是,IE并不支持该技术。



这个技术相对于Websocket简单很多,但是SSE只是从服务器端往客户端单向传输数据,因此和websocket场景的应用场景还有些差别。

SSE使用起来也非常简单,比如我们的这个场景,把Terminal的输出重定向到web界面上。

虽然IE本身不支持,但是可以通过EventSource.js来实现兼容。




HTML5的Server-Sent Events介绍

      HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端。(通常叫数据推送)。我们来看下,传统的WEB应用程序通信时的简单时序图:

sse1

现在Web App中,大都有Ajax,是这样子:

sse2

基于数据推送是这样的,当数据源有新数据,它马上发送到客户端,不需要等待客户端请求。这些新数据可能是最新闻,最新股票行情,来自朋友的聊天信息,天气预报等。

sse3

      数据拉与推的功能是一样的,用户拿到新数据。但数据推送有一些优势。 你可能听说过Comet, Ajax推送, 反向Ajax, HTTP流,WebSockets与SSE是不同的技术。可能最大的优势是低延迟。SSE用于web应用程序刷新数据,不需要用户做任何动作。 


      你可能听说过HTML5的WebSockets,也能推送数据到客户端。WebSockets是实现服务端更加复杂的技术,但它是真的全双工socket, 服务端能推送数据到客户端,客户端也能推送数据回服务端。SSE工作于存在HTTP/HTTPS协议,支持代理服务器与认证技术。SSE是文本协议你能轻易的调试它。如果你需要发送大部二进制数据从服务端到客户端,WebSocket是更好的选择。

      让我们来看一下很简单示例,先是前端basic_sse.html:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Basic SSE Example</title>
  </head>
  <body>
    <pre id="x">Initializing...</pre>
    <script>
    var es = new EventSource("basic_sse.php");
    es.addEventListener("message", function(e){
      document.getElementById("x").innerHTML += "\n" + e.data;
      },false);
    </script>
  </body>
</html>

后端先是一个basic_sse.php页面:

<?php
header("Content-Type: text/event-stream");
while(true){
  echo "data:".date("Y-m-d H:i:s")."\n\n";
  @ob_flush();@flush();
  sleep(1);
  }
?>

您可以使用Apache Server 这里我们把它们放在SinaAppEngine上,浏览器FireFox访问basic_see.html时,将继续返回当前时间: 

sse4 
代码中数据格式是data: datetime.  在这儿,我们还可以使用Node.js来做服务端,datepush.js代码是这样的:

var http = require("http");
http.createServer(function(request, response){
  response.writeHead(200, { "Content-Type": "text/event-stream" });
  setInterval(function(){
    var content = "data:" +
      new Date().toISOString() + "\n\n";
    response.write(content);
    }, 1000);
  }).listen(1234);

完善一下功能,如果我们用Node.js来返回HTML,代码是这样的datepush.js:

var http = require("http"), fs = require("fs");
var port = parseInt( process.argv[2] || 1234 );
http.createServer(function(request, response){
  console.log("Client connected:" + request.url);
  if(request.url!="/sse"){
    fs.readFile("basic_sse.html", function(err,file){
      response.writeHead(200, { 'Content-Type': 'text/html' });
      var s = file.toString();  //file is a buffer
      s = s.replace("basic_sse.php","sse");
      response.end(s);
      });
    return;
    }
  //Below is to handle SSE request. It never returns.
  response.writeHead(200, { "Content-Type": "text/event-stream" });
  var timer = setInterval(function(){
    var content = "data:" + new Date().toISOString() + "\n\n";
    var b = response.write(content);
    if(!b)console.log("Data got queued in memory (content=" + content + ")");
    else console.log("Flushed! (content=" + content + ")");
    },1000);
  request.connection.on("close", function(){
    response.end();
    clearInterval(timer);
    console.log("Client closed connection. Aborting.");
    });
  }).listen(port);
console.log("Server running at http://localhost:" + port);

在控制台,运行 node datepush2.js,在浏览器中访问 http://127.0.0.1:1234/sse2 ,效果如下截图: 

sse5

 

假设您曾经有javascript编程经验,代码并不难看懂。前端是HTML5,后端可以是PHP, JSP, Node.js, Asp.net等应用。

Tips: 不所有浏览器都支持SSE,可以使用以下Javascript来判断:

if(typeof(EventSource)!=="undefined"){
   // Yes! Server-sent events support!
   }
 else{
   // Sorry! No server-sent events support in our system
   }
 
目前浏览器支持情况:

Browser

Supported

Notes

Internet Explorer

No

IE is not supported

Mozilla Firefox

Yes

Version 6.0

Google Chrome

Yes

GC is Supported

Opera

Yes

Version 11

Safari

Yes

Version 5.0


希望对您WEB应用程序开发有帮助。 


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/33478.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

知乎版ChatGPT「知海图AI」加入国产大模型乱斗,称效果与GPT-4持平

“2023知乎发现大会”上&#xff0c;知乎创始人、董事长兼CEO周源和知乎合作人、CTO李大海共同宣布了知乎与面壁智能联合发布“知海图AI”中文大模型。 周源据介绍&#xff0c;知乎与面壁智能达成深度合作&#xff0c;共同开发中文大模型产品并推进应用落地。目前&#xff0c;知…

微信小程序_实现markdown支持代码复制功能

文章目录 ⭐ 前言⭐ 复制代码功能实现基于towxml渲染markdown 定位h2w__code language-css 类名下是渲染的代码块查找样式的判断源码attr注入属性用来判断是否是代码块 code复制代码样式及事件绑定效果 ⭐ 结束 ⭐ 前言 大家好&#xff0c;我是yma16&#xff0c;不止前端&…

chatgpt赋能python:使用Python向微信发送信息的方法详解

使用Python向微信发送信息的方法详解 Python作为一种广泛应用于科学计算、数据处理等多个领域的编程语言&#xff0c;也可以用于自动化工作流程和自动发送微信消息等操作&#xff0c;大大提高了工作效率。如果你想在日常工作中用Python向微信群或个人发送自定义信息&#xff0…

AI绘画工具软件网站合集:这些人工智能绘画生成器效果太赞了

那么有哪些口碑比较高的文本转图片的AI绘图软件呢?本文将跟大家分享一波出图效果相当不错的人工智能绘画工具网站&#xff0c;让大家实现“绘画自由”。 一、Disco Diffusion 简介:这是一款最早流行起来的AI绘图工具&#xff0c;直接在谷歌云端运行的程序&#xff0c;对电脑配…

AI - stable-diffusion(AI绘画)的搭建与使用

最近 AI 火的一塌糊涂&#xff0c;除了 ChatGPT 以外&#xff0c;AI 绘画领域也有很大的进步&#xff0c;以下几张图片都是 AI 绘制的&#xff0c;你能看出来么&#xff1f; 一、环境搭建 上面的效果图其实是使用了开源的 AI 绘画项目 stable-diffusion 绘制的&#xff0c;这是…

【社区图书馆】读《一本书读懂AIGC:ChatGPT、AI绘画、智能文明与生产力变革》所感

文章目录 《一本书读懂AIGC&#xff1a;ChatGPT、AI绘画、智能文明与生产力变革》目录作者简介我的体会&#xff1a; AI带来的挑战和机遇是不可避免的 《一本书读懂AIGC&#xff1a;ChatGPT、AI绘画、智能文明与生产力变革》 作者&#xff1a;a15a 著 贾雪丽 0xAres 张炯 主编 …

WIN10下搭建vue开发环境

好记性不如烂笔头。 说明&#xff1a;下面任何命令都是在windows的命令行工具下进行输入&#xff0c;打开命令行工具的快捷方式如下图&#xff1a; 详细的安装步骤如下&#xff1a; 一、安装node.js 说明&#xff1a;安装node.js的windows版本后&#xff0c;会自动安装好n…

bugku——分析(流量分析)题解

目录 1&#xff0c;flag被盗 2&#xff0c;中国菜刀 3&#xff0c;这么多数据包 4&#xff0c;手机热点 5&#xff0c;抓到一只苍蝇 6&#xff0c;日志审计 7&#xff0c;weblogic 8&#xff0c;信息提取&#xff08;超详细&#xff09; 9&#xff0c;特殊后门 1&…

CTF 总结04:win11+冰蝎4.0.6安装[更新中]

问题描述 昨天在刷题的时候&#xff0c;发现可能需要下载冰蝎~ win11冰蝎4.0.6&#xff0c;本人安装的时候遇到了一些坑&#xff0c;所以在这里简单说一下~ 冰蝎简介 冰蝎是一个动态二进制加密网站管理客户端&#xff0c;它使用AES加密算法对流量进行加密&#xff0c;难以被…

微软宣布 AI 聊天机器人必应聊天已向所有人开放,使用方法说明

微软宣布 AI 聊天机器人必应聊天已向所有人开放&#xff0c;使用方法说明 先用chrome搜索必应的地址必应搜索&#xff0c;结果如下图所示&#xff1a; 点击了解详细信息&#xff0c;网页会跳转到微软新必应的介绍页面&#xff0c;如下所示&#xff1a; 到这里大家就应该知道怎…

人工智能实战项目(python)+多领域实战练手项目

人工智能实战项目 大家好&#xff0c;我是微学AI&#xff0c;本项目将围绕人工智能实战项目进行展开&#xff0c;紧密贴近生活&#xff0c;实战项目设计多个领域包括&#xff1a;金融、教育、医疗、地理、生物、人文、自然语言处理等&#xff1b;帮助各位读者结合机器学习与深…

chatgpt赋能Python-pythonheader

Python Header&#xff1a;为什么它对SEO很重要&#xff1f; 在网页开发和建立过程中&#xff0c;Python Header是一个非常重要的元素。Python Header是一个HTTP请求的部分&#xff0c;其中包含了对请求的描述&#xff0c;以及执行此请求所需的任何信息。因此&#xff0c;Pyth…

解决:闹钟设置的自定义歌曲响铃时不会播放仅震动【Apple Music】【iOS】

文章目录 1、问题描述2、解决策略3、Q&A4、感受5、Tips 1、问题描述 自带铃声和震动脑瓜子嗡嗡的&#xff0c;幸好有apple music&#xff0c;在闹钟中可以轻松地选择你放入资料库中的任意一首音乐作为铃声。 奇怪的是&#xff0c;闹钟响起&#xff0c;仅震动&#xff0c;没…

微信公众平台登陆小程序后,在 开发-开发者工具 下,找不到 腾讯云

新版的微信公众平台在 “开发”-“开发者工具”下面只有“腾讯位置服务”&#xff0c;并没有大家所说的腾讯云&#xff0c;没法开通腾讯云服务。根据官方所说是把入口隐藏起来了。 我找了好久终于找到怎么开通了&#xff1a; 先去腾讯云官网注册/登录&#xff0c;登录后左上角…

Web端实现定位(使用腾讯地图实现)

1、腾讯地图提供定位服务的API&#xff0c;官方网址&#xff1a; 点击打开链接 2、从腾讯地图API官网注册一个开发秘钥 3、根据官方文档引入js文件 <script type"text/javascript" src"https://3gimg.qq.com/lightmap/components/geolocation/geolocation.…

【腾讯云IM】即时通讯的登录,登出,用户列表,私聊,图片发送

uniapp即时通讯 1&#xff0c;初始化&#xff08;刚开始就紧跟着文档走&#xff09;2&#xff0c;App.vue中项目引入腾讯云&#xff0c;&#xff08;附上账号在其他地方登陆的监听&#xff09;3&#xff0c;登录前必需3.1&#xff0c;获取登录id3.2&#xff0c;生成userSig&…

腾讯云开发者平台

1.应用场景 轻量级代码托管产品, 2.学习/操作 2.1 介绍 官网: coding.net 腾讯云开发者平台是腾讯云与 CODING 共同为开发者打造的云端工具平台&#xff0c;旨在为更多的开发者带去便捷、高效的 开发体验&#xff0c;提供包括需求管理、代码编写、代码管理、代码运行的整套系…

上传图片到腾讯云(海外服务器)com.qcloud5.5.4版本

问题描述&#xff1a;上传图片至腾讯云服务器&#xff0c;存储桶Region一直在国内地址&#xff0c;访问正常的&#xff0c;新启一个项目&#xff0c;存储桶Region迁移到孟买ap-mumbai区域&#xff0c;出现上传不成功 问题原因&#xff1a; <dependency><groupId>…

微信小程序接入腾讯云实时音视频TRTC----基本使用

前言:虽然说的有点乱,我觉得有必要说一下什么是音视频与整体开发需要些什么东西,因为当时我也是不知道这是啥? .我的理解音视频就是类似微信视频通话的东西,以自己的角度来看,我与好友建立视频的步骤简单来讲就是我把我的视频信息推送到微信,微信处理发给我好友,然后我再将好友…

【新知实验室】手把手实现腾讯云音视频应用

腾讯云音视频是什么&#xff1f; 腾讯云音视频&#xff08;TRTC&#xff09;提供一站式视频解决方案&#xff0c;包括点播直播、实时视频通话、短视频等视频服务&#xff0c;广泛应用于在线视频、电商、游戏直播、在线教育等场景。实时音视频基于腾讯21年来在网络与音视频技术上…