dcloudio / dcloudio/uni-app

关于【微信小程序】中使用【mqtt】引发【数据包损毁】的BUG

Open
#4,656 2 comments 0 reactions 1 assignee Claimed by @Otto-J View on GitHub
Good!完整的提问 提供了复现方案
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**
在uni-app中,通过npm i mqtt@version 引入mqtt后。
在**微信小程序**端连接mqtt(wss)服务时,出现了与服务器通讯的异常(可以正常建立http连接,但无法收到任何返回数据)。
疑似压缩编译工具包导致了部分代码错误。
mqtt日志显示数据包损毁

**复现步骤**
1. 建立新uni-app项目,选择vue2
2. npm install mqtt@3.0.0 (除了过高版本微信api不支持之外,其他版本均有此问题,如需手机端适配需要使用4.1.0)
3. 尝试建立mqtt(wss / wxs)连接
```
...
import mqtt from 'mqtt';
...

mqttClient = mqtt.connect('wxs://mqtt.xxx.xxx/mqtt', options);
mqttClient.on('connect', () => {
console.log('MQTT connected');
Vue.prototype.$bus.$emit('mqtt-connect', "connect");
});
```

4. 编译运行至微信小程序
5. 客户端发送数据
```
Request:
Request URL: wss://mqtt.xxx.xxx/mqtt
Request Method: GET
Status Code: 101 Switching Protocols

Response:
HTTP/1.1 101 Switching Protocols
Server: nginx/1.18.0 (Ubuntu)
Date: Sun, 31 Dec 2023 21:44:23 GMT
Connection: upgrade
sec-websocket-accept: *****************
sec-websocket-protocol: mqtt
upgrade: websocket
```

```
message:
send:
00000000: 10
00000000: 2700 0000 # 问题点:此处被补充满了八位,,正常情况下应当只发送27
00000000: 0004
00000000: 4d51 5454
00000000: 04
00000000: c2
00000000: 003c
00000000: 000f
00000000: 6d71 7474 6a73 5f33 6330 3237 3939 34 #id
00000000: 0004
00000000: **** ****
00000000: 0004
00000000: **** ****
连接断开,无任何响应数据
```

服务端日志 EMQX@5.4.0
```
2023-12-31T21:18:56.739535+00:00 [SOCKET] @123.14.*.*:59524 msg: websocket_terminated, reason: {shutdown,#{expected => <<"'MQTT' or 'MQIsdp'">>,hint => invalid_proto_name,received => <<>>,shutdown_count => frame_error}}
2023-12-31T21:19:01.772411+00:00 [WS-MQTT] @123.14.*.*:59526 msg: mqtt_packet_received, packet: {frame_error,#{expected => <<"'MQTT' or 'MQIsdp'">>,
hint => invalid_proto_name,received => <<>>}}
```

**预期结果**
mqtt正常建立连接

**实际结果**
连接断开,服务器无响应,日志反馈数据包损毁,日志如上

**系统信息:**
- 发行平台: 微信小程序
- 操作系统: win11 22H2 x86-64
- HBuilderX版本 3.99
- uni-app版本 3.99.2023122514.4132
- 设备信息 x86-64 微信开发者工具1.06.2312061 RC

**补充信息**
**已知的解决方案**
1. 不要使用npm引入mqtt,直接下载mqtt.min.js引入,存入static文件夹
2. 其他步骤照旧
3. 编译运行

** 正常情况下的请求结果**
```
Request:
Request URL: wss://mqtt.xxx.xx/mqtt
Request Method: GET
Status Code: 101 Switching Protocols

Response:
HTTP/1.1 101 Switching Protocols
Server: nginx/1.18.0 (Ubuntu)
Date: Sun, 31 Dec 2023 22:00:11 GMT
Connection: upgrade
sec-websocket-accept: **********8w=
sec-websocket-protocol: mqtt
upgrade: websocket

Message:
send:
00000000: 10
00000000: 27
00000000: 0004
00000000: 4d51 5454
00000000: 04
00000000: c2
00000000: 003c
00000000: 000f
00000000: 6d71 7474 6a73 5f61 3038 3734 6564 63 #id
00000000: 0004
00000000: **** ****
00000000: 0004
00000000: **** ****
resive:
00000000: 2002 0000
保持连接与心跳
```

当通过npm引入mqtt中时,mqtt模块被压缩如common中。当通过static引入时,位于static文件夹下未被编译压缩。

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.