前后端通信方式之websocket

作者在工作中经常遇到需要前后端实时消息通信的场景，WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术,依此我们可以快速实现实时通信。

Mq消息队列通信

常用的消息机制之一，经典生产-消费模式，生产者往消息队列中写消息，消费者可以读取队列中的消息。作者用到的是activeMQ,其他类型的应该也能很好兼容。

1. 什么是MQ?

请参考以下文章：
https://www.jianshu.com/p/9a0e9ffa17dd
https://www.jianshu.com/p/d11aea25d559

2. 如何在前端建立起MQ连接?

• 引入stompjs （本地包，cdn，npm..）内部其实实现了对websocket的协议封装。

npm install stompjs --save    //引入stompjs

• 简单配置

import Stomp from "stompjs";
export default {
  name: "App",
  created() {
    this.createMqConet();
  },
  methods: {
    //建立Mq连接
    createMqConet() {
        let ws = ws://192.168.199.252:61614/stomp; //连接地址，ws协议头
        let client = Stomp.client(ws); //创建
        //心跳机制
        client.heartbeat.outgoing = 0;
        client.heartbeat.incoming = 0;
  
        // 连接时的回调
        let on_connect = function(x) {
        client.subscribe("/topic/ub_screenDto", function(d) {
            //消息体
            //d.body
        });
        };
    
        // 出现错误时的处理回调
        let on_error = function() {
            console.log("error");
        };
        client.connect("", "", on_connect, on_error, "");
        }
  }
};

express + express-ws

当你的后台不是node承担时，如何发送实时消息？处理起来可能有点绕，这里我采用的是node充当中转站的角色，提供http接口供后台调用，一旦接口被调用时就向客户端发送消息（同时也负责挂载web服务，express.static('目录')）

• 首先要安装express以及express-ws：

npm i -S express express-ws

• 将上面两个包引入到我们的主模块app.js中，并创建服务：

let express = require('express');
let expressWs = require('express-ws');

//然后就是一系列express全家桶..
...
var app = express();
//执行我们引入的expressWs方法将app对象传入：
expressWs(app);

绑定收到消息与关闭的回调函数

  //关键代码
  app.ws('/websock', function (ws, req) {
    ws.on('message', (message) => {
      // console.log(ws); 
      wsClients.add(ws);
   
    });
    ws.on('close', (message) => {
      console.log('client is closed-->>' + message);
      const ind = wsClients.has(ws);

      if (ind) {
        wsClients.delete(ws); //从ws连接池中删除
      }
      if (wsInstance.getWss().clients.size == 0 ) {
        wsClients.clear(); //清空ws客户端连接池
      }
    });
  });
  /*
   * 开放接口
   * 发送信息 ->> 客户端
   */
  app.get('/websock/receive', (req, res) => {
    if (wsClients.length > 0) {
      wsClients.forEach(v => {
        v.send(JSON.stringify(req.query));
      })
    }
    res.end();
  })

代码已上传至个人github，立个flag，近期本人尽力多更新多总结