WEB通讯技术。前端实现SSE长连接,nodejs+express搭建简单服务器,进行接口调试,通过curl请求数据

news2024/12/23 5:32:30

描述

长连接(Keep-Alive)是一种HTTP/1.1的持久连接技术,它允许客户端和服务器在一次TCP连接上进行多个HTTP请求和响应,而不必为每个请求/响应建立和断开一个新的连接。长连接有助于减少服务器的负载和提高性能。

长连接的HTTP请求方法与普通HTTP请求方法相同,可以使用GET、POST、PUT、DELETE等HTTP请求方法。但是,在发送HTTP响应之前时,需要设置"Connection: keep-alive"请求头,以指示客户端希望与服务器建立长连接。服务器发送事件(Server-Sent Events,简称SSE)就是为了解决这个问题,而提出的一种新API,部署在EventSource对象上。目前,除了IE,其他主流浏览器都支持。而客户端(浏览器)是使用HTML5的EventSource。
SSE与WebSocket有相似功能,都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于:

  • WebSocket是全双工通道,可以双向通信,功能更强;SSE是单向通道,只能服务器向浏览器端发送。

  • WebSocket是一个新的协议,需要服务器端支持;SSE则是部署在HTTP协议之上的,现有的服务器软件都支持。

  • SSE是一个轻量级协议,相对简单;WebSocket是一种较重的协议,相对复杂。

  • SSE默认支持断线重连,WebSocket则需要额外部署。

  • SSE支持自定义发送的数据类型。

从上面的比较可以看出,两者各有特点,适合不同的场合。

客户端代码

建立连接

  • 首先,浏览器向服务器发起连接,生成一个EventSource的实例对象。
  • 新生成的EventSource实例对象,有一个readyState属性,表明连接所处的状态。

它可以取以下值:
0,相当于常量EventSource.CONNECTING,表示连接还未建立,或者连接断线。
1,相当于常量EventSource.OPEN,表示连接已经建立,可以接受数据。
2,相当于常量EventSource.CLOSED,表示连接已断,且不会重连。

open事件 连接一旦建立,就会触发open事件,可以定义相应的回调函数。

message事件 收到数据就会触发message事件。
参数对象event有如下属性:
data:服务器端传回的数据(文本格式)。
origin: 服务器端URL的域名部分,即协议、域名和端口。
lastEventId:数据的编号,由服务器端发送。如果没有编号,这个属性为空。

error事件 如果发生通信错误(比如连接中断),就会触发error事件。

let source = ''
 if (!!window.EventSource) {
    source = new EventSource('http://localhost:8088/sses/');
 }
 source.onopen = function(event) {
   // handle open event
   console.log(source.readyState);
   console.log("长连接打开");
 };
 source.onmessage = function(event) {
   console.log(event);
   console.log(JSON.parse(event.data));
   console.log(source.readyState);
   console.log("收到长连接信息");
 };
 source.onerror = function(event) {
   console.log(source.readyState);
   console.log("长连接中断");
   // source.close();
 };

在这里插入图片描述


设置SSE的请求头。

在使用 EventSource 对象时,可以设置请求头来指定一些额外的参数。这些参数通常用于告诉服务器如何处理 SSE 请求,或者用于进行身份验证等操作。
要设置请求头,可以在创建 EventSource 对象时传入一个配置对象,例如:

const eventSource = new EventSource('/sse', {
  withCredentials: true,
  headers: {
    'Authorization': 'Bearer xxxxx',
    'X-Custom-Header': 'value'
  }
});

在上面的代码中,我们设置了 withCredentials 参数为 true,表示 SSE 请求会携带跨域身份验证信息(如果有的话)。我们还设置了 Authorization 和 X-Custom-Header 两个请求头,分别用于传递身份验证令牌和自定义参数。

除了上面这些常用的请求头之外,还有一些其他的请求头可以使用,例如:

