10-实时通信协议对比速查

简介: 这是一份专为面试打造的实时通信协议速查指南,涵盖HTTP、MQTT、WebSocket、WebRTC、TCP Socket及阿里云Push六大协议。聚焦真实项目场景,用“一句话定位+代码位置+口诀记忆”方式,助你5分钟掌握选型逻辑与高频考点,直击IoT、音视频、推送等核心需求。

实时通信协议对比速查(面试必备)

用途:面试时能脱口而出,背得滚瓜烂熟
适合:项目里有 MQTT / WebSocket / WebRTC / TCP Socket / 阿里云 Push 的同学
核心思想:没有最好的协议,只有最合适的协议


〇、面试速记版(5 分钟版先看这个)

面试前 5 分钟只看这一节,足够应付 80% 的提问。

1. 项目用了哪些协议?—— 5 + 1

mermaid diagram

一句话:「HTTP 拉数据,MQTT/TCP 管设备,两个 WebSocket 管通知和信令,WebRTC 传音视频,阿里云 Push 做杀进程兜底。」

2. 项目里各协议 → 业务 → 代码位置(一图背完)

协议 项目用途 关键代码
HTTP 登录、拿房屋/设备列表、开锁、配置下发 src/services/api.js
MQTT 智能家居外网主控:设备状态 + 控制指令 + 场景/定时 src/models/home.js NB_SDK.connection.subscribe(...);src/components/Device/HOC/Device.js NB_SDK.exec(topic,...)
TCP Socket 内网模式直连家里主机 8888,收主机推送的设备状态(JSON + && 分隔) src/pages/Intranet/index.js TcpSocket.createConnection({port:8888})
WebSocket #1 云对讲通知:自家后端推 {type:1} 来电、{type:3} 结束 src/pages/Home/index.js:${WEBSOCKET_URL}/newhomewss/ws/app/${token}
WebSocket #2 思悦 WebRTC 信令:交换 SDP / ICE 候选 src/pages/CloudTalk/SiruisCloudCall.js:wss://webrtc.insprid.cn/new_wss?token=...&type=access
WebRTC 思悦对讲音视频(业主只发音频 + 看门口画面) src/pages/CloudTalk/SiruisCloudCall.js:mediaDevices.getUserMedia({audio:true, video:false}) + <RTCView>
阿里云 Push 杀进程兜底:App 死了也能收到门口机呼叫 src/App.tsx global.onNotifycation;src/models/login.js AliyunPush.*

3. 3 句必背口诀

1. MQTT 广播站一对多(订阅 Topic),WebSocket 专线电话一对一(连到服务器)
2. HTTP 一问一答断线,WebSocket 长连双向服务器主动推
3. WebRTC P2P 直连传音视频,WebSocket 服务器中转传信令

4. 4 个 WebRTC 名词(必记)

SDP   媒体描述(编解码、分辨率、传输方式)
ICE    NAT 穿透候选(host / srflx / relay)
STUN   拿到公网 IP(srflx)
TURN   中继服务器(relay,最后兜底)

5. 面试 5 句话模板(直接背)

「我们项目用了 5 种通信协议:

  1. HTTP 处理 90% 的常规请求;
  2. MQTT 用于智能家居外网设备控制和状态推送(订阅 Topic);
  3. TCP Socket 仅内网模式直接连家里主机 8888 端口;
  4. WebSocket 两条:一条自家后端推云对讲通知,一条思悦服务器做 WebRTC 信令;
  5. WebRTC 跑思悦对讲的音视频。

杀进程兜底用阿里云 Push,系统级通道,App 死了也能收到门口机呼叫。

选型理由:MQTT 天然一对多 + QoS 适合 IoT;WebRTC P2P 传音视频延迟低、服务器压力小;HTTP 简单请求-响应足够;TCP Socket 是内网直连主机的特殊场景。」

6. 何时选哪个?(决策树速查)

高频实时 + 一对多 + Topic 路由 + IoT 设备   → MQTT
高频实时 + 一对一 + 简单消息(聊天/通知)   → WebSocket
高频实时 + 音视频 + P2P                     → WebRTC(+ WebSocket 当信令)
低频 + 请求-响应(拉数据/配置)             → HTTP
原始字节流 + 内网直连特殊场景               → TCP Socket
系统级通知 + 杀进程可达                     → 阿里云 Push / APNs / 厂商通道

7. 思悦 vs 海康 对讲对照(常被问)

