Flutter項目集成mqtt的過程記錄

轉載請以鏈接形式標明出處：
本文出自:103style的博客

修正記錄：
2019/11/05 13:12 ： 修改證書驗證內容，目前雙向驗證還有問題 flutter issues 44164
2019/11/05 17:26 ： 修改證書驗證內容，處理雙向驗證失敗的問題。

目錄

• 遇到的相關報錯信息
• 環境
• 集成過程
• 證書驗證

---

遇到的相關報錯信息

Unhandled Exception: FileSystemException: Cannot open file, path = '...' 
(OS Error: No such file or directory, errno = 2)

TlsException: Failure trusting builtin roots

SocketException: OS Error: Connection reset by peer, errno = 104

環境

flutter doctor -v

>flutter doctor -v
[√] Flutter (Channel stable, v1.9.1+hotfix.5, on Microsoft Windows [Version 10.0.17134.1006], locale zh-CN)
    • Flutter version 1.9.1+hotfix.5 at D:\flutter
    • Framework revision 1aedbb1835 (2 weeks ago), 2019-10-17 08:37:27 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at D:\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 28.0.3
    • Java binary at: D:\Android\AndroidStudio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.
[√] Android Studio (version 3.5)
    • Android Studio at D:\Android\AndroidStudio
    • Flutter plugin version 40.2.2
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

---

集成過程

首先來到 flutter package 這個 flutter 相關的庫網站，然後搜了下 mqtt，找到 mqtt_client 這個庫。
上面有提供以下沒有安全認證的使用示例。
原示例地址：https://pub.flutter-io.cn/packages/mqtt_client#-example-tab-

import 'dart:async';
import 'dart:io';
import 'package:mqtt_client/mqtt_client.dart';
///服務器地址是 test.mosquitto.org ， 端口默認是1883
///自定義端口可以調用 MqttClient.withPort(服務器地址, 身份標識, 端口號);
final MqttClient client = MqttClient('test.mosquitto.org', '');

Future<int> main() async {
  client.logging(on: false);///是否開啓日誌
  client.keepAlivePeriod = 20;///設置超時時間
  client.onDisconnected = onDisconnected;//設置斷開連接的回調
  client.onConnected = onConnected;//設置連接成功的回調
  client.onSubscribed = onSubscribed;//訂閱的回調
  client.pongCallback = pong;//ping的回調
  try {
    await client.connect(); ///開始連接
  } on Exception catch (e) {
    print('EXAMPLE::client exception - $e');
    client.disconnect();
  }
  ///檢查連接結果
  if (client.connectionStatus.state == MqttConnectionState.connected) {
    print('EXAMPLE::Mosquitto client connected');
  } else {
    print('EXAMPLE::ERROR Mosquitto client connection failed - disconnecting, status is ${client.connectionStatus}');
    client.disconnect();
    exit(-1);
  }

  ///訂閱一個topic: 服務端定義的事件   當服務器發送了這個消息，就會在 client.updates.listen 中收到
  const String topic = 'test/lol';
  client.subscribe(topic, MqttQos.atMostOnce);

  ///監聽服務器發來的信息
  client.updates.listen((List<MqttReceivedMessage<MqttMessage>> c) {
    final MqttPublishMessage recMess = c[0].payload;
    ///服務器返回的數據信息
    final String pt = MqttPublishPayload.bytesToStringAsString(recMess.payload.message);
    print( 'EXAMPLE::Change notification:: topic is <${c[0].topic}>, payload is <-- $pt -->');
  });
  ///設置public監聽，當我們調用 publishMessage 時，會告訴你是都發布成功
  client.published.listen((MqttPublishMessage message) {
    print('EXAMPLE::Published notification:: topic is ${message.variableHeader.topicName}, with Qos ${message.header.qos}');
  });

  ///發送消息給服務器的示例
  const String pubTopic = 'Dart/Mqtt_client/testtopic';
  final MqttClientPayloadBuilder builder = MqttClientPayloadBuilder();
  builder.addString('Hello from mqtt_client');///這裏傳 請求信息的json字符串
  client.publishMessage(pubTopic, MqttQos.exactlyOnce, builder.payload);

  ///解除訂閱
  client.unsubscribe(topic);
  
  ///斷開連接
  client.disconnect();
  return 0;
}
void onSubscribed(String topic) {
  print('EXAMPLE::Subscription confirmed for topic $topic');
}
void onDisconnected() {
  print('EXAMPLE::OnDisconnected client callback - Client disconnection');
  if (client.connectionStatus.returnCode == MqttConnectReturnCode.solicited) {
    print('EXAMPLE::OnDisconnected callback is solicited, this is correct');
  }
  exit(-1);
}
void onConnected() {
  print('EXAMPLE::OnConnected client callback - Client connection was sucessful');
}
void pong() {
  print('EXAMPLE::Ping response client callback invoked');
}

然後我就按這個示例跑了以下，提供的這個測試服務器是可以連接成功的。

---

證書驗證

但是我這邊服務器做了證書驗證，需要配置證書，然後就找到 mqtt_client 這個庫的github地址.

然後在 issue 107 中發現 作者有提供配置證書的示例。
示例地址： https://github.com/shamblett/mqtt_client/blob/master/example/iot_core.dart

