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
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
很好的觀察！這些差異來自於**不同的 MQTT 客戶端函式庫**和**不同的連線協定**。讓我詳細解釋：

## 1. 函式庫差異

### 樹莓派（Python）- paho-mqtt
```python
client.connect(host, port, keepalive)
```
- **位置參數：** 按順序傳入
- **第3個參數 `60`：** Keep-alive 時間（秒）
- **設計哲學：** 簡單直接，參數分開

### JavaScript - mqtt.js
```javascript
mqtt.connect(url, options)
```
- **物件參數：** 用字典/物件包裝選項
- **設計哲學：** 彈性配置，所有選項集中管理

## 2. Keep-alive 參數說明

### 樹莓派的第3個參數 `60`
```python
client.connect(MQTT_BROKER, MQTT_PORT, 60)
#                                        ↑
#                                   Keep-alive = 60秒
```

**作用：**
- 每 60 秒發送一次 PING 封包給 broker
- 確保連線保持活躍
- 如果 broker 在 90 秒內（通常是 1.5 倍）沒收到任何訊息，就會斷開連線

### JavaScript 的對應設定
```javascript
mqtt.connect(brokerUrl, {
    // ... 其他設定
    keepalive: 60,  // 對應的 keep-alive 設定（預設通常是 60）
});
```

## 3. 連線協定差異

### 樹莓派：TCP 連線
```python
MQTT_BROKER = "broker.emqx.io"  # 主機名稱
MQTT_PORT = 1883               # 標準 MQTT TCP 埠
```
- **協定：** MQTT over TCP
- **埠號：** 1883（MQTT 標準埠）
- **安全性：** 明文傳輸

### JavaScript：WebSocket 連線
```javascript
brokerUrl = "wss://broker.emqx.io:8084/mqtt"
```
- **協定：** MQTT over WebSocket Secure (WSS)
- **埠號：** 8084（WebSocket Secure 埠）
- **路徑：** `/mqtt`（WebSocket 端點）
- **安全性：** SSL/TLS 加密

## 4. 為什麼有這些差異？

### 環境限制
```
瀏覽器 JavaScript：
- 不能直接使用 TCP socket
- 只能透過 WebSocket 連線
- 需要 HTTPS 環境使用 WSS

樹莓派 Python：
- 可以直接使用 TCP socket
- 更高效率，更低延遲
- 適合伺服器環境
```

### 完整對比表

| 項目 | 樹莓派 (Python) | 網頁 (JavaScript) |
|------|----------------|-------------------|
| **函式庫** | paho-mqtt | mqtt.js |
| **協定** | MQTT over TCP | MQTT over WebSocket |
| **埠號** | 1883 (TCP) | 8084 (WSS) |
| **URL格式** | 分離的 host/port | 完整 URL |
| **參數風格** | 位置參數 | 物件參數 |
| **Keep-alive** | 第3個參數 | options.keepalive |
| **安全性** | 可選 TLS | 強制 HTTPS/WSS |

## 5. 統一的連線概念

雖然語法不同，但核心概念相同：

```python
# Python 等價設定
client.connect(
    host="broker.emqx.io",
    port=1883,
    keepalive=60
)
```

```javascript
// JavaScript 等價設定
mqtt.connect("wss://broker.emqx.io:8084/mqtt", {
    keepalive: 60,
    clientId: 'subscriber_' + Math.random().toString(16).substr(2, 8),
    clean: true,
    connectTimeout: 4000,
    reconnectPeriod: 1000
});
```

## 6. 實務建議

如果要讓兩者連接到同一個 broker：

### 選項1：都用加密連線
```python
# Python 使用 TLS
client.tls_set()
client.connect("broker.emqx.io", 8883, 60)  # 8883 是 MQTT over TLS 埠
```

```javascript
// JavaScript 使用 WSS
mqtt.connect("wss://broker.emqx.io:8084/mqtt", options);
```

### 選項2：都用明文連線（測試環境）
```python
# Python 使用 TCP
client.connect("broker.emqx.io", 1883, 60)
```

```javascript
// JavaScript 使用 WS（注意：許多瀏覽器會阻擋 HTTP 混合內容）
mqtt.connect("ws://broker.emqx.io:8083/mqtt", options);
```

這就是為什麼看起來不同，但實際上都是在做 MQTT 連線的原因！