当前位置: 首页 > news >正文

关于sse、websocket与流式渲染

一、SSE是什么?

网络中的 SSE (Server-Sent Events) 是一种服务器向浏览器单向推送数据的机制,常用于需要实时更新的数据传输,如新闻推送、股票行情、聊天应用等。


SSE 的特点

  1. 单向通信:服务器向客户端推送数据,但客户端无法直接通过 SSE 发消息给服务器(客户端可通过其他方式如 HTTP 请求与服务器通信)。
  2. 基于 HTTP/1.1:SSE 使用 HTTP 协议传输,和普通 HTTP 请求兼容,不需要 WebSocket 的复杂握手过程。
  3. 自动重连:如果连接中断,SSE 会自动尝试重新连接。
  4. 文本传输:SSE 主要用于传输文本数据,传输的数据格式通常为 UTF-8。

SSE 的实现示例

1. 服务器端 (Node.js 示例)
const http = require('http');http.createServer((req, res) => {if (req.url === '/events') {res.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache','Connection': 'keep-alive',});setInterval(() => {res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);}, 1000);}
}).listen(3000, () => console.log('SSE server running on http://localhost:3000'));
2. 客户端 (HTML + JavaScript 示例)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SSE Demo</title>
</head>
<body><h1>Server-Sent Events Demo</h1><div id="messages"></div><script>const eventSource = new EventSource('/events');eventSource.onmessage = (event) => {const messages = document.getElementById('messages');messages.innerHTML += `<p>${event.data}</p>`;};eventSource.onerror = () => {console.error('Connection lost, retrying...');};</script>
</body>
</html>

SSE 与 WebSocket 的对比

特点SSEWebSocket
通信方向单向(服务器 → 客户端)双向(服务器 ↔ 客户端)
协议HTTP/1.1自定义 WebSocket 协议
数据格式文本(UTF-8)文本和二进制
适用场景实时推送但不需要双向通信的数据实时交互、需要双向通信的场景
连接复杂度简单,基于 HTTP 请求复杂,需要握手过程

SSE 的适用场景

  • 新闻推送:如订阅新闻源的实时更新。
  • 股票市场数据:实时行情推送。
  • 实时通知系统:如 Web 上的通知或警报系统。
  • 在线聊天(简单版):单向消息传递,如聊天消息广播。

SSE 提供了一种轻量级解决方案,用于在某些应用场景下替代 WebSocket,特别是当仅需单向数据流时。

二、服务端推送的数据格式是什么样的?

Server-Sent Events (SSE) 中,服务器推送的数据格式是基于 文本格式 的特殊结构,每条消息由若干字段组成,每个字段通过换行符(\n)分隔。服务器将这些数据连续传输给客户端,以下是常用的 SSE 数据格式结构


SSE 消息格式

SSE 消息的格式遵循以下结构:

data: <消息数据>
id: <消息ID>
event: <事件类型>
retry: <自动重连时间>
  • 每条消息之间需要使用 两个换行符\n\n)分隔。
  • id 字段用于标记消息的 ID,便于客户端追踪和在重连时获取丢失的消息。
  • data 是消息的主要内容,支持多行数据。
  • event 用于标记事件类型(可选),客户端可基于不同事件类型处理消息。
  • retry 指定客户端断开连接后的重连间隔(以毫秒为单位),可选。

示例消息

data: Hello, World!
id: 1
event: message
retry: 3000data: {"temperature": 25, "humidity": 60}
id: 2data: 这是第二条消息
id: 3

上述消息发送了三次推送:

  1. 第一条为事件类型 message,数据为 “Hello, World!”。
  2. 第二条为 JSON 格式的天气数据。
  3. 第三条是中文文本。

服务端响应完整示例

服务器端的响应头必须设置正确的 MIME 类型,以确保客户端能够正确解析 SSE 流。

示例响应头
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
示例数据流
data: Server time: 2024-10-24 14:00:00
id: 101data: New stock price: AAPL 180.55
id: 102event: customEvent
data: Custom event message
id: 103retry: 5000
  • 第一条推送显示服务器的时间。
  • 第二条推送为股票价格更新。
  • 第三条定义了一个自定义事件 customEvent
  • retry: 5000 指定客户端在断开连接时应每 5 秒尝试重连。