维度 思悦云对讲 海康云对讲
信令 WebSocket(自家思悦服务器) 海康私有协议
媒体 WebRTC(P2P,UDP) 海康私有协议(闭源)
入口代码 src/pages/CloudTalk/SiruisCloudCall.js src/pages/CloudTalk/HikCloudTalkPlayer.js + ios/CloudOpenSDK/
业主侧 只发音频 + 看门口画面 取决于 SDK 模式

一、一句话总结(必背)

mermaid diagram

项目使用一览(同项目里必然用到的几种):

协议 项目里用的场景
HTTP 登录、拿房屋列表、拿设备列表、开锁接口(90% 的请求)
TCP Socket 内网模式直连家里主机 8888 端口,推送设备状态
WebSocket 云对讲通知通道(自家后端)+ 思悦 WebRTC 信令通道
MQTT 智能家居 8 种设备的控制指令 + 状态推送(外网)
WebRTC 思悦对讲的音视频通话(业主纯音频 + 门口视频)
阿里云 Push 云对讲杀进程兜底通知(业主在抖音时也能收到门口呼叫)

二、6 种协议功能对照表

协议 功能定位 传输内容 方向 协议层
HTTP 静态/低频数据请求 JSON / 文件 C → S → C 应用层
TCP Socket 原始可靠字节流 任意 双向 传输层
WebSocket Web 实时双向通信 文本/JSON 双向 应用层
MQTT IoT 一对多消息 小消息 发布→订阅 应用层
WebRTC 实时音视频通话 音视频流 + 数据 P2P 应用层
阿里云 Push 系统级通知 通知文本 S → C 应用层

三、三组对照(必背)

对照 1:MQTT vs WebSocket(最常考)

维度 MQTT WebSocket
全称 Message Queuing Telemetry Transport Web Socket
出生 1999(IBM 卫星链路) 2008(HTML5)
设计目标 IoT 设备在低带宽不稳定网络通信 Web 实时双向通信
架构模式 Pub/Sub(发布订阅,一对多) C/S(点到点,一对一)
谁主动推 Broker 中间代理 服务器
路由方式 Topic(主题) URL Path
例子 Topic home_123/light/cmd /ws/app/{token}
头部大小 极小(固定头部最小 2 字节,可变头部+payload 另算) 中等(2-14 字节)
一对多 ✅ Topic 天然支持(多个订阅者收同一消息) ❌ WebSocket 本身只支持 1 对 1(多对多要服务器转发)
离线消息 ✅ Broker 暂存 ❌ 断了就丢
消息保留 ✅ 新订阅者能拿最新 ❌ 不支持
QoS(服务质量) ✅ 3 个等级(0/1/2) ❌ 没内建,要自己重试去重
端口 1883(TCP)/ 8883(WSS) 80/443(HTTP 友好,防火墙不拦)
浏览器支持 ❌ 要 JS 库 ✅ 原生
适用 IoT、车联网、工业传感器 Web 实时、聊天室、股票行情、推送

💡 关键区别:MQTT 天然一对多(一个 Topic 可多个订阅者),WebSocket 天然一对一(客户端 ↔ 服务器)。
群聊实现:所有客户端都连同一个 WebSocket 服务器,服务器负责把 A 的消息转发给 B、C。WebSocket 自己不直接多对多。

口诀:

MQTT 是"广播站"(一对多,订阅 Topic 收消息),WebSocket 是"专线电话"(一对一到服务器)。

项目里实际使用对比:

业务 协议 代码位置
智能家居设备控制 + 状态推送 MQTT src/components/Device/HOC/Device.js
NB SDK exec(topic, ...)
云对讲来电通知 WebSocket #1 src/pages/Home/index.js
连 wss://CLOUD_IP/newhomewss/ws/app/{token}
思悦 WebRTC 信令 WebSocket #2 src/pages/CloudTalk/SiruisCloudCall.js
连 wss://webrtc.insprid.cn/new_wss

对照 2:HTTP vs WebSocket(最常问)

维度 HTTP WebSocket
模型 请求-响应(一问一答) 长连接
方向 也双向(客户端发、服务器回),但一问一答 双向(随时发、随时收)
连接 短连接(响应后断开,下次重连) 长连接(一次连上保持开着)
状态 无状态(服务器不记得上次请求) 有状态(服务器知道连接活跃)
实时性 ❌ 差(要主动问,依赖轮询) ✅ 好(服务器主动推)
适用 静态页面、API 调用 聊天、推送、协同编辑

口诀:

