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

场景示意图

 

 

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

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

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

引入3个依赖

npm install express amqplib body-parser

以下是我的依赖版本

编写server.js

const express = require('express');
const http = require('http');
const app = express();
const server = http.createServer(app);
const amqp = require('amqplib/callback_api');
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
 
app.post('/',(request, response) => {
    let orderData = request.body;
    console.log(orderData);
    sendOrderToQueue(JSON.stringify(orderData));
    response.end();
});
 
function sendOrderToQueue(obj){
    let url = {
        protocol: 'amqp',
        hostname: '10.211.55.12',
        port: 5672,
        username: 'heima',
        password: 'heima',
        vhost: '/itcast'
    }
    amqp.connect(url,(connError, connection)=>{
        if(connError){
            throw connError;
        }
        connection.createChannel((channelError,channel)=>{
            if(channelError){
                throw channelError;
            }
            const QUEUE = 'orderQueue';
            channel.assertQueue(QUEUE);
            channel.sendToQueue(QUEUE,Buffer.from(obj));
            console.log(`message send${QUEUE}`);
            channel.close(function () {
                connection.close();
            })
 
        });
 
    });
}
 
 
server.listen(60000,() => {
    console.log("server is up and running on port 60000");
});

启动服务，监听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的虚拟机）

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);
const amqp = require('amqplib/callback_api');
 
const io = socketIO(server,{
  cors: {
    origin: '*'
  }
});
 
io.on('connection',() => {
  console.log('user connected');
});
 
let url = {
  protocol: 'amqp',
  hostname: '10.211.55.12',
  port: 5672,
  username: 'heima',
  password: 'heima',
  vhost: '/itcast'
}
 
amqp.connect(url,(connError, connection)=>{
  if(connError){
    throw connError;
  }
  connection.createChannel((channelError, channel)=>{
    if(channelError){
      throw channelError;
    }
    const QUEUE = 'orderQueue';
    channel.assertQueue(QUEUE);
    channel.consume(QUEUE,(msg)=>{
      /*监听消息队列，一旦有客户订单生产，马上触发消费，
        把消费的信息发送给目标订单管理员的客户端
    */
      io.emit('clientOrder',msg.content.toString());
    },{
      noAck: true
    })
 
  })
});
 
server.listen(60001,() => {
  console.log("server is up and running on port 60001");
});

 

在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服务器发送给订单管理员的前端界面，这时候，订单管理员的前端界面就会实时渲染

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