客户端接收数据的示例

event.data 是每个数据流的数据,而非完整的
每次服务端发送一条消息时,EventSource 会触发 onmessage 事件,其中包含一条新的数据。

const eventSource = new EventSource('/events');// 默认消息事件处理
eventSource.onmessage = (event) => {console.log('Message:', event.data);
};// 处理自定义事件
eventSource.addEventListener('customEvent', (event) => {console.log('Custom Event:', event.data);
});// 错误处理
eventSource.onerror = () => {console.error('Connection error, trying to reconnect...');
};

总结

在 SSE 中,服务端的数据格式必须是 纯文本流,并且按照规范使用 dataidevent 等字段。每条消息以两个换行符(\n\n)分隔,确保客户端能正确解析与展示。同时,SSE 的格式简单而有效,适合需要实时数据推送但不需要复杂双向通信的场景。

三、前端如何处理一段一段的数据?

SSE(Server-Sent Events) 中,服务端会将数据以一段段的方式持续推送给客户端。前端需要通过事件监听器处理这些消息,将数据进行逐条接收和展示。以下是如何在前端处理 SSE 分段数据 的详细步骤。


前端处理 SSE 分段数据的步骤

  1. 使用 EventSource 创建 SSE 连接
  2. 监听不同类型的事件(默认 message 事件或自定义事件)。
  3. 累积或逐步更新数据(如拼接消息、实时更新 UI)。
  4. 错误处理:保证连接断开时能够重连。

基本代码示例

// 1. 创建 SSE 连接
const eventSource = new EventSource('/events');// 2. 默认消息处理:逐条接收并展示
eventSource.onmessage = (event) => {console.log('Received message:', event.data);appendDataToUI(event.data);  // 自定义逻辑将数据展示到页面
};// 3. 监听自定义事件
eventSource.addEventListener('customEvent', (event) => {console.log('Custom Event:', event.data);
});// 4. 错误处理:如断开连接时自动尝试重连
eventSource.onerror = (error) => {console.error('Connection lost, retrying...', error);
};// 5. 自定义函数:将数据添加到页面
function appendDataToUI(data) {const messagesDiv = document.getElementById('messages');const newMessage = document.createElement('p');newMessage.textContent = data;messagesDiv.appendChild(newMessage);
}

展示逐条消息

HTML 页面结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SSE Example</title>
</head>
<body><h1>SSE Data Stream</h1><div id="messages"></div><script src="sse-handler.js"></script> <!-- 引入前端逻辑 -->
</body>
</html>

如何处理分段数据

方案 1:逐条处理和展示

每当服务器发送一条消息时,客户端就将它添加到页面中。

eventSource.onmessage = (event) => {appendDataToUI(event.data);  // 实时将数据展示
};
方案 2:拼接消息(累积数据流)

如果服务端的消息是分段发送的,需要客户端在完整接收后进行拼接。例如,假设服务端每次发送数据的一部分:

let accumulatedData = '';  // 用于拼接的全局变量eventSource.onmessage = (event) => {accumulatedData += event.data;  // 累积数据if (event.data.endsWith('[END]')) {  // 判断是否为完整数据appendDataToUI(accumulatedData);accumulatedData = '';  // 重置累积数据}
};

处理 JSON 数据

如果服务端推送的是 JSON 数据,需要在前端解析后展示:

eventSource.onmessage = (event) => {try {const jsonData = JSON.parse(event.data);console.log('JSON Data:', jsonData);appendDataToUI(`User: ${jsonData.user}, Message: ${jsonData.message}`);} catch (error) {console.error('Invalid JSON:', event.data);}
};

处理自定义事件的场景

服务端发送不同类型的事件时,可以在前端通过 addEventListener 针对不同事件分别处理:

eventSource.addEventListener('news', (event) => {console.log('News:', event.data);appendDataToUI(`News: ${event.data}`);
});eventSource.addEventListener('alert', (event) => {console.log('Alert:', event.data);alert(`Alert: ${event.data}`);
});