HTTP 是"一问一答、断一次"(发请求、收响应、断开),WebSocket 是"专线、双向、不断"(连上一次保持开着,客户端 ↔ 服务器)。

项目实际使用:

  • HTTP → REST API(登录、拿设备列表、开门接口)
  • WebSocket → 实时通知(云对讲来电)

💡 群聊怎么实现? 多客户端通过同一个服务器互相转发消息,每个客户端和服务器都是 WebSocket(一对一的专线),服务器帮客户端之间传话。WebSocket 本身不直接多对多。


对照 3:WebRTC vs WebSocket(音视频专题)

维度 WebRTC WebSocket
模型 P2P(点对点,客户端 ↔ 客户端) C/S(客户端 ↔ 服务器)
传输内容 音视频流 + 数据 文本/任意数据
编解码 ✅ Opus/H.264 自带 ❌ 不带
NAT 穿透 ✅ 内置 STUN/TURN ❌ 没有
延迟 50-200ms 200ms+(经服务器)
服务器压力 低(不转发音视频) 高(所有数据过服务器)
适合 音视频通话 聊天室、股票行情、推送

WebRTC 必须配 WebSocket 当信令通道!

mermaid diagram

WebRTC 必须配 WebSocket 当信令通道(可视化)

阶段 信令通道(WebSocket) 媒体流(WebRTC)
建立连接 ✅ 必须 -
协商媒体参数 ✅ 必须 -
NAT 穿透(ICE) ✅ 必须 -
传输音视频 ❌ 不参与 ✅ P2P 直连
关闭连接 ✅ 必须 -

项目里实际使用对比:

业务 协议 代码位置
思悦云对讲信令(交换 SDP/ICE) WebSocket src/pages/CloudTalk/SiruisCloudCall.js
方法 connectWebSocket(token)
思悦云对讲音视频传输 WebRTC src/pages/CloudTalk/SiruisCloudCall.js
mediaDevices.getUserMedia({video:false, audio:true})
海康云对讲 ❌ 不走 WebRTC 用海康私有协议(闭源)
项目没有微信视频那种"后台悬浮通话" - 需要 iOS voip 后台模式 + Android 前台服务

口诀:

WebRTC 是"两台手机 P2P 直连传音视频",WebSocket 是"两台手机通过服务器中转传信令"。

项目实际使用:

  • 思悦对讲:WebRTC 做音视频(P2P)+ 另一个 WebSocket 当信令(通过服务器中转)
  • 海康对讲:用海康私有协议(不走 WebRTC)

四、3 个"特殊"的协议

4.1 TCP Socket(最基础)

TCP 是什么? 传输层"可靠管道"协议。HTTP/MQTT/WebSocket 都跑在它上面。

  • 可靠:丢包会自动重传、按顺序到达、不重复
  • 字节流:传的是任意字节,没有消息边界
  • 管道:应用层协议(HTTP/WS/MQTT)跑在它上面

⚠️ 注意:TCP 是"底层管道",不是"另一种通信方式"。写代码时几乎不直接用 TCP,而是用 HTTP/WebSocket/MQTT。只有内网直连主机这种特殊场景才直接用 TCP Socket。

mermaid diagram

项目实际使用:

mermaid diagram

  • 入口:仅在用户主动进入「内网」Tab 时建链,IP 来自 redux 的 intranetIp
  • App 端:直连家里主机的 8888 端口(TcpSocket.createConnection({port:8888, host:intranetIp}))
  • iOS 专属:用 NetworkInfo.getIPAddress() 拿本机 IP 作为 localAddress,避免多网卡选错出口
  • 自定义协议:JSON 对象 + && 作为多帧分隔符(主机主动推送设备状态)
  • 半包处理:代码里维护 lastData 变量拼接跨包数据(这一点面试很加分)
  • 代码位置:src/pages/Intranet/index.js createSocket()

4.2 WebRTC(音视频专属)

3 大核心 API:

  • MediaStream:拿摄像头/麦克风
  • RTCPeerConnection:建立 P2P 连接(处理 NAT 穿透)
  • RTCDataChannel:P2P 数据传输

WebRTC 走的是什么通道?

阶段 走哪个
信令交换(SDP/ICE candidate) 走 WebSocket(不是 WebRTC 自己)
媒体传输(音视频流) 走 RTP over UDP(不是裸 TCP)
NAT 穿透 走 STUN/TURN 服务器
DTLS 握手 / SCTP(DataChannel) WebRTC 内部混合通道