Last-Event-ID:用于指定上一次接收到的 SSE 事件的 ID,以便服务器可以发送新的事件。
Cache-Control:用于控制 SSE 请求的缓存策略。
Connection:用于指定 SSE 请求的连接类型,通常设置为 keep-alive。
Accept:用于指定客户端可以接受的 SSE 数据类型。
需要注意的是,并非所有的请求头都被所有浏览器和服务器支持。在使用时需要查看相关文档以确定是否可用。


  • withCredentials 是 XMLHttpRequest 对象的一个属性,用于指定跨域请求时是否携带身份验证信息(如 cookie、HTTP 认证等)。
  • 默认情况下,跨域请求不会携带身份验证信息,因为这可能会带来安全风险。但在某些情况下,我们需要在跨域请求中携带身份验证信息,例如向服务器发送用户认证凭证等。这时就可以通过设置 withCredentials 属性来让浏览器携带身份验证信息。
  • withCredentials 设置为 true 时,浏览器会在请求头中添加一个 Cookie 字段或者 Authorization 字段(如果使用 HTTP 认证)。这样服务器就可以识别当前请求的用户身份,并进行相应的处理。需要注意的是,如果服务器没有明确允许跨域请求携带身份验证信息,那么浏览器仍然不会发送身份验证信息。
  • 在 SSE 请求中,withCredentials 与 XMLHttpRequest 对象中的用法相同,用于指定 SSE 请求是否携带跨域身份验证信息。如果需要在 SSE 请求中携带身份验证信息,就需要将 withCredentials 设置为 true。

curl是一款常用的命令行工具

curl是一款常用的命令行工具,它支持多种协议,包括HTTP、HTTPS、FTP、SMTP等,可以用来发送HTTP请求、下载文件、上传文件等。curl可以在命令行中使用,也可以在脚本中作为库来使用。

使用curl,可以向服务器发送HTTP请求并接收响应,然后将响应内容显示在命令行中,或者将其保存到文件中。curl可以设置请求头、请求方法、请求体等HTTP请求参数,还支持代理、Cookie、SSL等特性。
在这里插入图片描述

以下是一个使用curl发送GET请求并保存响应内容到文件的示例:

curl -o response.txt https://example.com

nodejs服务端

const express = require('express');
const Aixpor = require("./options")
const app = express()
const port = 8088

//设置跨域访问
app.all("*", function(req, res, next) {
	//设置允许跨域的域名,*代表允许任意域名跨域
	res.header("Access-Control-Allow-Origin", req.headers.origin || '*');
	 // //只允许http://xxx.xx.xx/可跨
    //res.header('Access-Control-Allow-Origin', 'http://xxx.xx.xx/');
	//允许的header类型
	res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");
	//跨域允许的请求方式 
	res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
	// 可以带cookies
	res.header("Access-Control-Allow-Credentials", true);
	if (req.method == 'OPTIONS') {
		res.sendStatus(200);
	} else {
		next();
	}
})

app.listen(port, () => {
	console.log(`Example app listening at http://localhost:${port}`)
})

//实现接口
Aixpor.List(app);
Aixpor.Longstream(app);
//写个接口list
const List = function(app){
  var data = [{
		label: '早晨',
		value: '面条'
	},
	{
		label: '中午',
		value: '煎饼'
	}
];
  app.get('/list', function(req, res) {
    res.status(200);
    res.json(data);
  });
}