总结

  • SSE 前端处理 中,核心是通过 EventSource 持续接收服务器推送的消息,并根据需要逐条或累积处理数据。
  • 可以监听默认事件(message)和自定义事件。
  • 拼接数据 时要确保能正确判断数据结束标志,避免数据错乱。
  • 通过 JSON 解析 支持复杂数据格式。

SSE 适合实时消息展示和数据推送的场景,例如聊天应用、新闻推送等。这个方案相比 WebSocket 更轻量,适合单向数据流的需求。

四、如何实现实时渲染

要在前端实现实时渲染 SSE 推送的数据,可以将数据一边接收一边更新到页面中。具体实现方式依赖于 HTML 和 JavaScript,通过 DOM 操作 动态将数据插入到页面,并确保界面流畅地显示最新内容。


SSE 实时渲染步骤

  1. 接收服务端的推送数据:使用 EventSource 监听不同事件。
  2. 更新 UI:接收数据后,立即更新页面元素(如消息列表)。
  3. 优化性能:对于频繁更新的情况,可以使用节流虚拟列表技术,保证性能不受影响。

基础实现:实时渲染数据

HTML 结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Real-time SSE Rendering</title><style>#messages {max-height: 300px;overflow-y: auto;border: 1px solid #ccc;padding: 10px;}p {margin: 5px 0;}</style>
</head>
<body><h1>Real-time Messages</h1><div id="messages"></div><script src="script.js"></script> <!-- 引入 JavaScript -->
</body>
</html>

JavaScript 实现:实时接收和渲染
// 创建 SSE 连接
const eventSource = new EventSource('/events');// 获取 DOM 元素
const messagesDiv = document.getElementById('messages');// 处理服务端默认推送的 message 事件
eventSource.onmessage = (event) => {renderMessage(event.data);
};// 将消息渲染到页面
function renderMessage(message) {const newMessage = document.createElement('p');newMessage.textContent = message;messagesDiv.appendChild(newMessage);// 保持滚动条在底部(自动滚动)messagesDiv.scrollTop = messagesDiv.scrollHeight;
}// 错误处理:连接丢失时显示提示
eventSource.onerror = () => {renderMessage('Connection lost. Reconnecting...');
};

效果:

  1. 每当服务器推送新消息时,onmessage 会捕获并调用 renderMessage() 方法,将消息插入页面。
  2. 自动滚动到页面底部:当消息增加超出容器高度时,scrollTop 确保用户总是看到最新消息。

性能优化:节流处理

如果数据推送频率较高,直接更新 DOM 可能导致性能问题。可以使用节流(throttling),限制每秒的渲染次数。