💡 重要:WebRTC 的媒体流默认走 UDP,因为音视频实时性强、丢包比延迟好。
但 WebRTC 不是「完全不用 TCP」——DTLS 握手、DataChannel 等控制面会走可靠通道,ICE 候选里也有 tcp 类型。面试说「媒体走 UDP P2P」就够稳。

音视频能力可视化:

mermaid diagram

项目实际使用:

mermaid diagram

  • 思悦对讲:业主 App 端 getUserMedia({video: false, audio: true})
    • 业主只发音频,不露脸
    • 业主通过 <RTCView> 看门口画面
  • 代码位置:src/pages/CloudTalk/SiruisCloudCall.js getLocalStream()

4.3 阿里云 Push(系统级通知)

是什么? 阿里云提供的系统级推送服务,底层用 MQTT,但提供:

  • 系统通知栏显示
  • APNs(iOS)+ 厂商通道(Android 华为/小米/OPPO/vivo)
  • 离线消息保留 3-7 天

架构图:

mermaid diagram

项目实际使用:

  • 云对讲:业主 App 杀进程时也能收到门口机呼叫通知
  • 智能家居:不使用(设备状态用 MQTT 即可)

为什么必须用它?

  • App 死了 → MQTT 连接断了 → 收不到任何推送
  • 只有系统级推送(APNs/厂商通道)能在 App 死后送达

五、本项目用了哪几种?

mermaid diagram

各业务对应的协议 + 代码位置:

业务 协议 代码位置 作用
智能家居控制(外网) MQTT src/components/Device/HOC/Device.js
NB_SDK.exec(topic, data)
设备控制指令 + 状态推送
智能家居控制(内网) TCP Socket src/pages/Intranet/index.js
TcpSocket.createConnection({port: 8888})
直连家里主机
云对讲通知(前台) WebSocket #1 src/pages/Home/index.js
连 wss://CLOUD_IP/newhomewss/ws/app/{token}
收到 {type:1, 3} 来电事件
思悦通话信令 WebSocket #2 src/pages/CloudTalk/SiruisCloudCall.js
connectWebSocket(token)
交换 SDP/ICE
思悦通话音视频 WebRTC 同上 getLocalStream() + <RTCView> P2P 传输
海康通话 海康私有协议 ios/CloudOpenSDK/ + android/.../HikVideoTalkActivityModule.java 闭源 SDK(不走 WebRTC)
MQTT Broker 地址 — src/services/api.js getMqttConnectInfo() post-cn-45909szlj0u.mqtt.aliyuncs.com(aliyun)
杀进程兜底 阿里云 Push src/App.tsx global.onNotifycation 系统通知栏
登录、拿数据、开锁 HTTP src/services/api.js REST API

在这里插入图片描述

六、口诀速记(面试脱口而出)

口诀 1:3 个易混对比

MQTT vs WebSocket → "广播站 vs 专线电话"
HTTP vs WebSocket → "一问一答、断线 vs 长连、双向"
WebRTC vs WebSocket → "P2P 直连 vs 服务器中转"

口诀 2:何时用哪个?

高频实时 + 一对多 + Topic 路由 → MQTT
高频实时 + 一对一 + 简单消息 → WebSocket
高频实时 + 音视频 + P2P → WebRTC
低频静态 + 请求-响应 → HTTP
原始字节流 + 自定义 → TCP Socket
系统级通知 + 杀进程可达 → 阿里云 Push / APNs / 厂商通道

口诀 3:项目里各业务用什么

智能家居 → MQTT(云端)+ TCP Socket(家里)
云对讲通知 → WebSocket(自家后端)
云对讲兜底 → 阿里云 Push
云对讲通话 → 海康 SDK / WebRTC + WebSocket 信令
通用 API → HTTP

口诀 4:5 个协议层级记忆

HTTP/1.1 应用层
WebSocket 应用层(基于 HTTP 升级)
MQTT 应用层(基于 TCP)
WebRTC 应用层(基于 UDP)
TCP 传输层(所有协议的管道)

七、面试常见问题速答

Q1:WebSocket 和 Socket 的区别?

  • Socket 是编程接口(API),不是协议
  • WebSocket 是协议(基于 TCP)
  • 我们用的 react-native-tcpSocket 是用 Socket API 实现 TCP 连接

Q2:MQTT 为什么适合 IoT?

  • 头部小(2 字节),适合低带宽
  • Pub/Sub 模式天然支持一对多
  • QoS 保证消息到达
  • Topic 路由天然支持隔离
  • 离线消息保留

