SSE eventSource简介

最新推荐文章于 2024-07-16 08:59:30 发布
最新推荐文章于 2024-07-16 08:59:30 发布
阅读量359 收藏 2
点赞数
文章标签： 网络 javascript ViewUI
原文链接：https://segmentfault.com/a/1190000009276347
版权

eventSource简单介绍

eventSource是用来解决web上服务器端向客户端推送消息的问题的。不同于ajax轮询的复杂和websocket的资源占用过大，eventSource(sse)是一个轻量级的，易使用的消息推送api

如何使用

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        (function() {
            var source = new EventSource('/stream')
            source.onopen = function(event) {
                console.log(event)
            }

            source.onmessage = function(event) {
                console.log(event)
            }

            source.onerror = function(error) {
                console.log(error)
            }
        })()
    </script>
</body>
</html>

代码很简单，实例化api，监听事件

服务端nodejs代码

服务端这几种实现使用其一就可以了

var http = require("http")
var fs = require('fs')

http.createServer(function (req, res) {

    var fileName = "." + req.url;

    if (fileName === "./stream") {
        res.writeHead(200, {
            "Content-Type":"text/event-stream", 
            "Cache-Control":"no-cache", 
            "Connection":"keep-alive"
        });

        res.write("retry: 10000\n");
        res.write("event: connecttime\n");
        res.write("data: " + (new Date()) + "\n\n");
        res.write("data: " + (new Date()) + "\n\n");

        interval = setInterval(function() {
            res.write("data: " + (new Date()) + "\n\n");
        }, 1000);

        req.connection.addListener("close", function () {
            clearInterval(interval);
        }, false);
  } else {
      fs.readFile('./index.html', 'utf8',function(err, html) {
          if (err) {
              console.log(err)
              return
          }
          res.end(html)
      })

  }
}).listen(9999);

服务端expressjs代码

var express = require('express')
var fs = require('fs')
var app = express()

app.get('/stream', function(req, res) {
    console.log(111)

    res.writeHead(200, {
        "Content-Type":"text/event-stream", 
        "Cache-Control":"no-cache", 
        "Connection":"keep-alive"
    });

    res.write("retry: 10000\n");
    res.write("event: connecttime\n");
    res.write("data: " + (new Date()) + "\n\n");
    res.write("data: " + (new Date()) + "\n\n");

    interval = setInterval(function() {
        res.write("data: " + (new Date()) + "\n\n");
    }, 1000);

    req.connection.addListener("close", function () {
        clearInterval(interval);
    }, false);
})

app.use(function(req, res) {
    fs.readFile('./index.html', 'utf8',function(err, html) {
        if (err) {
            console.log(err)
            return
        }
        res.send(html)
    })
})

app.listen(9999, function(err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('listening on port 9999')
})

服务端koajs 1.x 代码

var koa = require('koa')
var fs = require('fs')
var PassThrough = require('stream').PassThrough

var app = koa()

app.use(function *() {
    var url = this.req.url
    if (url === '/stream') {
        var stream = new PassThrough()

        setInterval(function() {
            stream.write("data: " + (new Date()) + "\n\n")
        }, 1000);

        this.type = 'text/event-stream'
        this.body = stream
    } else {
        var html = yield koaFs
        this.body = html
    }
})

app.listen(9999, function(err) {
    if (err) {
        console.log(err)
        return 
    }
    console.log('listening on port 9999')
})

function koaFs(fn) {
    fs.readFile('./index.html', 'utf8', function(err, html) {
        fn(err, html)
    })
}

使用起来没什么问题，都可以正常运行，不过在多个客户端访问的时候，一个客户端连上之后，其他客户端就没有推送了，不知道为甚么？

