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

最新推荐文章于 2024-05-22 19:54:16 发布
最新推荐文章于 2024-05-22 19:54:16 发布
阅读量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
    评论
专栏目录
Use EventSource Achieve Comet
ZD的博客
05-08 296
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...
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!
实时通信的服务器推送机制 EventSource(SSE) 简介，附 go 实现示例
DisMisPres的博客
05-07 1万+
是HTML5中一个强大的API，提供了简单可靠的服务器推送机制，用于实现实时通信。与WebSocket相比，的优势在于其简单易用、自动重连、轻量级和跨域支持。然而，它也有一些限制，如单向通信和较低的浏览器支持。相比之下，WebSocket适用于双向通信、大规模应用和实时性要求较高的场景，但其复杂性和穿越防火墙的挑战也需要考虑。总的来说，是一种非常有用的API，适用于许多实时应用场景，如实时股票报价、即时聊天、实时通知等。它提供了一种简单而可靠的方式来建立服务器推送连接，并实现实时更新和通知。
EventSource
最新发布
weixin_63681863的博客
05-22 1316
除了默认的message事件，你还可以监听自定义事件。服务器可以通过event字段来定义事件类型，客户端使用来监听。});
EventSource学习
qq_27561019的博客
06-14 5728
本文主要介绍了EventSource的基本概念、具体应用场景、优缺点以及使用方法。尽管EventSource在某些场景下可能存在一定的局限性，但它仍然是一种非常强大的前端Web API，能够实现实时、低延迟的数据传输，具备很好的兼容性和易用性。在实际应用中，需要针对具体的场景进行合理使用，从而发挥最大的效果。
vue使用EventSource
wusq的博客
11-18 8078
前后端分离项目，vue通过EventSource监听后台数据，并添加声音提示 完整代码(写在mounted)： const that = this if (typeof (EventSource) !== 'undefined') { var music = new Audio() music.src = require('@/assets/wav/notice-short....
了解JS三种实时通信方式——Eventsource、websocket与socket.io之间的差异和优缺点
weixin_42508580的博客
05-29 9951
它是 WebSockets 的替代方案，因为它比 WebSockets 更简单，更适合处理服务器向客户端发送数据的情况。是一种在单个 TCP 连接上提供全双工通信的协议，它使得客户端和服务器之间进行实时交互变得更加容易。它是一种标准化的通信协议，客户端和服务器都可以通过它发送消息。和其他实时通信协议，并提供了一组易于使用的 API。它既可以在客户端上使用，也可以在服务器端上使用，它还提供了许多高级功能，例如自动重连、心跳机制和房间等概念。，只有服务器能够发送消息，所以它更安全。
eventsource
qq_40519850的博客
06-14 6341
场景： 轮询的提代方案，相对于websocket，eventsource使用 HTTP 协议。 原理： 客户端get请求（不太清楚为啥只能get），服务端返回一个数据流
webSocket和EventSource的区别
世间万物皆不如你
07-07 1613
WebSocket和EventSource是两种在Web应用程序中用于实现实时通信的不同技术。WebSocket是一种双向通信协议，允许服务器与客户端建立持久性连接并通过该连接发送消息。而EventSource是一种服务器推送技术，只允许服务器向客户端发送消息，而不允许客户端向服务器发送消息。在下面的描述中，我将详细介绍WebSocket和EventSource的不同之处，并提供一些代码示例。
传统轮询,长轮询,EventSource与WebSocket
qq_37299525的博客
06-10 1273
。。
EventSource 引发的一系列事件
weixin_42439919的博客
04-28 4249
不同的是，服务端推送是单向的。大家好，我是江辰，最近小小的实现了下 chatGPT 的问答式回复，调研了前端如何实现这种问答式请求，有几种方案，Http、EventSource、WebSocket，三种实现方案各有优缺点，Http 和 WebSocket ，想必大家耳闻能详，这里我讲讲 EventSource。
vueuse常用hooks
Big_YiFeng的博客
04-24 904
vue 项目常用 hooks。
结合Server-sent events与 EventSource使用，实现服务端主动向客户端发送数据
woyebuzhidao321的博客
03-24 7138
长轮训虽然可以避免短轮训造成的服务端过载，但在服务端返回数据后仍需要客户端主动发起下一个长轮训请求，等待服务端响应，这样仍需要底层的连接建立而且服务端处理逻辑需要相应处理，不符合逻辑上的流程简单的服务端推送；websocket连接相对而言功能最强大，但是它对服务器的版本有要求，在可以使用websocket协议的服务器上尽量采用此种方式；
推荐：EventSource - 简化事件源管理
gitblog_00049的博客
03-17 471
推荐：EventSource - 简化事件源管理 EventSource 是一个开源的事件源管理和分发工具，它可以帮助开发者更轻松地创建、管理和维护事件源。 什么是 EventSource？ EventSource 是一个基于 Node.js 的库，它提供了一个简单、高效的 API 来处理服务器发送事件（Server-Sent Events，简称 SSE）和 WebSocket 连接。SSE 和 ...
EventSource前端使用（需要添加header等自定义配置）
热门推荐
微灬墨的博客
04-22 2万+
一、原生EventSource （一）定义： MDN详解:Web API 接口参考>EventSource （二）使用方式： const eventSource = new EventSource('/api/test'); // 正常的EventSource，我们只关心以下三个事件 /* * open：订阅成功（和后端连接成功） */ eventSource.addEventListener("open", function(e) { console.log('ope
EventSource实现服务端与客户端通信案例实战
qq_45774406的博客
05-11 1590
EventSource VS 轮询，EventSource的基本工作原理以及常用方法详解。 基于Vue+SpringBoot的实战案例。
EventSource服务端推送事件 以及EventSource代理配置
dongheng123的博客
06-12 1195
把报头 “Content-Type” 设置为 “text/event-stream”EventSource与websocket不同这个是单向的，服务端向客户端推送消息。这个东西的nginx代理如下。
EventSource(SSE) 实时通信的服务器推送机制
zhang_zan
02-22 1242
EventSource(SSE) 实时通信的服务器推送机制
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永久帧 他们之间的差异和...
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、付费专栏及课程。

余额充值