Q3:WebRTC 必须配 WebSocket 当信令?

✅ 是的。WebRTC 自己不带信令通道,SDP/ICE 候选交换必须用 WebSocket / Socket / HTTP 等其他通道。

Q4:阿里云 Push 和 MQTT 都是推送,区别?

  • 阿里云 Push = 系统级(杀进程可达,走 APNs / 厂商通道)
  • MQTT = 应用层(App 死了就断了)
  • 阿里云 Push 在 Android 上确实用「类 MQTT 的自建长连接」,但不是直接复用业务的 MQTT Broker(业务 MQTT 是 post-cn-45909szlj0u.mqtt.aliyuncs.com,推送通道是另一套),主要靠厂商系统通道送达

Q5:HTTP 轮询 vs WebSocket vs MQTT 选哪个?

场景 推荐
数据变更频率低(分钟级) HTTP 轮询
实时双向 + 一对一 + 简单消息 WebSocket
实时一对多 + Topic 路由 + IoT 设备 MQTT
音视频通话 WebRTC(+ WebSocket)

Q6:MQTT 和 Kafka 的区别?

  • MQTT = 物联网消息协议(轻量,IoT 设备用)
  • Kafka = 分布式消息队列(重型,服务端日志流处理用)
  • 完全不同的应用场景

Q7:智能家居为什么用 MQTT 不用 HTTP?

  • 设备状态高频变化,HTTP 轮询效率低
  • MQTT Topic 天然支持一对多(一个设备状态推送给所有订阅者)
  • QoS 保证消息到达
  • 头部小,IoT 设备带宽友好

七点五、TCP/IP 5 层架构(谁跑在谁上面)

很多人搞不清"谁跑在谁上面",用这张 5 层架构图一图讲清楚:

mermaid diagram

5 层模型记忆口诀:

┌─────────────────────────────────────────────────────────────┐
│  应用层    ← 程序员写代码的地方(HTTP/WS/MQTT/WebRTC) │
│  传输层    ← TCP(可靠)/ UDP(快)                   │
│  网络层    ← IP 协议(IP 地址寻址)                  │
│  数据链路层 ← 以太网、Wi-Fi、4G/5G                  │
│  物理层    ← 网线、光纤、无线电波                  │
└─────────────────────────────────────────────────────────────┘

关键 3 点:

  1. 每层只关心自己的事:上层"看不见"下层细节(HTTP 不需要懂 TCP 怎么重传)
  2. 每层给上层提供服务:TCP 给 HTTP 提供"可靠字节流"服务
  3. 协议依赖关系是单向的:应用层协议(HTTP)依赖传输层(TCP),TCP 依赖网络层(IP),IP 依赖链路层

本项目用到的协议分别在哪一层:

协议 层级 说明
HTTP / WebSocket / MQTT / 阿里云 Push 应用层 程序员直接调用
WebRTC 应用层 媒体走 RTP over UDP(P2P),控制面混合通道
TCP Socket(内网直连主机) 传输层 直接调用 TCP(不常用,特殊场景)
TCP 传输层 HTTP/WS/MQTT 都跑在它上面
UDP 传输层 WebRTC 媒体流走它
IP 网络层 一般不直接用,被 TCP/UDP 间接调用
Wi-Fi / 4G 链路层 + 物理层 系统自动处理,程序员无感

八、一张图速查

mermaid diagram

记住这张图的 3 个要点:

  1. 应用层有 5 种协议(HTTP / WebSocket / MQTT / WebRTC / 阿里云 Push)
  2. 传输层有 1 种主力 + 1 种辅助(TCP Socket + UDP)
  3. 大多数协议都跑在 TCP 上(WebRTC 例外,走 UDP)

九、一句话总结

mermaid diagram

口诀:

选哪个?看场景!


面试前 5 分钟过一遍:看这张图就能脱口而出所有对比。
面试时背 3 个口诀:

  1. "MQTT 广播站一对多,WebSocket 专线电话一对一"
  2. "WebRTC P2P 直连传音视频,WebSocket 服务器中转传信令"
  3. "HTTP 一问一答断开,WebSocket 长连双向"
