MQTT之https页面请求问题

网站开启了https，开始总会遇到各种问题，用户登入认证失败，视频请求失败，mqtt连接失败等问题。是不是很不爽，来看看，教你怎么解决这些问题。
1.网站开启https，mqtt连接失败
解决过程，开启activemq的ssl加密传输，前端直接请求wss://192.168.1.10:6165，注意6165是我开启了mqtt的ssl端口

        <!--
            The transport connectors expose ActiveMQ over a given protocol to
            clients and other brokers. For more information, see:

            http://activemq.apache.org/configuring-transports.html
        -->
        <transportConnectors>
            <!-- DOS protection, limit concurrent connections to 1000 and frame size to 100MB -->
            <transportConnector name="openwire" uri="tcp://0.0.0.0:61616?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
            <transportConnector name="amqp" uri="amqp://0.0.0.0:5672?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
            <transportConnector name="stomp" uri="stomp://0.0.0.0:61613?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
            <transportConnector name="mqtt" uri="mqtt://0.0.0.0:1883?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
            <transportConnector name="ws" uri="ws://0.0.0.0:61614?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>
       <!--     <transportConnector name="wss" uri="wss://0.0.0.0:61615?maximumConnections=1000&amp;wireFormat.maxFrameSize=104857600"/>  -->
        </transportConnectors>

        <!-- destroy the spring context on shutdown to stop jetty -->
        <shutdownHooks>
            <bean xmlns="http://www.springframework.org/schema/beans" class="org.apache.activemq.hooks.SpringContextHook" />
        </shutdownHooks>

   <!--  
       <sslContext>
          <sslContext keyStore="file:${activemq.conf}/broker1.ks"
                keyStorePassword="adminadmin" trustStore="file:${activemq.conf}/broker1.ts"
                trustStorePassword="adminadmin"
          />
       </sslContext>
   -->

    </broker>

此方案最后失败了。

解决方案
借鉴用户认证思想，使用nginx反向代理到没有开启ssl的mqtt服务器
网站前端mqtt请求：wss://192.168.1.10/mqtt/

<template>
  <div class="hello">
    <p>MQTT:{{msg}}</p>
    <button @click="handleclick">发布</button>
  </div>
</template>

<script>
import mqtt from 'mqtt'

export default {
  name: 'HelloWorld',
 data() {
    return {
      mtopic: "mqtt_topic",
      msg: "test-test-test!",
      client: {}
    };
  },
  mounted() {
    this.client = mqtt.connect('wss://192.168.1.10/mqtt/', {
      username: "88888888",
      password: "88888888"
    });
    this.client.on("connect", () =>{
      console.log("连接成功");
      this.client.subscribe(this.mtopic, (err)=> {
        if (!err) {
          console.log("订阅成功:" + this.mtopic);
        }
      });
    });
    this.client.on("message", (topic, message) => {
      this.msg = message
    });
  },
  methods: {
    handleclick: function() {
      this.client.publish(this.mtopic, this.msg);
    }
  }
}
</script>
<style scoped>
</style>

nginx反向代理配置

          location /mqtt/ {
                proxy_pass http://192.168.1.10:61614/;
                proxy_set_header   Host             $host;
                proxy_set_header   X-Real-IP        $remote_addr;
                proxy_set_header   X-Forwarded-For  $remote_addr;
                proxy_set_header   X-Forwarded-Proto http;

                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
        }