[{"data":1,"prerenderedAt":603},["ShallowReactive",2],{"\u002Fblog\u002Fzh-tw\u002Fiot":3,"\u002Fblog\u002Fzh-tw\u002Fiot-surround":597},{"id":4,"title":5,"authors":6,"badge":11,"body":12,"date":587,"description":588,"extension":589,"image":590,"meta":592,"navigation":263,"path":593,"seo":594,"stem":595,"__hash__":596},"posts\u002Fblog\u002Fzh-TW\u002Fiot.md","Vue3 Vite搭配MQTT實現模擬監控IOT設備聯網",[7],{"name":8,"avatar":9},"Neil Tsai",{"src":10},"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F12755093?v=4&size=64",null,{"type":13,"value":14,"toc":582},"minimark",[15,19,30,33,44,47,51,58,69,78,82,85,91,94,97,103,111,114,169,540,548,556,564,572,578],[16,17,18],"h2",{"id":18},"mosquitto",[20,21,22,23,29],"p",{},"首先到 ",[24,25,18],"a",{"href":26,"rel":27},"https:\u002F\u002Fmosquitto.org\u002Fdownload\u002F",[28],"nofollow"," 下載並安裝。",[20,31,32],{},"安裝完成後，以PowerShell或CMD確認是否安裝成功：",[34,35,40],"pre",{"className":36,"code":38,"language":39},[37],"language-text","cd \"C:\\Program Files\\mosquitto\"\n\n.\\mosquitto.exe -h\n","text",[41,42,38],"code",{"__ignoreMap":43},"",[20,45,46],{},"若有出現版本與參數說明，代表安裝成功。",[16,48,50],{"id":49},"mqttx","MQTTX",[20,52,53,54,29],{},"再來到 ",[24,55,50],{"href":56,"rel":57},"https:\u002F\u002Fmqttx.app\u002F",[28],[20,59,60,61],{},"安裝完後打開MQTTX在Connections按+->New Connection建立新連線\n",[62,63],"img",{"alt":64,"className":65,"height":67,"src":68,"width":67},"MQTTX建立新連線",[66],"rounded-lg",350,"\u002Fimages\u002Fblogs\u002Fiot\u002Fmqttx.png",[20,70,71,72],{},"輸入內容如下，Client ID不用指定，再按Connect：\n",[62,73],{"alt":74,"className":75,"height":76,"src":77,"width":76},"MQTTX 輸入內容",[66],800,"\u002Fimages\u002Fblogs\u002Fiot\u002FmqttxInput.png",[16,79,81],{"id":80},"vue3-vite","Vue3 Vite",[20,83,84],{},"由於瀏覽器需要WebSocket，例如：",[34,86,89],{"className":87,"code":88,"language":39},[37],"ws:\u002F\u002Flocalhost:9001\n",[41,90,88],{"__ignoreMap":43},[20,92,93],{},"因此要再回到 mosquitto的安裝目錄下找 mosquitto.conf",[20,95,96],{},"設定增加 WebSocket listener如下：",[34,98,101],{"className":99,"code":100,"language":39},[37],"listener 1883\nprotocol mqtt\n\nlistener 9001\nprotocol websockets\n\nallow_anonymous true\n",[41,102,100],{"__ignoreMap":43},[20,104,105,106],{},"再打開工作管理員重新啟動mosquitto服務\n",[62,107],{"alt":108,"className":109,"height":76,"src":110,"width":76},"mosquitto服務",[66],"\u002Fimages\u002Fblogs\u002Fiot\u002FmosquittoService.png",[20,112,113],{},"撰寫Vue3+TypeScript內容如下:",[34,115,119],{"className":116,"code":117,"language":118,"meta":43,"style":43},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Ch3>接收到的訊息：{{ receiveMessage }}\u003C\u002Fh3>\n\u003C\u002Ftemplate>\n","html",[41,120,121,137,160],{"__ignoreMap":43},[122,123,126,130,134],"span",{"class":124,"line":125},"line",1,[122,127,129],{"class":128},"sMK4o","\u003C",[122,131,133],{"class":132},"swJcz","template",[122,135,136],{"class":128},">\n",[122,138,140,143,146,149,153,156,158],{"class":124,"line":139},2,[122,141,142],{"class":128},"  \u003C",[122,144,145],{"class":132},"h3",[122,147,148],{"class":128},">",[122,150,152],{"class":151},"sTEyZ","接收到的訊息：{{ receiveMessage }}",[122,154,155],{"class":128},"\u003C\u002F",[122,157,145],{"class":132},[122,159,136],{"class":128},[122,161,163,165,167],{"class":124,"line":162},3,[122,164,155],{"class":128},[122,166,133],{"class":132},[122,168,136],{"class":128},[34,170,174],{"className":171,"code":172,"language":173,"meta":43,"style":43},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport mqtt, { type MqttClient } from 'mqtt';\n\nconst receiveMessage = ref();\n\nconst client: MqttClient = mqtt.connect('ws:\u002F\u002Flocalhost:9001');\n\nclient.on('connect', () => {\n  console.log('MQTT connected');\n\n  client.subscribe('factory\u002Fmachine01\u002Fdata');\n});\n\nclient.on('message', (topic, message) => {\n  receiveMessage.value = message.toString();\n  console.log(topic, message.toString());\n});\n\u003C\u002Fscript>\n","typescript",[41,175,176,197,227,258,265,285,290,330,335,365,389,394,418,428,433,471,495,521,530],{"__ignoreMap":43},[122,177,178,180,183,186,189,193,195],{"class":124,"line":125},[122,179,129],{"class":128},[122,181,182],{"class":151},"script setup lang",[122,184,185],{"class":128},"=",[122,187,188],{"class":128},"\"",[122,190,192],{"class":191},"sfazB","ts",[122,194,188],{"class":128},[122,196,136],{"class":128},[122,198,199,203,206,209,212,215,218,221,224],{"class":124,"line":139},[122,200,202],{"class":201},"s7zQu","import",[122,204,205],{"class":128}," {",[122,207,208],{"class":151}," ref",[122,210,211],{"class":128}," }",[122,213,214],{"class":201}," from",[122,216,217],{"class":128}," '",[122,219,220],{"class":191},"vue",[122,222,223],{"class":128},"'",[122,225,226],{"class":128},";\n",[122,228,229,231,234,237,239,242,245,247,249,251,254,256],{"class":124,"line":162},[122,230,202],{"class":201},[122,232,233],{"class":151}," mqtt",[122,235,236],{"class":128},",",[122,238,205],{"class":128},[122,240,241],{"class":201}," type",[122,243,244],{"class":151}," MqttClient",[122,246,211],{"class":128},[122,248,214],{"class":201},[122,250,217],{"class":128},[122,252,253],{"class":191},"mqtt",[122,255,223],{"class":128},[122,257,226],{"class":128},[122,259,261],{"class":124,"line":260},4,[122,262,264],{"emptyLinePlaceholder":263},true,"\n",[122,266,268,272,275,277,280,283],{"class":124,"line":267},5,[122,269,271],{"class":270},"spNyl","const",[122,273,274],{"class":151}," receiveMessage ",[122,276,185],{"class":128},[122,278,208],{"class":279},"s2Zo4",[122,281,282],{"class":151},"()",[122,284,226],{"class":128},[122,286,288],{"class":124,"line":287},6,[122,289,264],{"emptyLinePlaceholder":263},[122,291,293,295,298,301,304,307,309,312,315,318,320,323,325,328],{"class":124,"line":292},7,[122,294,271],{"class":270},[122,296,297],{"class":151}," client",[122,299,300],{"class":128},":",[122,302,244],{"class":303},"sBMFI",[122,305,306],{"class":128}," =",[122,308,233],{"class":151},[122,310,311],{"class":128},".",[122,313,314],{"class":279},"connect",[122,316,317],{"class":151},"(",[122,319,223],{"class":128},[122,321,322],{"class":191},"ws:\u002F\u002Flocalhost:9001",[122,324,223],{"class":128},[122,326,327],{"class":151},")",[122,329,226],{"class":128},[122,331,333],{"class":124,"line":332},8,[122,334,264],{"emptyLinePlaceholder":263},[122,336,338,341,343,346,348,350,352,354,356,359,362],{"class":124,"line":337},9,[122,339,340],{"class":151},"client",[122,342,311],{"class":128},[122,344,345],{"class":279},"on",[122,347,317],{"class":151},[122,349,223],{"class":128},[122,351,314],{"class":191},[122,353,223],{"class":128},[122,355,236],{"class":128},[122,357,358],{"class":128}," ()",[122,360,361],{"class":270}," =>",[122,363,364],{"class":128}," {\n",[122,366,368,371,373,376,378,380,383,385,387],{"class":124,"line":367},10,[122,369,370],{"class":151},"  console",[122,372,311],{"class":128},[122,374,375],{"class":279},"log",[122,377,317],{"class":132},[122,379,223],{"class":128},[122,381,382],{"class":191},"MQTT connected",[122,384,223],{"class":128},[122,386,327],{"class":132},[122,388,226],{"class":128},[122,390,392],{"class":124,"line":391},11,[122,393,264],{"emptyLinePlaceholder":263},[122,395,397,400,402,405,407,409,412,414,416],{"class":124,"line":396},12,[122,398,399],{"class":151},"  client",[122,401,311],{"class":128},[122,403,404],{"class":279},"subscribe",[122,406,317],{"class":132},[122,408,223],{"class":128},[122,410,411],{"class":191},"factory\u002Fmachine01\u002Fdata",[122,413,223],{"class":128},[122,415,327],{"class":132},[122,417,226],{"class":128},[122,419,421,424,426],{"class":124,"line":420},13,[122,422,423],{"class":128},"}",[122,425,327],{"class":151},[122,427,226],{"class":128},[122,429,431],{"class":124,"line":430},14,[122,432,264],{"emptyLinePlaceholder":263},[122,434,436,438,440,442,444,446,449,451,453,456,460,462,465,467,469],{"class":124,"line":435},15,[122,437,340],{"class":151},[122,439,311],{"class":128},[122,441,345],{"class":279},[122,443,317],{"class":151},[122,445,223],{"class":128},[122,447,448],{"class":191},"message",[122,450,223],{"class":128},[122,452,236],{"class":128},[122,454,455],{"class":128}," (",[122,457,459],{"class":458},"sHdIc","topic",[122,461,236],{"class":128},[122,463,464],{"class":458}," message",[122,466,327],{"class":128},[122,468,361],{"class":270},[122,470,364],{"class":128},[122,472,474,477,479,482,484,486,488,491,493],{"class":124,"line":473},16,[122,475,476],{"class":151},"  receiveMessage",[122,478,311],{"class":128},[122,480,481],{"class":151},"value",[122,483,306],{"class":128},[122,485,464],{"class":151},[122,487,311],{"class":128},[122,489,490],{"class":279},"toString",[122,492,282],{"class":132},[122,494,226],{"class":128},[122,496,498,500,502,504,506,508,510,512,514,516,519],{"class":124,"line":497},17,[122,499,370],{"class":151},[122,501,311],{"class":128},[122,503,375],{"class":279},[122,505,317],{"class":132},[122,507,459],{"class":151},[122,509,236],{"class":128},[122,511,464],{"class":151},[122,513,311],{"class":128},[122,515,490],{"class":279},[122,517,518],{"class":132},"())",[122,520,226],{"class":128},[122,522,524,526,528],{"class":124,"line":523},18,[122,525,423],{"class":128},[122,527,327],{"class":151},[122,529,226],{"class":128},[122,531,533,535,538],{"class":124,"line":532},19,[122,534,155],{"class":128},[122,536,537],{"class":151},"script",[122,539,136],{"class":128},[20,541,542,543],{},"在MQTTX選Published並輸入如下圖：\n",[62,544],{"alt":545,"className":546,"height":76,"src":547,"width":76},"在MQTTX選Published並輸入",[66],"\u002Fimages\u002Fblogs\u002Fiot\u002Fpublished.png",[20,549,550,551],{},"Web頁面會收到訊息如下圖：\n",[62,552],{"alt":553,"className":554,"height":76,"src":555,"width":76},"web收到訊息",[66],"\u002Fimages\u002Fblogs\u002Fiot\u002FreceiveMessage.png",[20,557,558,559],{},"如此可以實現模擬監控IOT設備聯網，進階的IOT機台儀表板示意圖如下：\n",[62,560],{"alt":561,"className":562,"height":76,"src":563,"width":76},"iot 機台儀表板",[66],"\u002Fimages\u002Fblogs\u002Fiot\u002FiotMachineDashboard.gif",[20,565,566,567,571],{},"歡迎與我們聯絡資訊如下，讓我們為您們Demo說明解決方案",[24,568,570],{"href":569},"\u002Fsolutions\u002Faiot","AIoT 智聯網"," 。",[20,573,574],{},[24,575,577],{"href":576},"\u002FcontactUs","聯絡我們",[579,580,581],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":43,"searchDepth":139,"depth":139,"links":583},[584,585,586],{"id":18,"depth":139,"text":18},{"id":49,"depth":139,"text":50},{"id":80,"depth":139,"text":81},"2026-10-08","首先需要先安裝mosquitto作為broker，工具使用MQTTX模擬MQTT的運作，再用vite快速建立Vue3新專案，然後引用mqtt.js來與MQTT建立連線並顯示從設備機台傳送來的數據。","md",{"src":591},"images\u002Fblogs\u002Fiot\u002FiotDashboard.png",{},"\u002Fblog\u002Fzh-tw\u002Fiot",{"title":5,"description":588},"blog\u002Fzh-TW\u002Fiot","TAHmjZZ3e2ZBPdg4_JIP5l4fODNo5JJMbAl_jjVFXco",[598],{"title":599,"path":600,"stem":601,"description":602,"children":-1},"Vue3 Vite+Javascript引用Plotly.js實作統計圖表-以P-chart不良率管制圖為例","\u002Fblog\u002Fplotlyjs","blog\u002Fzh-TW\u002FplotlyJs","先用vite快速建立Vue3新專案，預設程式語言為Javascript，然後一步一步安裝Plotly.js並引用實作統計管制圖表，以P-chart不良率管制圖為例(簡稱：P 管制圖)",1791796702733]