「已注销」
关注
SSE EventSource
A secret makes a woman woman.
04-08 595
服务端事件EventSource揭秘SSE eventSource简单介绍20行代码写一个数据推送服务服务端推服务端推，指的是由服务器主动的向客户端发送消息（响应）。在应用层的HTTP协议实现中，“请求-响应”是一个round trip，它的起点来自客户端，因此在应用层之上无法实现简易的服务端推功能。当前解决服务端推送的方案有这几个：客户端长轮询websocket双向连接iframe永久帧长轮询虽...
php sse 长连接,SSE长连接 EventSource的实时输出
weixin_39996798的博客
03-27 1074
本SSE长连接实例，支持后台持续输出，直到脚本执行时间超时！基础SSE的详解可参考：http://www.cnblogs.com/goody9807/p/4257192.html#commentformlisten.php 代码Class Listen{public function common(){/*** @param $returnData [string] 返回的数据，对应d...
浅谈html5之sse服务器发送事件EventSource介绍
09-27
本篇文章主要介绍了浅谈html5之sse服务器发送事件EventSource介绍，具有一定的参考价值，有兴趣的可以了解一下
SSE（Server-Sent Events)请求之EventSource
study_way的博客
11-12 5489
最近有个需求有个搜索接口需要支持流式和静态两种方法，这个接口的查询时间可能很长，完全等结果出来再返回前端对于用户体验不好，于是就想实现持续性返回以提高用户体验。于是学习一下SSE。SSE 是指 Server-Sent Events（服务器推送事件），是一种基于 HTTP 的、服务器向客户端单向推送数据的技术。它允许服务器实时发送数据到客户端，而不需要客户端明确地请求。SSE 主要用于实现服务器向客户端的实时更新，比如新闻更新、股票报价、实时监控等场景。
SSE之EventSource学习
qq_44327851的博客
01-25 1439
使用EventSource非常简单，只需要在客户端创建一个新的EventSource对象，然后指定要连接的服务器端URL即可。一旦连接建立，服务器端发送的事件将会被自动接收并触发相应的事件处理函数。对象上，EventSource是一个用于接收服务器发送的事件流的API。它允许客户端通过HTTP连接订阅服务器端的事件，并在服务器端发送事件时接收到通知。参考与推荐： 更详细版本强烈推荐大家一定一定要阅读阮一峰大大的文章！SSE 的客户端 API 部署在。在这里想强调一下服务器的。中的第四点的event事件，
实时通信的服务器推送机制 EventSource(SSE) 简介，附 go 实现示例
热门推荐
DisMisPres的博客
05-07 1万+
是HTML5中一个强大的API，提供了简单可靠的服务器推送机制，用于实现实时通信。与WebSocket相比，的优势在于其简单易用、自动重连、轻量级和跨域支持。然而，它也有一些限制，如单向通信和较低的浏览器支持。相比之下，WebSocket适用于双向通信、大规模应用和实时性要求较高的场景，但其复杂性和穿越防火墙的挑战也需要考虑。总的来说，是一种非常有用的API，适用于许多实时应用场景，如实时股票报价、即时聊天、实时通知等。它提供了一种简单而可靠的方式来建立服务器推送连接，并实现实时更新和通知。
EventSource:服务器发送事件（SSE）的简单Swift客户端库
05-06
事件源 使用NSURLSession在Swift上编写的SSE客户端。 抽象的 这是文档之后在Swift上编写的EventSource实现。 如果有什么缺失或不完全... EventSource ，您可以EventSource调用disconnect() 。 EventSource不再存储Last
vue-sse:一个Vue插件，用于使用服务器发送的事件（EventSource）
04-27
npm install --save vue-sse # OR yarn yarn add vue-sse // in main.js import VueSSE from 'vue-sse' ; // using defaults Vue . use ( VueSSE ) ; // OR specify custom defaults (described below) Vue . use ...
sse-example:SSE 和 EventSource 的快速而肮脏的例子
06-27
**SSE（Server-Sent Events）与EventSource详解** SSE（Server-Sent Events）是一种从服务器向客户端实时推送数据的技术，它允许Web应用程序接收来自服务器的连续更新，而无需不断发送HTTP请求。与WebSocket不同，...
由Nginx支持的快速，水平可扩展的多进程发布/订阅队列服务器和HTTP，长轮询，Websockets和EventSource（SSE）的代理。-C/C++开发
05-26
https://nchan.slact.net Nchan是现代Web的可伸缩，灵活的发布/订阅服务器，作为Nginx Web服务器的模块而构建。 它可以配置为独立服务器，也可以配置为应用程序与数百个服务器之间的中介服务器。...
koa-sse：koa sse（服务器端事件）中间件
02-18
koa-sse流 koa sse（服务器端事件）中间件，使用流编程模型 安装 npm install-保存koa-sse-stream 用法 const Koa = require ( 'koa' ) ; const compress = require ( 'koa-compress' ) ; const sse = require ( 'koa-sse-stream' ) ; const app = new Koa ( ) ; // !!attention : if you use compress, sse must use after compress app . use ( compress ( ) ) /** * koa sse middleware * @param { Object } opts * @param { Number } opts.maxClients
express-eventsource:ExpressJS的服务器发送事件中间件
05-20
Express EventSource 这个快速模块创建了一个简单的服务器发送的事件室。 安装 $ npm install express-eventsource 例子 var express = require ( 'express' ) ; var eventsource = require ( 'express-eventsource' ) ; var sse = eventsource ( { connections : 2 } ) ; var broadcast = sse . sender ( 'foo' ) ; var app = express ( ) . use ( sse . middleware ( ) ) . listen ( 3000 ) ; setInterval ( function ( ) { broadcast ( { bar : 'b
EventSource
weixin_63681863的博客
05-22 3245
除了默认的message事件，你还可以监听自定义事件。服务器可以通过event字段来定义事件类型，客户端使用来监听。});
了解html5之sse服务器发送事件EventSource
found的专栏
04-15 892
由于有一个需求，需要把一些统计数据实时显示在web上，不需要考虑浏览器兼容性。找了一圈之后，有客户端轮询式的ajax，有高大上的websocket，html5的SSE（SERVER-SENT EVENTS 服务端发送事件）感觉实现起来比较简单。 首先找到了这篇文章《PUSHING UPDATES TO THE WEB PAGE WITH HTML5 SERVER-SENT EVENTS》，根着它...
Web实时通信的学习之旅：SSE（Server-Sent Events）的技术详解及简单示例演示
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-25 8851
服务器向浏览器推送信息，除了 WebSocket，还有一种方法：Server-Sent Events（以下简称 SSE）。SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
Server-sent events（SSE）& EventSource 客户端使用与服务器基础实现（基于Node.js）
Naisu的各种笔记
10-26 4835
文章目录目的总结 目的 总结
Vue+（SSE）EventSource实现流式输出
最新发布
qq_51201589的博客
07-16 2094
ai一键获取数据，fetch-event-source实现流式输出
Android消息推送 SSE（Server-Sent Events）方案实践
YangLe
01-24 3093
最近公司项目用到了消息推送功能，在技术选型的时候想要找一个轻量级的方案，偶然看到一篇文章讲ChatGPT的对话机制是基于SSE来实现的，但是这种协议是基于Web的，客户端能不能用呢，搜索一番发现老朋友OkHttp已经贴心的准备好了一个SSE依赖库，于是便有了这篇文章。简单介绍下SSE协议，全称Server-Sent Events，2008年首次出现在HTML5规范中，在2014年随着HTML5被W3C推荐为标准，SSE也登上了舞台。
分享一个让 uniapp 微信小程序支持 EventSource 的方法
qq_26450889的博客
02-29 2439
然而，根据现有的信息，uni-app并没有直接支持EventSource，这意味着开发者需要寻找其他技术或替代方案来实现类似的效果。尽管有些主流浏览器支持SSE，但小程序目前还不能兼容这个API，这可能是由于微信平台对新技术的兼容性考虑或是开发生态的限制。EventSource（SSE）是一种HTML5标准，旨在提供一种方式来在Web应用中实现异步通信和事件处理。
SSE长连接 EventSource的实时输出
05-25
SSE (Server-Sent Events) 是一种用于实现服务器向客户端推送实时数据的技术，它基于HTTP协议，使用长连接来保持客户端和服务器之间的通信，并且服务器可以随时向客户端推送数据。 EventSource 是一个 JavaScript API，用于接收 SSE 服务器端推送的数据，并将其呈现给用户。使用 EventSource API，可以在客户端创建一个 SSE 连接，并监听服务器端推送的事件。当服务器端有新数据时，EventSource 会自动接收并触发相应的事件，从而实现实时输出。 以下是 SSE 和 EventSource 的使用示例： 1. 服务器端： ```python from flask import Flask, Response app = Flask(__name__) @app.route('/stream') def stream(): def event_stream(): for i in range(10): yield 'data: %s\n\n' % i return Response(event_stream(), mimetype="text/event-stream") ``` 2. 客户端： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SSE Demo</title> </head> <body> <ul id="msg-list"> </ul> <script> var source = new EventSource("/stream"); source.onmessage = function(event) { var node = document.createElement("LI"); var textnode = document.createTextNode(event.data); node.appendChild(textnode); document.getElementById("msg-list").appendChild(node); }; </script> </body> </html> ``` 在上述示例中，服务器端使用 Flask 框架创建一个 SSE 连接，每隔一秒钟推送一个数据，客户端使用 EventSource API 创建一个 SSE 连接，并监听服务器端推送的数据，将数据添加到页面上的列表中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值