1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
這段程式碼是設定 MQTT 客戶端的**事件監聽器**，用來處理連線過程中的各種狀態變化。讓我逐一說明：

## 1. 連線成功事件
```javascript
mqttClient.on('connect', function () {
console.log('MQTT 連接成功');
updateMQTTStatus(true);
});
```
- **觸發時機：** 當成功連接到 MQTT broker 時
- **執行動作：**
- 在控制台輸出成功訊息
- 呼叫 `updateMQTTStatus(true)` 更新 UI 狀態為「已連線」

## 2. 連線錯誤事件
```javascript
mqttClient.on('error', function (error) {
console.error('MQTT 連接錯誤:', error);
updateMQTTStatus(false);
alert('MQTT 連接失敗: ' + error.message);
});
```
- **觸發時機：** 當連線過程發生錯誤時（網路問題、認證失敗等）
- **執行動作：**
- 在控制台輸出錯誤訊息
- 呼叫 `updateMQTTStatus(false)` 更新 UI 狀態為「未連線」
- 彈出警告視窗告知使用者連線失敗

## 3. 連線關閉事件
```javascript
mqttClient.on('close', function () {
console.log('MQTT 連接關閉');
updateMQTTStatus(false);
});
```
- **觸發時機：** 當 MQTT 連線被關閉時（主動斷線或網路中斷）
- **執行動作：**
- 在控制台輸出關閉訊息
- 呼叫 `updateMQTTStatus(false)` 更新 UI 狀態為「未連線」

## 整體目的
這些事件監聽器確保：
1. **狀態同步：** UI 介面能即時反映 MQTT 連線狀態
2. **錯誤處理：** 當連線出問題時能適當通知使用者
3. **除錯資訊：** 透過 console 輸出協助開發者追蹤連線狀態

`updateMQTTStatus()` 函數應該是用來更新網頁上的連線狀態指示器（例如改變按鈕顏色、顯示連線圖示等）。