開源Html5+Websocket+Mqtt實時聊天室


本應用示例使用Coolpy7作為Mqtt服務器並啟用Websocket代理完美支持高並發大流量即時通過能力,本示以即時通信聊天為為例。還可以應用到其他軟件應用如:網頁客服系統、網站信息通知、網頁即時通信系統、網頁游戲等等

技術應用架構簡介

系統架構包括:

  1. MQTT服務端程序(Coolpy7)
  2. WebSocket代理服務端 (Coolpy7_ws)
  3. Html5聊天室前端

安裝並運行

運行Coolpy7核心服務

Coolpy7核心服務是一個最原始最單純功能完備的MQTT消息服務器端,包括功能有:QoS:0,QoS1,QoS2消息質量支持。Will消息支持等等。深入了解 https://mcxiaoke.gitbooks.io/mqtt-cn/content/

  1. 防止暴力連接攻擊,對已連接客戶端進行優先保護
  2. 防止空連接攻擊,當用戶連接建立后兩秒鍾內沒有進行身份驗證即主動關閉客戶端連接

通過ssh進入服務器192.168.200.201,並確保你已經按照 https://coolpy7.gitbook.io/coolpy7book/kai-shi-shi-yong/start 配置服務器操作系統的網絡優化配置。

Coolpy7核心服務運行后會自行構當前目錄下的data文件夾,此文件夾存放MQTT運行期所需求持久化的數據信息,使用的是開源項目 https://github.com/jacoblai/yiyidb,支持10億級秒op的高性能數據庫,數據庫內核使用的是Leveldb技術。

# 下載服務器端
git clone https://github.com/Coolpy7/Coolpy7.git && cd Coolpy7
# 解壓文件
unzip go_build_Coolpy7_go_linux.zip
# 提權
chmod -R 777 go_build_Coolpy7_go_linux
# 啟動Coolpy7 啟動參數
# l 當前服務Host地址 (默認為:1883即本地1883端口,此參數一般默認即可,無需配置)
# a 連接接入調度器最大線程,此值可防止暴力連接攻擊,對已連接客戶端進行優先保護 (默認值128)
./go_build_Coolpy7_go_linux
# 啟動成功后會打印如下信息,即說明服務端已正常啟動,host於1883端口,請確保相關防火牆配置可用
2018/10/29 12:59:55 Coolpy7 tcp is listening on [::]:1883

一般需為程序提權才可以運行Linux服務,指令:chmod -R 777 go_build_Coolpy7_go_linux

運行Coolpy7 WS代理服務

此功能即為Coolpy7核心服務提供WebSocket接入功能。通過ssh進入服務器192.168.200.203,並確保你已經按照 https://coolpy7.gitbook.io/coolpy7book/kai-shi-shi-yong/start 配置服務器操作系統的網絡優化配置。

  1. 千萬級WebSocket代理服務器
  2. 支持防爆力攻擊
# 下載服務器端
git clone https://github.com/Coolpy7/Coolpy7.git && cd Coolpy7
# 解壓文件
unzip go_build_Coolpy7_ws_go_linux.zip
# 提權
chmod -R 777 go_build_Coolpy7_ws_go_linux
# 啟動Coolpy7 WS Poxy
# r啟動參數 CP7核心服務器所在ip或域名 (例:core.coolpy.net:1883 or 192.168.200.201:1883)
# l啟動參數 當前服務Host地址 (默認為:8083即本地8083端口,此參數一般默認即可,無需配置)
./go_build_Coolpy7_ws_go_linux
# 啟動成功后會打印如下信息,即說明服務端已正常啟動,host於8083端口,請確保相關防火牆配置可用
2018/10/29 12:59:55 upstream 192.168.200.201:1883 ok
2018/10/29 12:59:55 Coolpy7 ws is listening on [::]:8083

運行Html5前端聊天室應用示例

  1. 下載開源項目:https://github.com/Coolpy7/Cp7Chat
  2. 修改連接地址為上一步服務器端ip和端口(具體ip和端口按閣下真實環境,全套程序運行於本機可統一使用127.0.0.1為連接地址)
  3. 通過Webstorm等web調試工具運行代碼

以WebStorm為例

1.下載源代碼

開源Html5+Websocket+Mqtt實時聊天室

填寫git地址下載源代碼

2.修改連接信息本示例以本機運行整套系統為例輸入127.0.0.1,端口號8083,假設把服務器端Coolpy7和Coolpy7-ws已經運行於阿里雲之類的雲服務器上改寫為服務器的公網IP地址和端口即可,如果已綁定域名可直接填寫域名如: test.coolpy.net

開源Html5+Websocket+Mqtt實時聊天室

代碼位於chat.html第55行

3.修改完畢后選中工程中的index.html點擊

開源Html5+Websocket+Mqtt實時聊天室

 

至此已完成運行部署。以下是測試運行演示

開源Html5+Websocket+Mqtt實時聊天室

 

項目開源信息

服務器端開源地址: https://github.com/Coolpy7

聊天室前端開源地址:https://github.com/Coolpy7/Cp7Chat


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM