开源Html5+Websocket+Mqtt实时聊天室 - Hi,王松柏

时间:2024-02-23 15:36:54

开源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