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

最新推荐文章于 2024-05-11 19:59:39 发布
最新推荐文章于 2024-05-11 19:59:39 发布
阅读量2.3w 收藏 7
点赞数 5
分类专栏： websocket browser_webki_blink
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bamboolsu/article/details/48653317
版权





什么是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(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应用程序开发有帮助。 


bamboolsu
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
eventsource:用于EventSource浏览器API的Rust客户端
05-19
事件源 EventSource是一个Rust库，用于从服务器发送的事件端点读取。 它透明地发送HTTP请求，并且仅向用户公开事件流。 它处理text/event-stream数据格式的自动重新连接和解析。 例子 use eventsource :: reqwest :: Client; use reqwest :: Url; fn main () { let client = Client :: new (Url :: parse ( "http://example.com" ). unwrap ()); for event in client { println!
websoket和eventSource
liusixsixsix的博客
07-18 671
http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html 阮一峰 Server-Sent Events 教程 1、了解服务器向客户端推送数据的方式 服务端推，指的是由服务器主动的向客户端发送消息（响应）。 当前解决服务端推送的方案有这几个： a、客户端长轮询 b、websocket双向连接 c、iframe永久帧 他们之间的差异和...
EventSource实现服务端与客户端通信案例实战
最新发布
qq_45774406的博客
05-11 1615
EventSource VS 轮询，EventSource的基本工作原理以及常用方法详解。 基于Vue+SpringBoot的实战案例。
webSocket和EventSource的区别
世间万物皆不如你
07-07 1617
WebSocket和EventSource是两种在Web应用程序中用于实现实时通信的不同技术。WebSocket是一种双向通信协议，允许服务器与客户端建立持久性连接并通过该连接发送消息。而EventSource是一种服务器推送技术，只允许服务器向客户端发送消息，而不允许客户端向服务器发送消息。在下面的描述中，我将详细介绍WebSocket和EventSource的不同之处，并提供一些代码示例。
传统轮询,长轮询,EventSource与WebSocket
CSDN文章已停止维护，后续文章会在 https://blog.hufeifei.cn 持续更新
09-27 6422
转载自：http://blog.zhangruipeng.me/2015/10/22/Web-Connectivity/ 构建网络应用的过程中，我们经常需要与服务器进行持续的通讯以保持双方信息的同步。通常这种持久通讯在不刷新页面的情况下进行，消耗一定的内存资源常驻后台，并且对于用户不可见。本文将简要介绍Web通信中常用的四种方式。 传统轮询(Traditional Polling)...
浅析HTML5的WebSocket与服务器推送事件
09-28
服务器推送事件（Server-Sent Events，SSE）是另一种实现服务器向客户端实时推送信息的技术。与WebSocket不同，SSE使用HTTP持久连接，不需要创建新的协议。在HTML中，通过`<eventsource>`元素来监听服务器推送的事件...
使用sse服务推送消息案例代码
11-19
4. **JavaScript实现**：在客户端，我们需要使用JavaScript创建一个EventSource对象，连接到服务器的SSE端点，并监听`message`事件来接收和处理推送的消息。例如： ```javascript var source = new EventSource('...
详解spring boot实现websocket
08-30
WebSocket 是一种实时通信技术，允许服务器主动向客户端推送数据，减少了客户端的请求数量和服务器的负载。Spring Boot 提供了对 WebSocket 的支持，通过引入 spring-boot-starter-websocket 依赖项，可以快速实现 ...
Backbone.SSE:骨干模型的EventSource实现
05-24
**Backbone.SSE: 骨干模型的EventSource实现** 在Web开发中，实时通信是许多现代应用程序的关键特性，使用户能够实时获取更新而无需手动刷新页面。Backbone.js是一个轻量级的JavaScript库，它为构建复杂、数据驱动...
php-sse:一个简单高效的库通过PHP实现HTML5的服务器发送的事件，用于将事件从服务器实时推送到客户端，比Websocket更容易，而不是AJAX请求
05-07
一个简单高效的库通过PHP实现了HTML5的服务器发送的事件，用于将事件从服务器实时推送到客户端，并且比Websocket更容易，而不是AJAX请求。 要求 PHP 5.4或更高版本 通过Composer（ ）安装 composer require " hhxsv5...
react-use-event-source-ts:该项目已移至@ react-nanouse-event-source
05-24
不推荐使用 警告：该项目已移至 React使用事件源 一个轻量级的EventSource（服务器发送事件）钩子，用于以TypeScript编写的react。 为什么要使用这个钩子？ 非常轻巧（有关最新尺寸，请参阅上面的徽章）。 灵活且简单易用。 用TypeScript编写 仅具有一个必需的对等依赖项：React 16.8.0或更高版本。 自由许可证： 当心：此工作正在进行中。 API可能会更改。 通过NPM安装 npm i react-use-event-source-ts 该库作为es2015模块提供。 要在浏览器中使用它们，您可能必须使用webpack或类似的东西来转换它们，而您可能已经这样做了。 例子 普通React import { useEventSource , useEventSourceListener } from "react-use-event-sou
@1 Event Publisher-开源
04-24
通过SSI在您的网页上发布事件。 活动可以由管理员或访问者发布（尚待管理员批准）。 更多..... www.upoint.info/cgi
Use EventSource Achieve Comet
ZD的博客
05-08 297
Firstly introduce the HTML5 API:        The EventSource interface is web content's interface to server-sent events. An EventSource instance opens a persistent connection to an HTTP server, which sends...
利用WebSocket和EventSource实现服务端推送
唐唐唐行的博客
03-30 1478
Websocket、Eventsource
WebSocket、event-source、AJAX轮询 等实现保持前后端实时通信的方式
hl199626的博客
06-27 229
实现保持前后端实时通信的方式这几种方式的优缺点1.WebSocket2. server-sent-event（event-source）3. AJAX轮询4.Flash Socket5. 永久帧（ forever iframe）综合兼容性和用户体验的问题，我在项目中选用了WebSocket ->server-sent-event -> AJAX轮询这三种方式做从上到下的兼容（以上来源网络，仅供学习参考）...
EventSource(SSE) 实时通信的服务器推送机制
zhang_zan
02-22 1243
EventSource(SSE) 实时通信的服务器推送机制
eventsource
qq_40519850的博客
06-14 6342
场景： 轮询的提代方案，相对于websocket，eventsource使用 HTTP 协议。 原理： 客户端get请求（不太清楚为啥只能get），服务端返回一个数据流
websocket 和 eventsource 的区别和应用
qq_17335549的博客
04-17 916
先从语法方面说，再从特性方面说，再说应用场景。
js websocket推送音频的方法
06-03
要使用WebSocket推送音频，可以按照以下步骤进行： 1. 在前端创建WebSocket对象，并连接到后端WebSocket服务器。 ```javascript var ws = new WebSocket('ws://localhost:8000'); ``` 2. 在前端使用getUserMedia API获取用户的音频流，并发送到后端WebSocket服务器。 ```javascript navigator.mediaDevices.getUserMedia({audio: true}) .then(function(stream) { var audioCtx = new AudioContext(); var source = audioCtx.createMediaStreamSource(stream); var processor = audioCtx.createScriptProcessor(4096, 1, 1); source.connect(processor); processor.connect(audioCtx.destination); processor.onaudioprocess = function(event) { var data = event.inputBuffer.getChannelData(0); ws.send(data); }; }) .catch(function(error) { console.log(error); }); ``` 3. 在后端WebSocket服务器接收前端发送的音频流，并进行处理。 ```javascript const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8000 }); wss.on('connection', function connection(ws) { ws.on('message', function incoming(data) { // 处理音频数据 }); }); ``` 在这个例子中，我们使用了Web Audio API中的AudioContext和ScriptProcessor节点来获取音频流，并将每个音频帧的数据通过WebSocket发送到后端。在后端，我们使用WebSocket服务器来接收前端发送的音频流，并进行处理。 需要注意的是，这个例子只是一个简单的演示，实际的应用中需要考虑音频编码、帧同步等问题，以确保音频的质量和实时性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值