Vue stompjs+WebSocker RabbitMq 使用教程实例


Vue RabbitMq 使用教程实例

文章简介

WebSocker StompJs SockJs 关系

http与websocket：

http超文本传输协议，大家都非常熟悉，http有1.0、1.1、 2.0几个版本，从http1.1起，默认都开启了Keep-Alive，保持连接持续性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输http数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接，这样就降低了资源的消耗优化性能，但是Keep-Alive也是有时间限制的，还有一个客户端只能主动发起请求才能获取返回数据，并不能主动接收后台推送的数据，websocket便应运而生。

websocket 是 html5

新增加特性之一，目的是浏览器与服务端建立全双工的通信方式，解决 http 请求-响应带来过多的资源消耗，同时对特殊场景应用提供了全新的实现方式，比如聊天、股票交易、游戏等对对实时性要求较高的行业领域。

STOMP ：

STOMP：Simple Text Oriented Message Protocol——面向消息的简单文本协议。
SockJS 为 WebSocket 提供了 备选方案。但无论哪种场景，对于实际应用来说，这种通信形式层级过低。 STOMP协议，来为浏览器 和 server 间的 通信增加适当的消息语义。

SockJS：

是一个JavaScript库，为了应对许多浏览器不支持WebSocket协议的问题，设计了备选SockJs。SockJS 是 WebSocket 技术的一种模拟。SockJS会尽可能对应 WebSocket API，但如果WebSocket 技术不可用的话，会自动降为轮询的方式。

文章导读

sockjs、stompjs 安装

rabbitmq 配置

消息发布、订阅 实例

安装

sockjs 安装

1
npm install sockjs

问题：Module not found: Error: Can’t resolve 'fs’

1
npm install fs

问题未解决：在源码中引入出现问题，修改Webpack 配置 文件

1
2
3
 node: {
     fs: "empty"
  }

stompjs安装

1
npm install stompjs

组件中引用

1
import Stomp from "stompjs";

运行

**报错 Can’t resolve net in xxxx **
在这里插入图片描述

解决

1
npm install net

报错 WebSocket is not defind

在这里插入图片描述

解决

Rabbitmq 开启 web-stomp 插件

通过 stomp 连接 RabbitMQ

1
2
rabbitmq-plugins enable rabbitmq_web_stomp
rabbitmq-plugins enable rabbitmq_web_stomp_examples

配置

stomp 配置

查询 rabbitmq 配置文件位置

方式一：

打开日志文件 搜索 config

在这里插入图片描述

C:\Users\FOREVER\AppData\Roaming\RabbitMQ\log

方式二：

在这里插入图片描述
在这里插入图片描述

详细配置参考

配置完重启服务

service 服务 ->Rabbit Mq 重启

Vue 消息 订阅发布实例

Template

1
2
3
4
5
6
<template>
     <div>
          <input type="text" placeholder="发送信息..." v-model="text">
                <span class="input-group-btn"><button type="button" @click="onSend">发送</button></span>
     <div>
 <template>

Java Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script>
  import SockJS from 'sockjs-client';
  import Stomp from "stompjs";

  export default {
    name: "message",
    data() {
      return {
        stomp: '',
        msg: [],
        text: ''
      }
    },
    mounted() {
      this.connect()
    },
    methods: {
      onError: function (frame) {
        //错误信息
        console.log('Failed: ' + frame)
      },
      onmessage: function (frame) {
        //接收消息
        console.log("This is Message")
        console.log(JSON.parse(frame.body))
      },
      connect: function () {
        var _this = this;
        let socket = '';
        socket = new WebSocket('ws://127.0.0.1:15601/ws');  
        this.stomp = Stomp.over(socket);
        // {} 用户配置 可选
        this.stomp.connect({}, (frame) => {
          console.log('Connected:' + frame);
          ('/topic/test'),
            this.stomp.subscribe('/topic/test', function (frame) {
              _this.onmessage(frame);
            });
        }, (err) => {
          console.log("Connect error" + err)
          this.re
      }, reconnection() {
      //重连
        var _this = this;
        setTimeout(function () {
          _this.connect();
        }, 5000)
      },
      onSend() {
        //发送消息
        let header = {};
        let data_ = {
          uid: '088263',
          type: 'string',
          message: this.text
        };
        let data = JSON.stringify(data_);
        this.stomp.send("/topic/test", {
          header,
        }, data);
      }
    }
  }
</script>

文章持续完善