[專題] 網控藍牙電子鎖開發專案。

◎ 大哥展示跨網開鎖成果→詹副理
.　－交流專案開發的後續業務面需求

◎ 閱讀網頁內容、JavaScript
.　－學習MQTT在網頁的應用
.　－QoS(Quality of Service)伺服品質
.　－異步處理機制：回調(callback)函數

[花絮1] 阿三哥(大哥小學同學/meet)
[花絮2] 游大哥(現場)

AI對話 Claude 2025 let宣告

[前情] 跨網(Web)開鎖成功
實作MQTT：頁面檔publisher→broker←樹莓派subscriber

@pande1104 - [專題] 網控藍牙電子鎖開發專案。 －MQTT: subscriber-bro...

（2025-6-19(四)

[Today] 專案開發-成果展示&交流 to 詹副理
網頁內容研讀&學習：JavaScript使用MQTT做通訊

@pande1104 - (日常) 上午自然醒 睡沒幾個小時。上個廁所再躺回去，下午2點自然醒。睡6~7...

（2025-6-21(六)

以下記錄/節錄今次
－學習MQTT在JavaScript的應用
有關的AI對話內容

==========

javascript的這句：
mqtt.connect(brokerUrl, {
clientId: 'lockcontrol' + Math.random().toString(16).substr(2, 8 ),
clean: true,
connectTimeout: 4000,
reconnectPeriod: 1000,
});
是在做什麼？

這段 JavaScript 程式碼是在建立一個 MQTT 連線。讓我逐一解釋各個部分： (Plurk P...
使用情境：
從命名 lock_control_ 來看，這很可能是用於智慧門鎖或類似的 IoT 設備控制系統，透過 MQTT 協定來傳送控制指令或接收狀態更新。

解說一下
mqttClient.on('connect', function () { (Plurk Paste)

這段程式碼是設定 MQTT 客戶端的**事件監聽器**，用來處理連線過程中的各種狀態變化。讓我逐一說明：...
# 整體目的
這些事件監聽器確保：
1. 狀態同步： UI 介面能即時反映 MQTT 連線狀態
2. 錯誤處理： 當連線出問題時能適當通知使用者
3. 除錯資訊： 透過 console 輸出協助開發者追蹤連線狀態

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

解說一下
mqttClient.publish(topic, JSON.stringify(message), {...

這段程式碼是用來**發送 MQTT 訊息**到指定的主題。讓我詳細解釋各個部分： (Plurk Past...
# 為什麼用 QoS 1？
對於門鎖這類安全性重要的設備，確保指令送達比速度更重要，所以選擇 QoS 1 來保證訊息不會丟失。

function(error){ } 這個callback函數怎麼運作？

這個 callback 函數的運作方式是基於 JavaScript 的**異步回調機制**。讓我詳細解釋...
這就是為什麼叫做異步的原因 - 程式不會停下來等待結果，而是透過回調函數在適當時機處理結果。

納入比較完整一點程式。既然已經使用callback回報錯誤，為什麼還要用catch(error)？兩者時機有不同嗎？
try { (Plurk Paste)

很好的問題！`callback` 和 `try-catch` 確實處理**不同時機**和**不同類型**...
# 總結

- try-catch： 保護程式不會因為立即發生的錯誤而崩潰
- callback： 處理異步操作的結果（成功或失敗）
- 兩者互補： 提供完整的錯誤處理機制，確保各種情況都能妥善處理

這種設計模式在 JavaScript 異步程式設計中非常常見，現代的 Promise/async-await 也有類似的概念。

差不多了，已經理解Javascript怎麼操作MQTT通訊。
請問Promise/async-await各自引入Javascript的版本/年份？還有mqtt功能又是哪個版本/年份引入的呢？

讓我為你整理這些重要的 JavaScript 異步程式設計里程碑： (Plurk Paste)
# 重要時間點總結

- 2011： JavaScript MQTT 客戶端出現
- 2013： MQTT over WebSocket 讓瀏覽器可以直接使用 MQTT
- 2015： Promise 讓異步程式碼更易讀
- 2017： async/await 讓異步程式碼看起來像同步程式碼
- 2019： MQTT 5.0 帶來更多功能

所以你現在學習的 callback 方式其實是最經典和相容性最好的寫法，在所有環境都能正常運作！現代的 MQTT 函式庫通常同時支援 callback、Promise 和 async/await 三種方式。

樹莓派subscriber，第3個argument是什麼？ (Plurk Paste)
是為什麼呢？

很好的觀察！這些差異來自於**不同的 MQTT 客戶端函式庫**和**不同的連線協定**。讓我詳細解釋：...
這就是為什麼看起來不同，但實際上都是在做 MQTT 連線的原因！

publisher似乎沒有設置keepalive，表示發佈完不保留直接斷線嗎？

subscriber的client ID:
CLIENT_ID = f"raspberry_pitest{int(time.time())}"
跟publisher的client ID:
clientId: 'lockcontrol' + Math.random().toString(16).substr(2, 8 ),
不同

client ID在MQTT中的角色是什麼？

很好的問題！讓我逐一解釋這些重要概念： (Plurk Paste)
# 總結

- Keep-alive： Publisher 也有預設的 keep-alive，不會立即斷線
- Client ID： 是 MQTT 客戶端的唯一身分證，決定連線的唯一性和會話管理
- 設計原則： 要平衡唯一性、安全性和可管理性
- 重複連線： 相同 Client ID 會導致舊連線被踢掉

你的設計中，Subscriber 和 Publisher 使用不同的 Client ID 是正確的做法，確保兩者可以同時連線而不互相干擾！

學習一下JavaScript語法基礎。

pulisher網頁的script裡面一開始這段
let isLocked = true;
let isAlwaysOpen = false;
let progressInterval = null;
let mqttClient = null;
let isConnected = false;
let跟一般的變數賦值有什麼不同？

連線函數一開始
function connectMQTT() {if (isConnected) {if (mqttClient) {mqttClient.end();} return;} (略)}
的.end();是刪除變數的意思嗎？

很好的問題！讓我詳細解釋 JavaScript 的這些基礎語法： (Plurk Paste)
# 總結

- let： 現代的區塊作用域變數宣告，比 var 更安全
- .end()： 是物件的方法，用來關閉連線，不是刪除變數
- 變數管理： 需要區分變數參考和物件生命週期
- 最佳實務： 使用 let/const 取代 var，適當清理資源參考

你的程式碼使用 let 是正確的現代 JavaScript 寫法！

相隔14年，重新觸碰JavaScript
這回加上了Python，並帶上了TCP/IP背景知識
以及最重要的-實作應用