相关文章
|
消息中间件 Java Kafka
Spring Boot集成Kafka动态创建消费者与动态删除主题(实现多消费者的发布订阅模型)
Spring Boot集成Kafka动态创建消费者与动态删除主题(实现多消费者的发布订阅模型)
18396 1
Spring Boot集成Kafka动态创建消费者与动态删除主题(实现多消费者的发布订阅模型)
|
存储 监控 Java
10分钟3个步骤集成使用SkyWalking
此时就非常推荐SkyWalking了,SkyWalking不仅仅是一款链路跟踪工具,还可以作为一个系统监控工具,还具有告警功能。使用简便、上手又快。真可谓快、准、狠。
10分钟3个步骤集成使用SkyWalking
|
8月前
|
网络协议 应用服务中间件 网络安全
粗心大意必酿大祸,记录nginx配置文件的一次闹剧
本文记录一次因 Nginx `server_name` 配置疏漏导致的 HTTPS 访问失败问题:为新域名 `bugfix.wiki` 复制配置时,未在 443 server 块中包含 `www.bugfix.wiki`,致使 SNI 匹配失败、证书不匹配而报错。强调 HTTPS 下 `server_name` 必须覆盖所有访问域名,复制配置需严格核对。
356 1
|
3月前
|
自然语言处理 IDE 数据挖掘
最新版通义千问(Qwen3.8-Max-Preview)功能介绍
Qwen3.8-Max-Preview是通义千问推出的最新一代旗舰大模型预览版,定位为“代码工程+专业办公”双核旗舰,总参数量达2.4万亿,采用全新迭代的MoE(混合专家)稀疏架构,是通义千问团队首个突破万亿参数的原生多模态模型。该模型以“天”为单位持续进化,官方宣称其综合能力在全球范围内仅次于Fable 5,正式版将开源发布。
1159 1
|
编解码 网络协议 算法
SpringBoot × TCP 极速开发指南:工业级TCP通信协议栈操作手册
🌟 ​大家好,我是摘星!​ 🌟今天为大家带来的是并发编程的SpringBoot × TCP 极速开发指南,废话不多说直接开始~
965 0
|
7月前
|
SQL 程序员 数据处理
优化Python循环:从10秒到0.1秒的性能调优
本文以小李优化三百万行日志处理为例,详解Python循环性能瓶颈及七步调优法:精简循环体、预提方法、改用列表推导式、map/filter组合、避免重复转换、引入pandas等高效工具,最终将耗时从10秒降至0.1秒级。强调“先写对,再写快”,兼顾性能与可维护性。(239字)
427 8
|
7月前
|
Web App开发 人工智能 Linux
阿里云/本地部署OpenClaw 接入Chrome Relay 完整指南:AI全自动操控浏览器实战教程
在AI自动化场景中,让AI直接接管浏览器操作、完成点击、输入、滚动、表单填写、页面抓取、自动登录等真实交互,是提升效率的关键能力。OpenClaw推出的**Chrome Relay**扩展与中继服务,可实现AI与Chrome浏览器的无缝打通,让OpenClaw通过自然语言直接操控浏览器,无需手动干预。本文基于2026年最新环境,完整提供**Chrome Relay全平台安装、权限配置、扩展加载、中继连接**的详细步骤,同时补充**阿里云服务器、本地MacOS/Linux/Windows11部署OpenClaw**、**阿里云百炼通义千问API配置**、**免费大模型Coding Plan对接
3412 0
|
开发框架 开发工具 Java
从零到高手:一文教你快速上手Vaadin,打造首个炫酷Web应用,开启编程新世界的大门
【8月更文挑战第31天】Vaadin是一款基于Java的Web应用开发框架,以其丰富的组件库、简洁的API及对现代Web标准的支持而广受开发者欢迎。本文将指导你从零开始快速搭建一个简单的Vaadin应用。首先确保已安装JDK 11及以上版本和IDE(如IntelliJ IDEA或Eclipse)。接着使用Spring Initializr创建新项目,并选中“Spring Web”和“Vaadin”依赖。创建项目后,编写主应用类和主页类,实现基本页面功能。最后配置启动页面并运行应用。通过这些步骤,你将成功搭建一个基础Vaadin应用,开启探索更多特性的旅程。
2211 0
|
前端开发 UED
React 模态框 Modal 组件详解
【10月更文挑战第27天】本文介绍了如何在 React 中实现一个功能完善的模态框组件。从基础概念入手,逐步讲解了简单的模态框实现、CSS 样式、传递子组件、键盘事件处理等高级功能。同时,还探讨了常见问题及易错点,如背景点击关闭、键盘事件冲突和动画效果。通过本文,读者可以全面了解 React 模态框组件的实现细节。
1114 1

热门文章

最新文章