Web瀏覽器端通過https 使用mqtt通訊

做的產品簡介

這次需要做一個web端的上課平臺,有音視頻通訊,有白板(畫板)功能,有文字通訊等。
技術點

  1. 音視頻通訊需要走Webrtc

  2. 需要跟ios, android, windows, mac 客戶端互聯互通

  3. 一般通訊通過mqtt協議

MQTT簡介

MQTT(Message Queuing Telemetry Transport,消息隊列遙測傳輸)是IBM開發的一個即時通訊協議,有可能成為物聯網的重要組成部分。該協議支持所有平臺,幾乎可以把所有聯網物品和外部連接起來,被用來當做傳感器和制動器(比如通過Twitter讓房屋聯網)的通信協議。

MQTT組成

1 Broker (server端)
有EMQ、Mosquitto、 HiveMQ等等,這次公司采用的是EMQ

2 Client(web client端)

mqtt.js https://github.com/mqttjs/MQT...
Eclipse Paho Client https://eclipse.org/paho/clie...

經過實際測驗比較 Eclipse Paho的庫比較好用

MQTT遇到的坑

mqtt通過http通訊還算是比較簡單的,大概通過例子一個小時就可以掌握了。由于我做的項目有音視頻需要webrtc,
而webrtc是必須要通過https才能通信的,So 所有的連接都必須要通過ssl加密了。但是mqtt在https下面通訊一直報錯,連接不上,解決的過程比較波折

解決過程

1 部署本地https證書 (https在本地服務器環境中的部署)
通過openssl創建ssl證書
通過node.js 引入證書,代碼如下

const https = require('https');const options = {key: fs.readFileSync('./cert/key.pem'),cert: fs.readFileSync('./cert/cert.pem'),rejectUnauthorized: true
};let httpserver = https.createServer(options, app);httpserver.listen(3002, function () {console.log('Https server listening on port ' + 3002);
});

部署完了之后,還是通訊失敗。 想到了通過https 需要https的資源

2 部署mqtt Broker(服務端)

一開始自己使用了開源的Mosquitto測試,發現很難部署https環境,后來還是直接使用了EMQ,EMQ天然支持了。
文檔中也說明了端口,IOS 安卓等客戶端可以直接使用 1883端口,但是web是通過 8083和 8084端口進行通訊的。
圖片描述

在公司運維大神的成功協助下,配置好了 EMQ的https環境

我想這下應該好了吧,然后興奮的用 mqtt.js 連接,結果還是報錯了 :-(

3 更換mqtt client 類庫
使用了Eclipse Paho Client,終于,終于,成功了
代碼如下

const mqttHost = 'm.landi.com';const mqttPort = 8084;const mqttuseSSL = true;// Create a client instancemqttClient = new Paho.MQTT.Client(mqttHost, Number(mqttPort), this.mqttClientID);// connect the clientmqttClient.connect({onSuccess: onConnect, useSSL: mqttuseSSL});

最后,通過ios等客戶端過來的消息順利的實時抵達,在白板上畫線等各種操作實現就很容易了。

圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/540644.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/540644.shtml
英文地址,請注明出處:http://en.pswp.cn/news/540644.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

vga顯示模式_VGA的完整形式是什么?

vga顯示模式VGA:視頻圖形陣列 (VGA: Video Graphics Array) VGA is an abbreviation of "Video Graphics Array". VGA是“視頻圖形陣列”的縮寫 。 It is a three-row 15-pin DE-15 connector display hardware developed by IBM in 1987. It was first …

【iCore4 雙核心板_FPGA】例程十一:FSMC總線通信實驗——獨立地址模式

實驗原理: STM32F767上自帶FMC控制器,本實驗將通過FMC總線的地址獨立模式實現STM32與FPGA 之間通信,FPGA內部建立RAM塊,FPGA橋接STM32和RAM塊,本實驗通過FSMC總線從STM32向 RAM塊中寫入數據,然后讀取RAM出來的數據進行…

世界糧農組織五大健康食品_糧農組織的完整形式是什么?

世界糧農組織五大健康食品糧農組織:請注意 (FAO: For the Attention Of) FAO is an abbreviation of "For the Attention Of". FAO是“ For the Attention Of”的縮寫 。 It is an expression, which is commonly used in the Gmail platform. When a ma…

http 412 precondition failed

2019獨角獸企業重金招聘Python工程師標準>>> 今天在谷歌瀏覽器上刷新頁面的時候,出現了 如下失敗信息: HTTP 412 (Precondition Failed) 想想當時的動作是在發送ajax請求失敗之后,再刷新,就會出現上面的失敗問題。百度…

Python | Pyplot標簽

There are the following types of labels, 標簽有以下幾種, 1)X軸貼標 (1) X-axis labelling) plt.xlabel(Number Line)# Default labellingplt.xlabel(Number Line, colorgreen)#Font colour Changedplt.xlabel(Number Line, colorGreen, fontsize15)#Font size …

