实现：为了实现实时与rabbitMQ消息互通，聊天框的功能

1.下载stompjs 依赖

下载：

npm i stompjs

引入前端页面：

import Stomp from ‘stompjs’

什么是stompjs

stomp-js 是一个用 JavaScript 编写的 STOMP 协议客户端，它提供了在浏览器或 Node.js 环境下使用 STOMP 协议与 ActiveMQ、RabbitMQ 等消息中间件进行通讯的能力。

STOMP（Simple Text Oriented Messaging Protocol）协议是一种支持异步消息传输的协议，在可靠性、易用性和扩展性方面都非常优秀，因此被广泛应用于分布式系统中。stomp-js 简化了 STOMP 协议的使用，使得开发者能够更加专注于业务逻辑的实现。

2. vue3 中的主体代码

let MQTT_SERVICE = `ws://${自己的IP:端口}/ws`  //其实IP不同并不会导致跨域
let client = reactive(Stomp.client(MQTT_SERVICE))

onMounted(() => {
  connect()
});


const onConnected = (frame) => {
  console.log("Connected: " + frame);
  //绑定交换机exchange_pushmsg是交换机的名字rk_pushmsg是绑定的路由key
  var exchange = "/amq/queue/XXXX";
  //创建随机队列用上面的路由key绑定交换机,放入收到消息后的回调函数和失败的回调函数
  client.subscribe(exchange, responseCallback, onFailed);
  console.log(frame)
}
const onFailed = (frame) => {
  console.log("Failed: " + frame);
  ElMessage({
    message: 'MQ连接失败,自动重连尝试',
    type: 'error',
    plain: true,
  })
   //******需要加下列代码才能重新new 对象连接，否则会包超时连接断开的问题
   client = Stomp.client(MQTT_SERVICE); //一个实例只能connect一次，得new个新的实例才可能进行新的connect
   Stomp.over(client);
      //失败重连
    connect();
}
const responseCallback = (frame) => {
  console.log("得到的消息khc msg=>" + frame.body);
  console.log(frame.body)
  //接收到服务器推送消息，向服务器定义的接收消息routekey路由rk_recivemsg发送确认消息
      var msg = JSON.parse(JSON.parse(frame.body));
       messages.value.push(msg);
      console.log(messages,'------messages是否存进最新记录')
       //将滚动条拉到最底下
    setTimeout(() => {
      var element = document.getElementById("rightContent");
      console.log(element.scrollHeight, '-------element.scrollHeight');
      element.scrollTop = element.scrollHeight;
    }, 0);
}

const connect = () => {
//这部分的账号密码以及虚拟主机信息要找后端要
  var headers = {
    "login": "admin",
    "passcode": "admin",
    //虚拟主机，默认“/”
    "host": "khfw"
  };
  //创建连接,放入连接成功和失败回调函数
  client.connect(headers, onConnected,onFailed);
  //client.debug = null  //不显示关于MQ的控制台打印信息
}

3.遇到的问题以及如何解决

1. WebSocket connection to ‘ws://XXXXX:XXXX/ws’ failed

这个原因是暂时排查有两种可能：
1.代理的这个地址XXXXX:XXXX 本来就不存在，端口或者IP有问题，才导致的问题

• 看IP存不存在？就在自己的本地ping一下看看
  
  或者
  如果ping的通就说明IP没得问题，否则找后端好好确信IP的地址以及确认自己的网络情况

• 看端口号对不对？
  上面的IP如果没问题就进入这一步，
  将代码中ws://XXXXX:XXX/ws 中的XXXXX:XXX/ws 复制到浏览器中
  
  如果出现上图的页面“该网页无法正常运作”说明端口号没问题，可以正常连通
  如果出现下图的页面“无法访问此网站”说明后端给的端口号有问题，这个端口后端没有开或者其他问题，与前端无关了
  

2.如果是把XXXXX:XXXX 进行了前端代理，那可能是前端代理部分写的有问题

正常情况下，stompjs 好像不存在跨域，直接给ws://XXXXX:XXX/ws 补全IP和端口是没有问题的，
如果自己要在项目中写代理按照下面的格式

2.消息一下收的到，一下收不到的问题

排查绑定的路由key是否存在,在rabbitMQ 面板中查看是否存在这个key