[{"data":1,"prerenderedAt":602},["ShallowReactive",2],{"\u002Fblog\u002Fen\u002Fiot":3,"\u002Fblog\u002Fen\u002Fiot-surround":596},{"id":4,"title":5,"authors":6,"badge":11,"body":12,"date":586,"description":587,"extension":588,"image":589,"meta":591,"navigation":263,"path":592,"seo":593,"stem":594,"__hash__":595},"posts\u002Fblog\u002Fen\u002Fiot.md","Simulating IoT Device Connectivity Monitoring Using Vue 3, Vite, and MQTT",[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":581},"minimark",[15,19,30,33,44,47,51,58,69,78,82,85,91,94,97,103,111,114,169,539,547,555,563,571,577],[16,17,18],"h2",{"id":18},"mosquitto",[20,21,22,23,29],"p",{},"First, download and install Mosquitto from the official website: ",[24,25,18],"a",{"href":26,"rel":27},"https:\u002F\u002Fmosquitto.org\u002Fdownload\u002F",[28],"nofollow",".",[20,31,32],{},"Once the installation is complete, open PowerShell or Command Prompt (CMD) and run the following command to verify that Mosquitto was installed successfully:",[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],{},"If the version number and command-line parameters are displayed, it indicates that the installation was successful.",[16,48,50],{"id":49},"mqttx","MQTTX",[20,52,53,54,29],{},"Next, download and install MQTTX from the official website: ",[24,55,50],{"href":56,"rel":57},"https:\u002F\u002Fmqttx.app\u002F",[28],[20,59,60,61],{},"Once MQTTX is installed, launch the application. Under the Connections section, click the \"+\" icon and choose \"New Connection\" to create a new MQTT 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],{},"Enter the following settings. You do not need to specify a Client ID, then click \"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],{},"Since browsers require WebSocket support, for example：",[34,86,89],{"className":87,"code":88,"language":39},[37],"ws:\u002F\u002Flocalhost:9001\n",[41,90,88],{"__ignoreMap":43},[20,92,93],{},"Therefore, you need to go back to the Mosquitto installation directory and locate the mosquitto.conf file.",[20,95,96],{},"Add a WebSocket listener to the configuration as shown below:",[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],{},"Next, open Task Manager and restart the Mosquitto service.\n",[62,107],{"alt":108,"className":109,"height":76,"src":110,"width":76},"mosquitto服務",[66],"\u002Fimages\u002Fblogs\u002Fiot\u002FmosquittoService.png",[20,112,113],{},"Create the Vue 3 + TypeScript code as shown below::",[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,329,334,364,388,393,417,427,432,470,494,520,529],{"__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,311,314,317,319,322,324,327],{"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,29],{"class":128},[122,312,313],{"class":279},"connect",[122,315,316],{"class":151},"(",[122,318,223],{"class":128},[122,320,321],{"class":191},"ws:\u002F\u002Flocalhost:9001",[122,323,223],{"class":128},[122,325,326],{"class":151},")",[122,328,226],{"class":128},[122,330,332],{"class":124,"line":331},8,[122,333,264],{"emptyLinePlaceholder":263},[122,335,337,340,342,345,347,349,351,353,355,358,361],{"class":124,"line":336},9,[122,338,339],{"class":151},"client",[122,341,29],{"class":128},[122,343,344],{"class":279},"on",[122,346,316],{"class":151},[122,348,223],{"class":128},[122,350,313],{"class":191},[122,352,223],{"class":128},[122,354,236],{"class":128},[122,356,357],{"class":128}," ()",[122,359,360],{"class":270}," =>",[122,362,363],{"class":128}," {\n",[122,365,367,370,372,375,377,379,382,384,386],{"class":124,"line":366},10,[122,368,369],{"class":151},"  console",[122,371,29],{"class":128},[122,373,374],{"class":279},"log",[122,376,316],{"class":132},[122,378,223],{"class":128},[122,380,381],{"class":191},"MQTT connected",[122,383,223],{"class":128},[122,385,326],{"class":132},[122,387,226],{"class":128},[122,389,391],{"class":124,"line":390},11,[122,392,264],{"emptyLinePlaceholder":263},[122,394,396,399,401,404,406,408,411,413,415],{"class":124,"line":395},12,[122,397,398],{"class":151},"  client",[122,400,29],{"class":128},[122,402,403],{"class":279},"subscribe",[122,405,316],{"class":132},[122,407,223],{"class":128},[122,409,410],{"class":191},"factory\u002Fmachine01\u002Fdata",[122,412,223],{"class":128},[122,414,326],{"class":132},[122,416,226],{"class":128},[122,418,420,423,425],{"class":124,"line":419},13,[122,421,422],{"class":128},"}",[122,424,326],{"class":151},[122,426,226],{"class":128},[122,428,430],{"class":124,"line":429},14,[122,431,264],{"emptyLinePlaceholder":263},[122,433,435,437,439,441,443,445,448,450,452,455,459,461,464,466,468],{"class":124,"line":434},15,[122,436,339],{"class":151},[122,438,29],{"class":128},[122,440,344],{"class":279},[122,442,316],{"class":151},[122,444,223],{"class":128},[122,446,447],{"class":191},"message",[122,449,223],{"class":128},[122,451,236],{"class":128},[122,453,454],{"class":128}," (",[122,456,458],{"class":457},"sHdIc","topic",[122,460,236],{"class":128},[122,462,463],{"class":457}," message",[122,465,326],{"class":128},[122,467,360],{"class":270},[122,469,363],{"class":128},[122,471,473,476,478,481,483,485,487,490,492],{"class":124,"line":472},16,[122,474,475],{"class":151},"  receiveMessage",[122,477,29],{"class":128},[122,479,480],{"class":151},"value",[122,482,306],{"class":128},[122,484,463],{"class":151},[122,486,29],{"class":128},[122,488,489],{"class":279},"toString",[122,491,282],{"class":132},[122,493,226],{"class":128},[122,495,497,499,501,503,505,507,509,511,513,515,518],{"class":124,"line":496},17,[122,498,369],{"class":151},[122,500,29],{"class":128},[122,502,374],{"class":279},[122,504,316],{"class":132},[122,506,458],{"class":151},[122,508,236],{"class":128},[122,510,463],{"class":151},[122,512,29],{"class":128},[122,514,489],{"class":279},[122,516,517],{"class":132},"())",[122,519,226],{"class":128},[122,521,523,525,527],{"class":124,"line":522},18,[122,524,422],{"class":128},[122,526,326],{"class":151},[122,528,226],{"class":128},[122,530,532,534,537],{"class":124,"line":531},19,[122,533,155],{"class":128},[122,535,536],{"class":151},"script",[122,538,136],{"class":128},[20,540,541,542],{},"In MQTTX, switch to the \"Publish\" tab and enter the settings as shown in the figure below：\n",[62,543],{"alt":544,"className":545,"height":76,"src":546,"width":76},"在MQTTX選Published並輸入",[66],"\u002Fimages\u002Fblogs\u002Fiot\u002Fpublished.png",[20,548,549,550],{},"The web page will receive the message as shown in the figure below：\n",[62,551],{"alt":552,"className":553,"height":76,"src":554,"width":76},"web收到訊息",[66],"\u002Fimages\u002Fblogs\u002Fiot\u002FreceiveMessage.png",[20,556,557,558],{},"This setup can be used to simulate the monitoring of connected IoT devices. An example of a more advanced IoT device dashboard is shown below：\n",[62,559],{"alt":560,"className":561,"height":76,"src":562,"width":76},"iot 機台儀表板",[66],"\u002Fimages\u002Fblogs\u002Fiot\u002FiotMachineDashboard.gif",[20,564,565,566,570],{},"If you would like to learn more about our solutions, please contact us using the information below. Our team will be pleased to provide a live demonstration and discuss how our solutions can meet your needs.",[24,567,569],{"href":568},"\u002Fsolutions\u002Faiot","AIoT"," 。",[20,572,573],{},[24,574,576],{"href":575},"\u002FcontactUs","Contact Us",[578,579,580],"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":582},[583,584,585],{"id":18,"depth":139,"text":18},{"id":49,"depth":139,"text":50},{"id":80,"depth":139,"text":81},"2026-10-08","First, install Mosquitto as the MQTT broker. Then, use MQTTX to simulate MQTT operations and quickly create a new Vue 3 project with Vite. After that, integrate mqtt.js to establish a connection with the MQTT broker and display the data transmitted from IoT devices in real time.","md",{"src":590},"images\u002Fblogs\u002Fiot\u002FiotDashboard.png",{},"\u002Fblog\u002Fen\u002Fiot",{"title":5,"description":587},"blog\u002Fen\u002Fiot","bWVnxG4m3mFofDA7ousUgYG5NndYUSAogZQ4MQ78WNk",[597],{"title":598,"path":599,"stem":600,"description":601,"children":-1},"Implementing Statistical Charts with Plotly.js in Vue 3, Vite, and JavaScript- A P-Chart (Fraction Defective Control Chart) Example","\u002Fblog\u002Fplotlyjs","blog\u002Fen\u002FplotlyJs","First, use Vite to quickly create a new Vue 3 project with JavaScript as the default programming language. Then, install and integrate Plotly.js step by step to implement statistical process control charts. In this example, we will use a P-Chart (Fraction Defective Control Chart), commonly referred to as a P Chart, to demonstrate the implementation.",1791796703830]