手撸一个一起看电影应用-3-Vue前端信息收发

原文参考

使用思路说明

可以用于实现：即时通讯，同步操作、消息通知等功能。

即时通讯的原理：

前端在创建一条消息数据后，把需要更新聊天记录的通知，通过Rabbitmq的交换机，告诉所有写了同一个key值在进行消息监听的访问者（其他前端）

访问者（其他前端）在接收到这一通知的时候，触发已经写好的消息更新操作函数

同步操作的原理：

前端在进行一个操作之后，通过交换机，把自己做了什么事情告诉其他正在监听的访问者（其他前端）

访问者（其他前端）在接收到具体的操作之后，调用对应的函数进行相同的操作

RabbitMQ安装Stom

在服务器上部署RabbitMQ

Vue前端安装Stom

• 普通项目导入js文件

<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>

• vue项目npm安装依赖
  npm install stomps

rabbitmq_manager创建一个测试交换机

== 交换机相当于一个快递员 ==

未映射端口的地址 服务器IP:15672 映射了端口的地址 服务器IP:8002

vue页面接通RabbitMQ的信息收发

• 前端监听接收交换机的信息

// 绑定交换机：exchange_pushmsg是交换机的名字；rk_pushmsg是绑定的路由key
// exchange_pushmsg就是我们制定的快递员，rk_pushmsg就是让快递员快递东西的地址

var exchange = "/exchange/exchange_pushmsg/rk_pushmsg";
//创建随机队列用上面的路由key绑定交换机,放入收到消息后的回调函数和失败的回调函数
this.client.subscribe(exchange, this.responseCallback, this.onFailed);
console.log(frame)

• 前端往交换机发送信息

this.client.send("/exchange/exchange_pushmsg/rk_recivemsg", {"content-type":"text/plain"}, frame.body);

• 完整实例

import Stomp from 'stompjs'

export default {
    name: 'messageNotice',
    data () {
    	return {
    		client: null
		}
    },
    created() {
    //初始化连接
        this.connect();
    },
    methods: {
    //webSocket连接成功后回调函数
        onConnected(frame) {
            console.log("Connected: " + frame);
			
            // 绑定交换机：exchange_pushmsg是交换机的名字；rk_pushmsg是绑定的路由key
			// exchange_pushmsg就是我们制定的快递员，rk_pushmsg就是让快递员快递东西的地址
			
            var exchange = "/exchange/exchange_pushmsg/rk_pushmsg";
            //创建随机队列用上面的路由key绑定交换机,放入收到消息后的回调函数和失败的回调函数
            this.client.subscribe(exchange, this.responseCallback, this.onFailed);
            console.log(frame)
        },
        onFailed(frame) {
            console.log("Failed: " + frame);
        },
        responseCallback(frame) {
            console.log("得到的消息 msg=>" + frame.body);
            console.log(frame)
            //接收到服务器推送消息，向服务器定义的接收消息routekey路由rk_recivemsg发送确认消息
			// 这句话是往交换机发送信息，对应快递员exchange_pushmsg，对应地址rk_recivemsg
            this.client.send("/exchange/exchange_pushmsg/rk_recivemsg", {"content-type":"text/plain"}, frame.body);
        },
        connect() {
        //这里填你rabbitMQ的连接ip地址直接替换localhost:15674就好其它的不用改
            this.client= Stomp.client("ws://localhost:15674/ws")
            //填写你rabbitMQ登录的用户名和密码
            var headers = {
                "login": "admin",
                "passcode": "admin",
                //虚拟主机，默认“/”
                "host": "/"
            };
            //创建连接,放入连接成功和失败回调函数
            this.client.connect(headers, this.onConnected, this.onFailed);
        },
  ｝