LTNS的完整形式是什么?

LTNS:很久沒看到 (LTNS: Long Time No See) LTNS is an abbreviation of "Long time, no see". LTNS是“長時間,看不見”的縮寫 。 It is an English phrase used when people meet and greet each other after a while when in between they…

MySQL Index Condition Pushdown

2019獨角獸企業重金招聘Python工程師標準>>> 一、Index Condition Pushdown簡介 ICP(index condition pushdown)是mysql利用索引(二級索引)元組和篩字段在索引中的where條件從表中提取數據記錄的一種優化操作。ICP的思…

ADBB的完整形式是什么?

ADBB:所有完成的再見 (ADBB: All Done Bye Bye) ADBB is an abbreviation to All Done Bye Bye. ADBB是All Done Bye Bye的縮寫。 Whenever a person wants to convey his message to another person, they use some sort of short-form in the text messages. ADB…

c 環境

系統ubuntu sudo apt-get install vim g openssh-server libgl1-mesa-dev檢查下安裝的版本gcc -v g -v make -v gdb -v 轉載于:https://blog.51cto.com/skinglzw/1964449

java.util (Collection接口和Map接口)

1:Collection和Map接口的幾個主要繼承和實現類 1.1 Collection接口 Collection是最基本的集合接口,一個Collection代表一組Object,即Collection的元素(Elements)。一些Collection允許相同的元素而另一些不行。一些能排…

scala 拆分字符串翻轉_Scala程序分割字符串

scala 拆分字符串翻轉A string is a collection that stores multiple characters, it is an immutable sequence which cannot be changed. 字符串是存儲多個字符的集合,它是不可更改的不可更改的序列。 分割字符串 (Splitting a string) In Scala, using the spl…

[轉載] python 簡單示例說明os.walk和os.path.walk的不同

參考鏈接: 示例說明Python2.x和Python3.x之間的重要區別 import os,os.path def func(arg,dirname,names): for filespath in names: print os.path.join(dirname,filespath) if __name__"__main__": print "os.walk" index 1 for root,subd…

c#中索引器是什么_C#中的索引器

c#中索引器是什么An Indexer is a special feature of C# to use an object as an array. If you define an indexer in a class then it will behave like a virtual array. Indexer is also known as smart array in C#. It is not a compulsory or essential part of OOPS. …

asp.net MVC5為WebAPI添加命名空間的支持

前言 默認情況下,微軟提供的MVC框架模板中,WebAPI路由是不支持Namespace參數的。這導致一些比較大型的項目,無法把WebApi分離到單獨的類庫中。 本文將提供解決該問題的方案。 微軟官方曾經給出過一個關于WebAPI支持Namespace的擴展&#xff0…

[轉載] Python3.X 線程中信號量的使用方法示例

參考鏈接: 示例說明Python2.x和Python3.x之間的重要區別 信號量semaphore 是一個變量,控制著對公共資源或者臨界區的訪問。信號量維護著一個計數器,指定可同時訪問資源或者進入臨界區的線程數。下面這篇文章主要給大家介紹了關于Python3.X 線…

從流程的自動化中獲得最大價值的10種方式

流程自動化很好,如果它可以節省時間并減少錯誤。但是如果它不能在業務流程中“很好地契合”,那么會難以得到普及。問問有誰沒有對語音助手感到傷腦筋。 所幸的是,某些最佳實踐讓你可以從流程自動化中獲得最大價值,以下就是其中的1…

java中null是常量嗎_C_NULL Julia中的常量

java中null是常量嗎Julia| C_NULL常數 (Julia | C_NULL Constant) C_NULL is a constant of Ptr{Nothing} type in Julia programming language, it represents the null pointer value, which is used for C Null Pointer while calling external code. C_NULL是Julia編程語言…

[轉載] Python京東搶購

參考鏈接: 從Python獲取輸入 Python京東搶購 分析其中提交信息接口的參數,可以成功搶購商品,并且可以提交訂單。。。。2018年7月17日 提交信息的獲取 直接提交信息對post提交分析其中的參數。 經過分析參數大多數在:https…

6.04 從字符串中刪除不需要的字符

需求:刪除所有的0和元音字母。 select ename,replace(replace(replace(replace(replace(ename,A,),E,),I,),O,),U,) as stripped1,sal,replace(sal,0,) stripped2from emp;轉載于:https://www.cnblogs.com/liang545621/p/7518766.html

Scala分號

Scala分號 (Scala semicolons) A semicolon or semi-colon (;) is a punctuation mark in programming, it is used to separate multiple lines of code. It is common in major programming languages like C, C, Java, Pascal. In modern programming languages like Python…