前面需要加入stomp相关的插件
参照这位大佬吧
https://blog.csdn.net/weixin_40461281/article/details/81806921?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165233362716781432972420%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=165233362716781432972420&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-1-81806921-null-null.142v9pc_search_result_control_group,157v4control&utm_term=RabbitMQ+stomp&spm=1018.2226.3001.4187
然后做这块
<html>
<head>
<title>WebSocket</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="main">
<div id="message"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- stomp协议的客户端脚本 -->
<script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
<!-- SockJS的客户端脚本 -->
<script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.6.0/sockjs.js"></script>
<script type="text/javascript">
var connectMq = () => {
var ws = new WebSocket('ws://localhost:15674/ws');
// 获得Stomp client对象
var client = Stomp.over(ws);
var on_connect = () => {
// 只能用RoutingKey的形式,交换机尝试了一下失败了,如果有成功的Q我一下
client.subscribe("/queue/nler", (data) => {
var msg = data.body
alert("收到数据" + msg)
console.log(JSON.parse(msg))
})
}
var on_error = function () {
console.log('error');
window.setTimeout(() => {
connectMq();
},5000)
};
client.connect('aa', 'aa', on_connect, on_error, '/')
}
connectMq()
</script>
</body>
</html>