let lastRenderTime = 0;function throttledRenderMessage(message) {const now = Date.now();if (now - lastRenderTime > 100) { // 限制每100ms渲染一次renderMessage(message);lastRenderTime = now;}
}eventSource.onmessage = (event) => {throttledRenderMessage(event.data);
};

优化方式:虚拟列表(Virtual List)

当消息数据量非常大时,可以使用虚拟列表技术,只渲染可见区域内的数据。可以借助第三方库(如 react-windowvirtual-scroller)或自己实现。


总结

通过上述代码,你可以实现基于 SSE 的实时数据渲染:

  • 使用 EventSource 持续接收服务端推送的数据。
  • 动态更新 DOM,让页面实时显示最新内容。
  • 使用 自动滚动 让用户始终看到最新消息。
  • 针对高频数据,可以使用 节流虚拟列表 优化性能。

这种方式非常适合聊天应用、实时新闻推送或日志监控系统的前端实现。

五、event.data

onmessage 是如何工作的?

  1. 长连接EventSource 使用 HTTP 长连接,服务器在连接建立后不断推送数据给客户端,而无需客户端频繁发起新的请求。
  2. 实时监听onmessage 事件会在服务器推送 每一条新消息 时被触发,将当前这条消息的数据传递给客户端。
  3. 增量推送:每次推送的数据独立存在,并不会覆盖之前的数据,而是逐条接收。

工作机制示例

服务端推送(SSE)数据格式:
data: {"temperature": 25, "unit": "C"}
id: 1data: {"temperature": 26, "unit": "C"}
id: 2data: {"message": "System OK"}
id: 3
前端监听新数据:
// 建立 SSE 连接
const eventSource = new EventSource('/events');// 每当服务器推送一条新数据时,onmessage 就会触发
eventSource.onmessage = (event) => {console.log('Received new data:', event.data);  // 打印当前推送的数据processData(event.data);  // 处理新数据
};// 自定义数据处理逻辑
function processData(data) {const parsedData = JSON.parse(data);console.log('Parsed Data:', parsedData);// 在页面中展示数据或加入队列等操作
}

逐条处理新数据

每当服务器推送一条新数据时:

  • onmessage 会自动触发,并返回当前这条推送的数据
  • 这是一种流式处理,即:每次推送的新数据都是单独处理的,不会覆盖或与之前的数据混合。

EventSource 数据流的特点

  1. 数据流EventSource实时监听数据流变化,服务器每次发送新数据时,客户端会立即捕获。
  2. 自动重连:如果连接中断(如网络波动),EventSource 会尝试自动重连,并从最后的消息 ID 开始接收。
  3. 顺序保证EventSource 保证了数据的顺序性,确保客户端按服务端的发送顺序接收数据。

如何判断每条数据是否完整?

在某些情况下,如果数据分片发送(比如需要多个部分组合成一条完整消息),可以使用结束标识(如 [END])来判断:

示例:拼接分片数据
let accumulatedData = '';eventSource.onmessage = (event) => {accumulatedData += event.data;  // 累积数据片段if (event.data.endsWith('[END]')) {console.log('Complete Data:', accumulatedData);processData(accumulatedData);accumulatedData = '';  // 重置累积数据}
};

总结

  • onmessage 会在每次服务器推送一条新数据时被触发,event.data 包含这条消息的内容。
  • 数据流监听是实时的,客户端可以逐条接收并处理新数据。
  • 数据不会被覆盖,而是按服务端发送的顺序逐条接收。
  • 可以根据需要对高频数据进行拼接、节流或批量处理,保证页面的性能和用户体验。

EventSource 是一种非常适合实时数据推送(如聊天、日志、监控等)的轻量级方案。

相关文章:

关于sse、websocket与流式渲染

一、SSE是什么&#xff1f; 网络中的 SSE (Server-Sent Events) 是一种服务器向浏览器单向推送数据的机制&#xff0c;常用于需要实时更新的数据传输&#xff0c;如新闻推送、股票行情、聊天应用等。 SSE 的特点&#xff1a; 单向通信&#xff1a;服务器向客户端推送数据&…...

Python 语法与数据类型详解

Python 语法与数据类型详解 Python 以其简洁易读的语法和丰富多样的数据类型在编程领域占据重要地位。深入理解 Python 的语法和数据类型是掌握这门语言的关键。 一、Python 语法概述 &#xff08;一&#xff09;缩进规则 Python 独特的缩进规则是其语法的重要特征之一。与…...

LeetCode题练习与总结:扁平化嵌套列表迭代器--341

一、题目描述 给你一个嵌套的整数列表 nestedList 。每个元素要么是一个整数&#xff0c;要么是一个列表&#xff1b;该列表的元素也可能是整数或者是其他列表。请你实现一个迭代器将其扁平化&#xff0c;使之能够遍历这个列表中的所有整数。 实现扁平迭代器类 NestedIterato…...

51单片机快速入门之 AD(模数) DA(数模) 转换 2024/10/25

51单片机快速入门之 AD(模数) DA(数模) 转换 2024/10/25 声明:本文图片来源于网络 A模拟信号特点: 电压或者电流 缓慢上升 随着时间连续缓慢上升或下降 D数字信号特点:电压或者电流 保持一段时间的高/低电平 状态 / 突变 (高电压瞬间低电压) 数字电路中 通常将0-1v电压称…...

Typora 、 Minio and PicGo 图床搭建

流程介绍 本地安装Typora笔记工具拥有一台装有docker的服务器配置minio云图床管理控制页面下载PicGo上传工具服务器Docker环境搭建—Ubuntu系统 删除旧docker的所有依赖(非root用户) # 删除docker及安装时自动安装的所有包 sudo apt-get autoremove docker docker-ce docker…...

【计网】UDP Echo Server与Client实战:从零开始构建简单通信回显程序

目录 前言&#xff1a; 1.实现udpserver类 1.1.创建udp socket 套接字 --- 必须要做的 socket&#xff08;&#xff09;讲解 代码实现&#xff1a;​编辑 代码讲解&#xff1a; 1.2.填充sockaddr_in结构 代码实现&#xff1a; 代码解析&#xff1a; 1.3.bind sockfd和…...

微服务网关Zuul

一、Zuul简介 Zuul是Netflix开源的微服务网关&#xff0c;包含对请求的路由和过滤两个主要功能。 1&#xff09;路由功能&#xff1a;负责将外部请求转发到具体的微服务实例上&#xff0c;是实现外部访问统一入口的基础。 2&#xff09;过滤功能&#xff1a;负责对请求的过程…...

BuildCTF线上赛WP

Build::CTF flag不到啊战队--WP 萌新战队&#xff0c;还请多多指教~ 目录 Build::CTF flag不到啊战队--WP Web ez!http find-the-id Pwn 我要成为沙威玛传奇 Misc what is this? 一念愚即般若绝&#xff0c;一念智即般若生 别真给我开盒了哥 四妹&#xff0c;你听…...

《使用Gin框架构建分布式应用》阅读笔记:p143-p207

《用Gin框架构建分布式应用》学习第10天&#xff0c;p143-p207总结&#xff0c;总计65页。 一、技术总结 1.auth0 本人实际工作中未遇到过&#xff0c;mark一下&#xff0c;参考&#xff1a;https://auth0.com/。 2.使用template (1)c.File() (2)router.Static() (3)rou…...

华为网络管理配置实例

目录 组网需求 数据规划 配置思路 操作步骤 结果验证 配置脚本 管理员可以通过eSight网管系统对FW进行监控和管理&#xff0c;接收FW的告警。 组网需求 如图1所示&#xff0c;某企业在网络边界处部署了FW作为安全网关&#xff0c;并部署了eSight网管系统对网络设备进行集中…...

大语言模型数据处理方法(基于llama模型)

文章目录 前言一、基于huggingface的DataCollatorForSeq2Seq方法解读1、DataCollatorForSeq2Seq方法2、batch最长序列填充3、指定长度填充二、构建大语言模型数据加工模块1、数据读取2、数据加工1、数据格式2、预训练(pretrain)数据加工3、微调(sft)数据加工①、sft数据加工…...

爱奇艺大数据多 AZ 统一调度架构

01# 导语 爱奇艺大数据技术广泛应用于运营决策、用户增长、广告分发、视频推荐、搜索、会员营销等场景&#xff0c;为公司的业务增长和用户体验提供了重要的数据驱动引擎。 多年来&#xff0c;随着公司业务的发展&#xff0c;爱奇艺大数据平台已积累了海量数据&#xff0c;这…...

【C++篇】栈的层叠与队列的流动:在 STL 的韵律中探寻数据结构的优雅之舞

文章目录 C 栈与队列详解&#xff1a;基础与进阶应用前言第一章&#xff1a;栈的介绍与使用1.1 栈的介绍1.2 栈的使用1.2.1 最小栈1.2.2 示例与输出 1.3 栈的模拟实现 第二章&#xff1a;队列的介绍与使用2.1 队列的介绍2.2 队列的使用2.2.1 示例与输出 2.3 队列的模拟实现2.3.…...

使用 Flask 实现简单的登录注册功能

目录 1. 引言 2. 环境准备 3. 数据库设置 4. Flask 应用基本配置 5. 实现用户注册 6. 实现用户登录 7. 路由配置 8. 创建前端页面 9. 结论 1. 引言 在这篇文章中&#xff0c;我们将使用 Flask 框架创建一个简单的登录和注册系统。Flask 是一个轻量级的 Python Web 框架…...

计算机毕业设计Python+大模型微博情感分析 微博舆情预测 微博爬虫 微博大数据 舆情分析系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 《Python大模型微博情感分析…...

CTF--Misc题型小结

&#xff08;萌新笔记&#xff0c;多多关照&#xff0c;不足之处请及时提出。&#xff09; 不定时更新~ 目录 密码学相关 文件类型判断 file命令 文件头类型 strings读取 隐写术 尺寸修改 文件头等缺失 EXIF隐写 thumbnail 隐写 文件分离&提取 binwalk foremo…...

深度学习系列——RNN/LSTM/GRU,seq2seq/attention机制

1、RNN/LSTM/GRU可参考&#xff1a; https://zhuanlan.zhihu.com/p/636756912 &#xff08;1&#xff09;对于这里面RNN的表示中&#xff0c;使用了输入x和h的拼接描述&#xff0c;其他公式中也是如此 &#xff08;2&#xff09;各符号图含义如下 2、关于RNN细节&#xff0c;…...

通过call指令来学习指令摘要表的细节

E8 cw cw 表示E8后面跟随2 字节 (什么数不知道) rel16 指在与指令同一代码段内的相对地址偏移 D ,指向Instruction Operand Encoding 表中的D列, 他告诉我们 操作数1 是一个0FFSET N.S. 在64位模式下&#xff0c;某些指令需要使用“地址覆盖前缀”&#xff08;address over…...

10分钟使用Strapi(无头CMS)生成基于Node.js的API接口,告别繁琐开发,保姆级教程,持续更新中。

一、什么是Strapi&#xff1f; Strapi 是一个开源的无头&#xff08;headless&#xff09; CMS&#xff0c;开发者可以自由选择他们喜欢的开发工具和框架&#xff0c;内容编辑人员使用自有的应用程序来管理和分发他们的内容。得益于插件系统&#xff0c;Strapi 是一个灵活的 C…...

创建插件 DLL 项目

Step 1: 创建插件 DLL 项目 在 Visual Studio 中创建一个新的 DLL 项目&#xff0c;并添加以下文件和代码。 头文件&#xff1a;CShapeBase.h cpp 复制代码 #pragma once #include <afxwin.h> // MFC 必需头文件 #include <string> #include <vector> #i…...

OpenCV双目相机外参标定C++

基于OpenCV库实现双目测量系统外参标定过程。通过分析双目测量系统左右相机拍摄的棋盘格标定板图像&#xff0c;包括角点检测、立体标定、立体校正和畸变校正的步骤&#xff0c;获取左右相机的相对位置关系和姿态。 a.检测每张图像中的棋盘格角点&#xff0c;并进行亚像素级精…...

【GESP】C++一级练习BCQM3055,4位数间隔输出

一级知识点取余、整除运算和格式化输出知识点应用。其实也可以用string去处理&#xff0c;那就属于GESP三级的知识点范畴了&#xff0c;孩子暂未涉及。 题目题解详见&#xff1a;https://www.coderli.com/gesp-1-bcqm3055/ https://www.coderli.com/gesp-1-bcqm3055/https://w…...

纯血鸿蒙的最难时刻才开始

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 纯血鸿蒙(HarmonyOS NEXT)也正式发布了&#xff0c;绝对是一个历史性时刻&#xff0c;但最难的鸿蒙第二个阶段&#xff0c;也就是生态圈的建设&#xff0c;才刚刚开始。 目前&#xff0c;我劝你现在不要升级到鸿蒙…...

记一个mysql的坑

数据库表user&#xff0c; 存在一个name字段&#xff0c;字段为varchar类型 现在user表有这么两条记录: idnameageclass1NULL18一班2lisi20二班 假如我根据下面这一条件去更新&#xff0c;更新成功数据行显示为0 update user set age 19 where age 18 and class “一班”…...

Java中的设计模式:单例模式详解

摘要 单例模式&#xff08;Singleton Pattern&#xff09;是Java中最常用的设计模式之一&#xff0c;属于创建型模式。它的主要目的是确保一个类在系统中只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。 1. 单例模式的定义 单例模式确保一个类只有一个实例&…...

NanoTrack原理与转tensorrt推理

文章目录 前言一、NanoTrack 工作原理二、运行demo与转换tensorrt模型2.1 运行pt模型demo2.2 转onnx模型2.3 转tensorrt模型2.4 运行trt模型推理 三、推理速度对比总结 前言 NanoTrack 是一种轻量级且高效的目标跟踪算法&#xff0c;基于Siamese网络架构&#xff0c;旨在在资源…...

YOLO11改进 | 卷积模块 | 卷积模块替换为选择性内核SKConv【附完整代码一键运行】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 本文给大家带来的教程是将YOLO11的卷积替…...

CentOS进入单用户模式进行密码重置

一、单用户模式介绍 单用户模式是一种特殊的启动模式&#xff0c;主要用于系统维护和故障排除。在单用户模式下&#xff0c;系统以最小化的状态启动&#xff0c;只有最基本的系统服务会被加载&#xff0c;通常只有root用户可以登录。这种模式提供了对系统的完全控制&#xff0…...

bitpoke- mysql-operator cluster

sidecar版本只支持到8.0.35&#xff0c;35可以支持到mysql8.0.35 . 默认镜像是5.7的。需要自己打sidecar的镜像&#xff1a; # Docker image for sidecar containers # https://github.com/bitpoke/mysql-operator/tree/master/images/mysql-operator-sidecar-8.0 # 参考5…...

第5课 基本数据类型

一、数据类型的诞生 在Python的世界里&#xff0c;万物皆对象&#xff0c;每个对象都有自己的若干属性&#xff0c;每一个属性都能描述对象的某一个方面。就像我们每个人&#xff0c;都有自己的身高、年龄、姓名、性别等很多方面的信息&#xff0c;这里的身高、年龄、姓名、性…...

如何给wordpress文章部分内容加密/网站推广业务

Operatioon 008 版本控制,Git基础, Git进阶,RPM打包一 分布式版本控制系统1 典型的C/S系统2 任意数量客户端3 客户端通过写数据库分享代码集中式版本控制系统 ->SVN,CVS&#xff11;开发者之间共用一个仓库&#xff12;所有操作需要联网分布式版本控制系统 ->GIT,Bitke…...

IIS和wordpress/河南seo关键词排名优化

如果使用Nodejs开发Office插件&#xff0c;需要借助Yeoman包去生成Office插件 yeoman地址是&#xff1a;http://yeoman.io/generators/&#xff0c;输入office 源码地址是&#xff1a;https://github.com/officedev/generator-office 第一部分就是全局安装yeoman包&#xff0c;…...

网站建设seo 视频教程/天津百度推广网络科技公司

1.简介 xilinx提供了两个ip用于生成ROM存储空间。一个是 Distributed Memory Generator&#xff0c;另一个是Block Memory Generator&#xff0c;两者最主要的差别是生成的 Core所占用的 FPGA 资源不一样&#xff0c;从 Distributed Memory Generator 生成的 ROM/RAM Core 占用…...

自己怎么做网站网页/百度品牌广告

稍过段时间&#xff0c;打算把拇指接龙游戏教程案例修改为当前最新的Cocos Studio 2.0.2版本&#xff08;Cocos2d-x 3.x&#xff09;。所以&#xff0c;打算先搜索一部分资料以便加快速度。下面引文来自于http://cn.cocos2d-x.org/tutorial/show?id1956。本文大部分内容来自对…...

网页设计教程自学网/广州seo排名外包

外贸跨境电商平台是在国家政策支持下由政府与跨境企业或者进出口电商企业与企业之间进行的建设和运营&#xff0c;在跨境电商网站运营过程中&#xff0c;政府部门在海关、检验检疫、税务、外汇等方面对出口跨境电商平台实施监管政务的服务作用。跨境电商平台也由此区分为跨境电…...

全屏类网站/最有效的网络推广方式和策略

在Windows 8 的IIS&#xff08;8.0&#xff09;中搭建PHP运行环境&#xff1a; 一&#xff1a;安装IIS服务器 1.进入控制面板>>程序和功能>>打开或关闭Windows 功能&#xff0c;找到Internet信息服务&#xff0c;记得选中CGI这一项 2.安装完成后在浏览器中打开loca…...