# 使用paho-mqtt.js库实时聊天室

### 技术应用架构简介

系统架构包括：

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
```

{% hint style="info" %}
一般需为程序提权才可以运行Linux服务，指令：chmod -R 777 go\_build\_Coolpy7\_go\_linux
{% endhint %}

#### 运行Coolpy7 WS代理服务&#x20;

此功能即为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.下载源代码

<div align="left"><img src="/files/-L_BSzlFVpNhyT3Xu56I" alt="填写git地址下载源代码"></div>

2.修改连接信息本示例以本机运行整套系统为例输入127.0.0.1,端口号8083，假设把服务器端Coolpy7和Coolpy7-ws已经运行于阿里云之类的云服务器上改写为服务器的公网IP地址和端口即可，如果已绑定域名可直接填写域名如： test.coolpy.net&#x20;

<div align="left"><img src="/files/-L_BTa6gY_1IZeP8chwI" alt="代码位于chat.html第55行"></div>

3.修改完毕后选中工程中的index.html点击

<div align="left"><img src="/files/-L_BUEdGJc3m_fm6_e-v" alt=""></div>

至此已完成运行部署。以下是测试运行演示

![](/files/-L_BaqoiMvgeX9a9RiyA)

### 项目开源信息

服务器端开源地址： [https://github.com/Coolpy7](https://github.com/Coolpy7/Cp7Chat)

聊天室前端开源地址：<https://github.com/Coolpy7/Cp7Chat>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coolpy7.gitbook.io/coolpy7book/coolpy7-ling-yu-ying-yong-1/html5+websocket+mqtt-shi-shi-liao-tian-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.