微信小程式整合MQTT

2022-04-29 12:39:09 字數 2825 閱讀 6376

參考:

杭州一家公司開發的emqx,部署非常簡單,功能強大。目前評估了免費版本功能還夠用。

乙個非常強大的千星+的mqtt js客戶端,

github:

很貼心還提供了cdn:

web伺服器,本文用於反向**。

使用linux的朋友推薦wxdt,體驗非常不錯,記得裝wine,不然是沒法除錯的。

開發環境把"不要驗證網域名稱..."勾上,繞開雲伺服器,網域名稱,證書這些部署才需要的東西。

//乙個全域性變數...

var client = null;

注意:實測以下配置僅在模擬器中或ios真機中有效,對於android真機並不起作用。

重點注意一下options裡面的那個port,估計若是沒人告訴你得撲騰一會。mqtt.js缺省會通過443埠建立web socket連線,如果你像我一樣用的是emqx那麼你需要指定埠。

協議用wx(ws)就好了,畢竟實在開發機除錯用的先別搞那麼複雜的。

connectmqtt: function

()

client = mqtt.connect('wx:///mqtt', options)

client.on('reconnect', (error) =>)

client.on('error', (error) =>)

let that = this

; client.on('connect', (e) =>,

function

(err)

})})

client.on('message', function

(topic, message) )

},

如果上一步你可以連線上,那麼恭喜你雙向傳送訊息啦~

client.publish('message.queue', 'hello mqtt')
所以你需要走完這個流程: 開通雲伺服器->買網域名稱->備案->買證書(阿里雲有個人免費的symantec,有效期一年)->部署

如果配置無誤那麼點選connect按鈕會顯示已連線。

注意:實測以下配置僅在模擬器中或ios真機中有效,對於android真機並不起作用。

emqx預設wss埠為8084,把之前的8083改為8084。

把ip位址換成網域名稱,必須備案。

上線需要使用wss協議,所以這裡把伺服器協議改為wxs(wss,wxs的mqtt.js定的別問我)。

connectmqtt: function

()

client = mqtt.connect('wxs:///mqtt', options)

client.on('reconnect', (error) =>)

client.on('error', (error) =>)

let that = this

; client.on('connect', (e) =>,

function

(err)

})})

client.on('message', function

(topic, message) )

},

需要你根據實際情況修改的地方:

server .cn;

listen 443 ssl;

ssl_certificate .pem;

ssl_certificate_key .key;

ssl_session_timeout 5m;

ssl_protocols tlsv1 tlsv1.1 tlsv1.2;

ssl_ciphers ecdhe-rsa-aes128-gcm-sha256:high:!anull:!md5:!rc4:!dhe;

ssl_prefer_server_ciphers on;

location /mqtt

}

配套js**:

connectmqtt: function() 

client = mqtt.connect('wxs:///mqtt', options)

client.on('reconnect', (error) => )

client.on('error', (error) => )

let that = this;

client.on('connect', (e) => , function(err)

})})

client.on('message', function (topic, message) )

},

ok,

(微信小程式)一 初識微信小程式

需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...

微信小程式

2.單獨設定某一頁面下的頂部欄的背景顏色,在其對應的.json檔案下修改即可 3.this.setdata 注意 onload函式下面執行的是非同步操作,非同步操作裡面this.data.直接賦值,是無效的,必須使用this.setdata this.setdata msg he llo wor l...

微信小程式

你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下markdown的基本語法知識。全新的介面設計,將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式,markdown將 片顯示選擇的高亮樣式進行展示 全新的ka...