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

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

相关推荐
code_Bo1 小时前
使用AI完成Swagger接口类型在前端自动生成的工具
前端·后端·架构
加个鸡腿儿2 小时前
从"包裹器"到"确认按钮"——一个组件的三次重构
前端·vue.js·设计模式
Kel2 小时前
深入 OpenAI Node SDK:一个请求的奇幻漂流
javascript·人工智能·架构
子兮曰2 小时前
AI写代码坑了90%程序员!这5个致命bug,上线就炸(附避坑清单)
前端·javascript·后端
猪八宅百炼成仙2 小时前
PanelSplitter 组件:前端左右布局宽度调整的实用解决方案
前端
锋利的绵羊2 小时前
【解决方案】微信浏览器跳出到浏览器打开、跳转到app,安卓&ios
前端
终端鹿2 小时前
Vue3 核心 API 补充解析:toRef / toRefs / unref / isRef
前端·javascript·vue.js
刘宇琪2 小时前
如何有效缓解大语言模型生成内容中的事实性错误(幻觉)
前端
英俊潇洒美少年2 小时前
vue的事件循环
前端·javascript·vue.js