作者在 /example/pem 這個目錄下提供了一個證書的文件，
然後通過 flutter 提供的 context.setTrustedCertificates(filepath) 設置證書。主要邏輯如下：

import 'dart:async';
import 'dart:io';
import 'package:path/path.dart' as path;
import 'package:mqtt_client/mqtt_client.dart';

Future<int> main() async {
  ... 
  client.secure = true;
  final String currDir =
      '${path.current}${path.separator}example${path.separator}';
  final SecurityContext context = SecurityContext.defaultContext;
  context.setTrustedCertificates(currDir + path.join('pem', 'roots.pem'));
  client.securityContext = context;
  client.setProtocolV311();

  await client.connect();
  ...
  return 0;
}

然後跑起來就發現了第一個問題：

Unhandled Exception: FileSystemException: Cannot open file, path = '...' 
(OS Error: No such file or directory, errno = 2)

然後我就在 issue 107 下問了這個庫的作者，issue 那裏可以看到我們的對話，庫的作者最後說時 flutter 的 不支持 //crt/crt/cilent.crt 這種路徑的訪問。

我也嘗試了 通過配置 assets 來訪問，但是也沒有相應獲取路徑的方法。

然後我就來到 flutter 的 github 地址那提了這個 issue：flutter/issues/43472，然而到目前 2019/11/01 16:30 爲止，flutter 開發人員並沒有提供相關的解決方案。

---

然後，最後我就想，即然讀不了工程裏面的文件，我就先寫到手機文件系統中去，然後再獲取這個文件的路徑。
參考官方的 文件讀寫教程.
如下：

/// 獲取證書的本地路徑
Future<String> _getLocalFile(String filename,
    {bool deleteExist: false}) async {
  String dir = (await getApplicationDocumentsDirectory()).path;
  log('dir = $dir');
  File file = new File('$dir/$filename');
  bool exist = await file.exists();
  log('exist = $exist');
  if (deleteExist) {
    if (exist) {
      file.deleteSync();
    }
    exist = false;
  }
  if (!exist) {
    log("MqttUtils: start write cert in local");
    await file.writeAsString(mqtt_cert);///mqtt_cert 爲證書裏面對應的內容
  }
  return file.path;
}

更新於 2019/11/05 17:26 START

然後修改連接的代碼爲：

_client.secure = true;
final SecurityContext context = SecurityContext.defaultContext;

String caPath =
    await _getLocalFile("ca.pem", cert_ca, deleteExist: deleteExist);
String clientKeyPath = await _getLocalFile("clientkey.pem", cert_client_key,
    deleteExist: deleteExist);
String clientCrtPath = await _getLocalFile("client.pem", cert_client_crt,
    deleteExist: deleteExist);

try {
  context.setTrustedCertificates(caPath);
  context.useCertificateChain(clientCrtPath);
  context.usePrivateKey(clientKeyPath);
} on Exception catch (e) {
  //出現異常 嘗試刪除本地證書然後重新寫入證書
  log("SecurityContext set  error : " + e.toString());
  return -1;
}
_client.securityContext = context;
_client.setProtocolV311();

上面代碼的幾個字符串分別代表：
cert_ca：根證書的內容
cert_client_key：客戶端私鑰的內容
cert_client_crt：客戶端證書的內容

更新於 2019/11/05 17:26 END

證書內容不對的話會報以下錯誤：

TlsException: Failure trusting builtin roots

---

更新於 2019/11/05 13:12 START

SecurityContext 有提供直接也內容的方法，並不一定要傳路徑…

也可以在配置 assets 通過以下方法讀取內容，

String cerData = await rootBundle.loadString("assets/cc.pem");
utf8.encode(caPath);

然後調用以下帶 bytes 的方法即可。

void usePrivateKey(String file, {String password});
void usePrivateKeyBytes(List<int> keyBytes, {String password});
void setTrustedCertificates(String file, {String password});
void setTrustedCertificatesBytes(List<int> certBytes, {String password});
void useCertificateChain(String file, {String password});
void useCertificateChainBytes(List<int> chainBytes, {String password});
void setClientAuthorities(String file, {String password});
void setClientAuthoritiesBytes(List<int> authCertBytes, {String password});

更新於 2019/11/05 13:12 END

---

然後好好的用了幾天，昨天下午連接的時候突然又連接不上了！！！
報錯提示：

SocketException: OS Error: Connection reset by peer, errno = 104

然後搜索了一圈，又去問 mqtt_client 庫的作者… mqtt_client/issues/131. 然後他也沒遇到過。

最後通過 Wireshark 抓包發現報錯信息 TLSv1.2 Handshake failure, 然後通過服務端哪些查看報錯信息，然後搜索一圈發現可能是 docker 1.6.3版本 官方鏡像的問題，也可能是昨天下午服務端同事改了配置重啓之後導致的，感覺應該是後者…

最後發現是自己證書配置的問題! 上面的代碼示例 和 demo中的已修正！ 之前能連上是因爲服務端沒有配置雙向驗證。

---

最後提供一個Demo: https://github.com/103style/mqtt_demo

以上

如果覺得不錯的話，請幫忙點個讚唄。

---

掃描下面的二維碼，關注我的公衆號 Android1024， 點關注，不迷路。