vue使用socket.io-client实现实时通信（结合使用AMQP协议的RabbitMQ）

谁践踏了优雅 2022-11-01 13:55 1253阅读 0赞

### 场景示意图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70][]

### 第一步 创建一个nodejs的http服务器，用来发送消息到rabbitmq ###

创建第一个http服务器，监听60000端口

创建文件夹，命名为RabbitMQServer01 ，然后创建一个 server.js 文件

引入3个依赖

npm install express amqplib body-parser

以下是我的依赖版本

![20210224170153608.png][]

编写server.js

启动服务，监听60000端口

node src/http/server.js

### 第二步 创建一个vue-cli脚手架，作为客户端，客户端里边也有一个http服务器，监听60001端口 ###

vue init webpack vuesocket\_and\_rabbitmq\_demo

引入多个依赖， 分别是 vue-socket.io ， socket.io-client ， socket.io ， express ， amqplib

npm install vue-socket.io socket.io-client socket.io express amqplib

在main.js导入依赖，并且使用它

import VueSocketIO from 'vue-socket.io'
    import SocketIO from 'socket.io-client'
    
    Vue.use(new VueSocketIO({
      debug: true,
      connection: SocketIO('ws://127.0.0.1:60001')
    }));

配置proxyTable代理，以解决CORS跨域问题

proxyTable: {
          '/socket.io':{
            target: 'http://127.0.0.1:60001/', // target host
            changeOrigin: true, // needed for virtual hosted sites
            logLevel: 'debug'
          },
          '/sockjs-node': {
            target: 'http://127.0.0.1:60001',
            ws: false,
            changeOrigin: true
          }
        }

创建第二个http服务器，监听60001端口

在本vue-cli脚手架项目的 src目录下新建一个config目录，新建一个receiver.js文件，这是用来监听消息队列的，如果消息队列里面一旦有数据，就会马上执行消费操作

编写receiver.js文件

（10.211.55.12是安装了RabbitMQ的虚拟机）

在HelloWorld.vue组件中，编写接收消息的代码

在<script>标签里边，引入socket.io-client包，并且连接到127.0.0.1:60001的http服务器

import io from 'socket.io-client';
    const socket = io('http://127.0.0.1:60001');

编写监听客户订单的代码

created() {
            socket.on('clientOrder',(data) =>{
              console.log(data)
            });
          }

启动第二个http服务器，监听60001端口（用来消费rabbitmq的信息，然后把消费的信息通过socket转发给前端进行实时渲染）

node src/config/receiver.js

启动客户端

npm run dev

### 第三步 测试 ###

使用Postman发送一个post请求，相当于模拟一个老百姓在京东买了一个东西，提交了一个订单发送请求，委托60000端口服务器把这个订单数据发送给10.211.55.12:5672机子上的RabbitMQ上，然而，订单管理员正在监听 60001 端口的服务器，即监听RabbitMQ的机子上有没有新的订单产生，发现有订单产生了，那么马上消费，把消费的数据通过socket.emit('clientOrder',\{orderData\}) 这样子的socket方法，从60001服务器发送给订单管理员的前端界面，这时候，订单管理员的前端界面就会实时渲染

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1][]

订单管理员看到了实时更新的数据：（这是浏览器控制台，访问的是是HelloWorld.vue的界面）

![20210224172640583.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70]: /images/20221024/c50c73e834c242dc8ca10eca6de571b2.png
[20210224170153608.png]: /images/20221024/db191858c69a4324b1813f6cc074e172.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1]: /images/20221024/8e78771a6eba4436ab723c77c17a93dc.png
[20210224172640583.png]: /images/20221024/3ee5122323984bb38f6aff121e09c4dc.png