//长连接接口
const Longstream = function(app){
  var data = [{
		label: '早晨',
		value: '面条'
	},
	{
		label: '中午',
		value: '煎饼'
	}
  ];
  app.get('/sses', function(req, res) {
    res.set({
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    // 及时发送刷新响应头
    res.flushHeaders();
    setInterval(() => {
      const data = {
        message: `Current time is ${new Date().toLocaleTimeString()}`
      };
    res.write(`data: ${JSON.stringify(data)}\n\n`);
    }, 3000);  
  });
}
module.exports = {List,Longstream}

可以直接食用。

描述:res.flushHeaders()

在Node.js中,res.flushHeaders()是一个用于手动刷新HTTP响应头的方法。它通常在需要立即发送响应头而不等待响应体时使用。这在某些情况下是很有用的,比如在处理大文件下载或者流式传输时。

当Node.js收到HTTP请求时,它会自动为该请求创建一个响应对象res,该对象具有一些属性和方法,用于设置和发送HTTP响应。res.flushHeaders()方法会立即发送HTTP响应头给客户端,而不会等到整个响应体准备好后再发送。这样可以更快地向客户端发送响应头,并让客户端更早地知道响应的内容类型、长度等信息。

以下是一个使用res.flushHeaders()方法的示例,该示例通过流式传输发送一个大文件

const http = require('http');
const fs = require('fs');

http.createServer(function(req, res) {
  res.writeHead(200, {
    'Content-Type': 'application/octet-stream',
    'Content-Disposition': 'attachment; filename=largefile.dat'
  });

  const stream = fs.createReadStream('/path/to/largefile.dat');
  stream.pipe(res);

  // 刷新响应头
  res.flushHeaders();
}).listen(8080);

在上面的示例中,我们使用createReadStream()方法创建了一个可读流,并将其通过管道pipe()方法连接到res响应对象。在开始传输文件之前,我们调用了res.writeHead()方法设置了HTTP响应头,并在传输过程中调用res.flushHeaders()方法立即发送了HTTP响应头给客户端。这样,客户端就可以更快地知道文件类型和大小等信息,并开始下载文件。

更详细的就可以参考:SSE描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《Android性能优化》一次失败的启动速度优化

正文 在优化APP启动之前,我们首先需要知道,APP启动时究竟发生了什么,才能有的放矢的优化。 APP的启动过程 APP的启动过程就是指,在手机屏幕上点击某个APP的图标,到APP的首页显示在用户面前的过程。 一般APP的启动过…

Web自动化测试简介及web自动化测试实战交教程

一、认识web自动化测试 1.什么是自动化测试? 自动化测试的概念: 软件自动化测试就是通过测试工具或者其他手段,按照测试人员的预定计划对软件产品进行自动化测试,他是软件测试的一个重要组成部分,能够完成许多手工测试无法完成或…

Linux网络服务----ftp

文章目录 一 、什么是FTP1.1 Standard模式(主动模式)1.2 Passive模式(被动模式) 二 、FTP的作用及工作原理2.1 FTP的作用和模式以及通信方式2.2 FTP的工作原理 三、搭建和配置FTP服务3.1 设置匿名用户访问的FTP服务(最大权限)3.2 …

优化改进YOLOv5算法之添加Res2Net模块(超详细)

目录 1 Res2Net 2 YOLOv5中添加Res2Net block 2.1 common.py配置 2.2 yolo.py配置 2.3.3 创建添加Res2Net block模块的YOLOv5的yaml配置文件 1 Res2Net 关于代表性计算机视觉任务的进一步消融研究和实验结果,即目标检测,类激活 mapping和显著目标检…

设计模式:行为型模式 - 观察者模式

文章目录 1.概述2.结构3.案例实现4.优缺点5.使用场景6.JDK中提供的实现 1.概述 定义: 又被称为发布-订阅(Publish/Subscribe)模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对…

GEE:图像表达式计算——ee.Image.expression()详解

作者: _养乐多_ 在遥感图像处理和分析中,图像的表达式计算是一种常见的操作。利用 Google Earth Engine(GEE)平台的强大功能,可以方便地进行基于图像的表达式计算,从而实现对图像进行灵活、高效的处理和分析。 本文将介绍 GEE 平台中的 ee.Image.expression() 函数及其参…

Linux的虚拟地址空间与文件描述符

虚拟地址空间与文件描述符 虚拟地址空间文件描述符 虚拟地址空间 文件描述符

SAS学习第9章:卡方检验之适和性检验与独立性检验

卡方检验就是统计样本的实际观测值与理论推断值之间的偏离程度,实际观测值与理论推断值之间的偏离程度就决定卡方值的大小,如果卡方值越大,二者偏差程度越大;反之,二者偏差越小;若两个值完全相等时&#xf…

在Windows10中安装WSL2(Ubuntu 22.04.2 LTS)

WSL1 和 WSL2 WSL 1 于 2016 首次发布,在 windows 系统中可以使用linux系统。 但是WSL1的缺点有: 文件 I/O 慢,尤其是在大量IO操作时,例如使用 git 克隆仓库;不支持内核程序; WSL 2 针对以上两个缺点进…

C. Nauuo and Cards(思维)

Problem - C - Codeforces Nauuo是一个喜欢玩纸牌的女孩。 —天,她在玩纸牌时发现牌被混入了一些空牌。 这里有n张编号为1到n的牌,并且它们被混入另外n张空牌中。她把这2n张牌堆起来并且从中取出n张。给定N& uuo手中的n张牌和余下的n张牌(按照从上到…

3天学会Pytest自动化测试框架,哭着都要给我看完

目录 【前言】 【什么是pytest】 【pytest的特点】 【pytest的使用方法】 【附加内容】 【总结】 【前言】 在软件开发过程中,自动化测试是提高软件质量和效率的重要手段之一。pytest作为Python编写的自动化测试框架,具有简单易用、灵活性强等优点…

<Linux>POSIX信号量

目录 什么是信号量 如何理解信号量的使用 基于环形队列的生产消费者模型 如上问题我们如何用编码保证 ?(信号量) 编码: POSIX信号量和SystemV信号量作用相同,都是用于同步操作。POSIX可以用于线程同步。 信号量本质上就是一个计数器。 什…

TS数据类型

基本数据类型 null undefined number string boolean 对于基本数据类型,可以不写类型注解,ts能通过值来判断变量的类型 let nu null let un undefined let num 23 let str "sdfk" let isShow true引用数据类型 数组 写法1 let arr:…

iconik--AI智能媒体管理解决方案

ftrack于去年加入Backlight,旗下有Celtx, Iconik, Wildmoka, 和Zype。这些公司都为媒体、娱乐和视频领域的客户提供基于云的解决方案。 今天,我们就来隆重地介绍其中一款软件–iconik!谷歌、VICE媒体、亚马逊旗下米高梅、Complex Networks和S…

【C++初阶】C++入门

⭐博客主页:️CS semi主页 ⭐欢迎关注:点赞收藏留言 ⭐系列专栏:C初阶 ⭐代码仓库:C初阶 家人们更新不易,你们的点赞和关注对我而言十分重要,友友们麻烦多多点赞+关注,你们的支持是我…

GMW协议

概述 回顾混淆电路的流程,一方生成加密真值表,另一方执行计算,门电路的输入通过主动发送和不经意传输索取实现,用这样的方式来达到多方计算中一些公平性。 那么是否可以让双方拥有更加对等的地位,让每个参与方都持有一…

华为OD机试真题(Java),数组合并(100%通过+复盘思路)

一、题目描述 现在有多组整数数组,需要将他们合并成一个新的数组。 合并规则从每个数组里按顺序取出固定长度的内容,合并到新的数组,取完的内容会删除掉。 如果改行不足固定长度,或者已经为空,则直接取出剩余部分的内…

Numpy从入门到精通——Numpy运算符|批处理

这个专栏名为《Numpy从入门到精通》,顾名思义,是记录自己学习numpy的学习过程,也方便自己之后复盘!为深度学习的进一步学习奠定基础!希望能给大家带来帮助,爱睡觉的咋祝您生活愉快! 这一篇介绍《…

Android 项目编译 Gradle 配置说明

前言 Android 的Gradle版本更新换代还是很快的,更新换代除了功能上变得强大之外,还会出现很多意料之外的Bug,而很多开发者会被折磨的死去活来,下面我们来看有哪些编译配置。 正文 首先要知道什么时候会进行编译,有以下…

Efficient Attention: Attention with Linear Complexities

paper: https://arxiv.org/pdf/1812.01243.pdf 这里写目录标题 一、引言二、方法实现高效注意力的解释效率优势 三、实验消融插入层键的维度骨干架构 一、引言 注意机制在计算机视觉和自然语言处理中有着广泛的应用。最近的工作开发了点积注意力机制,并将其应用于…