vue前端用websocket连接rabbitmq

vue和html两种方式实现连接rabbitMQ实时接收发送消息，亲测可用！

小耿爱代码

3667人浏览 · 2022-06-14 17:20:53

小耿爱代码 · 2022-06-14 17:20:53 发布

项目场景：

项目中前端要通过rabbitMQ来进行实时接收消息数据，这里我只展示了vue如何接收数据，html可接收发送数据，HTML方式是转自某大佬，具体代码如下：

1.vue安装插件

npm install --save webstomp-client
npm install stompjs -S

2.新建js文件

提示：为了方便之后数据修改，建议直接在js文件里定义好数据导出进行引用，以下是新建的js文件里存放的内容：

export const PROTOCOL = 'ws'     //连接协议
export const IP = '127.0.0.1'  //ip
export const PORT = '8080'      //端口
export const ADDRESS = 'ws'  
export const ACCOUNT = 'admin'   //账号
export const PASSWORD = '123456'  //密码

3.在vue页面把该文件引入：

import { PROTOCOL, IP, PORT, ADDRESS, ACCOUNT, PASSWORD, SUBSCRIPT } from '@/utils/message'

4.在data中定义

export default {
  data() {
    return {
    	address: '',
    	client: null
    }
  }
}

5.挂载到mounted

mounted(){
    this.address = PROTOCOL + '://' + IP + ':' + PORT + '/' + ADDRESS;
    this.connect();
  },

6.方法

//连接
methods:{
    connect() {
      this.client = webstomp.client(this.address)
      this.client.connect(ACCOUNT, PASSWORD, () => {
        console.info('连接成功!')
        // 连接成功跳转方法
        this.subscribe()
      }, (e) => {
        console.info('连接失败!')
        // 失败跳转方法
        this.error()
      })
    },
    subscribe(){
      this.client.subscribe("路由消息", (data)=> {
      // data接收的是json类型的数据，所以要进行转换
        var message = JSON.parse(data.body)
        // 数据拿到之后可对数据进行操作
        
      })
    },
    error(err){
      console.log('err',err)
    },
}

7.运行结果

提示：下面就是连接成功之后显示的内容，后可以让后端发送消息打印到控制台查看获取的数据：

在这里插入图片描述

这是分割线-------------------------------------------------

以下是html文件连接rabbitMQ，亲测可用！

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta http-equiv="content-type" content="text/html" />  
    <meta name="author" content="https://github.com/jice1001" />  
    <title>websocket test</title>
	  <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
	  <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.js"></script>
    <script>
        var socket;
		function Connect(){  
			try{  
			    let client = new WebSocket(document.getElementById("urls").value);
			    client.onopen = sOpen;
			    client.onerror = sError;
			    client.onmessage = sMessage;
			    client.onclose = sClose;
			    socket = client;
			}catch(e){  
				alert('error');  
				return;  
			}  
		}  
		function sOpen(){
			alert('connect success!');
		}
		function sError(e){
			alert("error " + e);
		}
		function sMessage(msg) {
			console.log('message',msg)
		    doReceive(msg.data);
		}
		function sClose(e){
			alert("connect closed:" + e.code);
            socket.close();
		}  
		function Send(){
			socket.send(document.getElementById("msg").value);
		} 
		function Close() {
		    socket.close();  
		} 
		function doReceive(buffer) {
		    console.log("doReceive:",buffer);
			console.info('123',JSON.parse(buffer))
		    // blob：待读取的blob对象   -- https://www.jianshu.com/p/72f12d27d3ba
			// let a = buffer.text()
		 //    a.text().then(data => {
		 //        // data：指成功读取到的内容
		 //        console.log(data);
		 //        alert('server says:' + data);  
		 //    }).catch(err =>{
		 //        //err： 指读取失败后返回的错误内容
		 //        alert('no understand server says');
		 //    }) 
		};
	</script>
</head>  
   
<body>
    <input id="urls" type="text" value="ws://'ip地址':'端口地址'/websocket">
    <input id="msg" type="text">
    <button id="connect" onclick="Connect();">Connect</button>
    <button id="send" onclick="Send();">Send</button>
    <button id="close" onclick="Close();">Close</button>
</body>  
   
</html>

以上html文件是转载自其他大佬，如有侵权联系可删除，详情链接放在这里啦

链接: https://blog.csdn.net/glc22/article/details/119779632

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^