一篇简单的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个命令,照着示例改改地址和参数,就能快速实现功能。

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

相关推荐
前端那点事1 分钟前
别再写垃圾组件!Vue3 如何设计「真正可复用」的高质量通用组件
前端·vue.js
卷帘依旧4 分钟前
JavaScript 中的 Symbol
前端·javascript
老王以为8 分钟前
Claude Code 从 GUI 到 TUI:开发者界面的范式回归
前端·人工智能·全栈
JYeontu9 分钟前
正方体翻滚Loading 2.0
前端·javascript·css
llq_35011 分钟前
React 组件处理 Props
前端
夫子39612 分钟前
多人协同后内容丢失?一文搞懂ONLYOFFICE document.key的正确用法
前端
张元清22 分钟前
React 与用户偏好:尊重用户已经在 OS 里设过的那些选项
前端·javascript·面试
RPGMZ22 分钟前
RPGMZ 游戏场景全局提示框 带三秒隐藏插件
前端·javascript·游戏·rpgmz
宠..24 分钟前
VS Code 修改 C++ 标准同时修改错误检测标准
java·linux·开发语言·javascript·c++·python·qt
JarvanMo31 分钟前
2026年最佳Flutter图标包
前端