一篇简单的STOMP教程QAQ

一、STOMP是什么?

STOMP = 简单文本定向消息协议(Simple Text Oriented Messaging Protocol)

Stomp是一套通用的消息"聊天规则",用来让客户端和消息服务器(Broker)之间收发消息,解决"谁发消息、发给谁、怎么发"的问题。

核心特点:

  • 文本格式:消息内容是纯文本,跟HTTP请求很像,可读性强,调试方便

  • 轻量简单:命令少、格式固定,不用写复杂的自定义解析

  • 跨平台兼容:Java、JS、Python等语言都能适配,WebSocket、TCP都能当底层传输

  • 主打发布/订阅:最常用的场景就是"订阅频道→发消息→所有人接收",适合聊天室、实时通知、大屏推送

简单类比:STOMP就像快递行业的统一标准,不管是哪家快递公司(消息服务器)、哪种交通工具(WebSocket/TCP),都能按这套规则寄收包裹(消息),不用各自搞一套。

二、核心用法:主要就4个

STOMP的操作全靠命令+头部+消息体,日常开发只用掌握4个核心命令,覆盖绝大多数场景。

1. 前置准备

先搭好基础环境:

  • 服务端:启用STOMP的消息代理

  • 客户端:引入对应STOMP客户端库(前端用stompjs)

  • 底层传输:常用WebSocket(前端实时场景首选)

2. 核心命令详解(极简版)

🔗 CONNECT(连接服务器)

作用:客户端跟消息服务器建立连接,相当于"开门进门"

关键参数:服务器地址、鉴权信息(账号密码,可选)

javascript 复制代码
// 前端stompjs示例 
const client = Stomp.client('ws://localhost:8080/stomp');         // 创建stomp实例
client.connect({}, () => { console.log('STOMP连接成功'); });

📩 SUBSCRIBE(订阅频道)

作用:订阅某个消息频道,服务器有消息就推给你,相当于"订阅公众号"

关键参数:订阅地址(Destination,比如/topic/chat)、接收消息的回调函数

javascript 复制代码
// 订阅聊天室频道 
client.subscribe('/topic/chat-room', (message) => { 
    // 收到消息后处理 
    console.log('收到消息:', message.body); 
});

📤 SEND(发送消息)

作用:往指定频道发消息,相当于"发朋友圈,订阅的人都能看"

关键参数:发送地址(和订阅地址对应)、消息头、消息内容

javascript 复制代码
// 往聊天室发消息 
client.send( '/topic/chat-room', {}, JSON.stringify({ user: '张三', content: '大家好' }) );

❌ DISCONNECT(断开连接)

作用:关闭连接,释放资源,页面关闭时必用

javascript 复制代码
// 断开连接 
client.disconnect(() => { console.log('STOMP连接已断开'); });

三、简单示例

前端(浏览器)完整代码

javascript 复制代码
<!-- 引入stompjs和sockjs(兼容低版本浏览器) --> 
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script> <script> 
    // 1. 创建客户端 
    const client = Stomp.client('ws://localhost:8080/stomp-endpoint'); 
    // 2. 连接成功后订阅频道 
    client.connect({}, () => { console.log('连接成功'); 
        // 订阅消息 
        client.subscribe('/topic/notice', (msg) => { 
            alert('收到通知:' + msg.body); 
        }); 
    }); 
    // 3. 发送消息函数 
    function sendMsg() { 
        client.send('/topic/notice', {}, '这是一条实时通知'); 
    } 
</script> 
<button onclick="sendMsg()">发送通知</button>

四、注意事项

  • STOMP ≠ WebSocket:WebSocket是传输通道,STOMP是通道里的消息规则,STOMP可以跑在TCP、WebSocket上

  • Destination地址规范:常用/topic/(广播,所有人接收)、/queue/(点对点,单人接收)

  • 不用深究帧格式:日常开发用客户端库封装好的方法就行,不用手动拼文本帧

  • 异常处理:连接失败、断网重连要加回调,提升稳定性

总结

STOMP就是一套简单通用的消息收发协议 ,核心就是连接→订阅→发送→断开,专门解决实时消息推送、聊天室这类场景。不用纠结底层原理,记住4个命令,照着示例改改地址和参数,就能快速实现功能。

核心内容:建连接、订频道、发消息,实时通信。

相关推荐
BigTopOne6 小时前
【WebRtc】DTLS-SRTP 加密完整流程详解
前端
陈随易6 小时前
pm2 替代品,nodejs&bun 线上部署必备工具
前端·后端·程序员
单线程_016 小时前
从案例分析 Vue3 Tokenizer 源码一
前端·javascript·vue.js
BigTopOne6 小时前
【WebRtc】-ICE Candidate 与 STUN/TURN 原理详解
前端
l1258656 小时前
# LangGraph Memory机制深度解析:短期记忆与长期记忆的工程实践
前端·人工智能·python·langchain·bootstrap
码视野7 小时前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
大模型码小白7 小时前
AI 对话流性能调优:万级消息的虚拟滚动落地
java·大数据·前端·javascript·人工智能·算法·机器学习
m0_547486667 小时前
《JavaScript核心原理 》全套PPT课件2026
开发语言·javascript·ecmascript
xm_xm_xm_18 小时前
react17版本以前类组件常用操作
前端·javascript·react.js
ly76898 小时前
Web 性能优化实战:从 Core Web Vitals 到工程化性能治理
前端·性能优化