| <!doctype html> |
| <html lang="zh-Hant"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="theme-color" content="#080d0a"> |
| <meta name="description" content="兩台 FreeDOS 虛擬機，DOS 程式自己透過 NE2000 網卡與 TCP/IP 連上公開 MQTT broker。"> |
| <title>DOS MQTT LAB — DOS 直接上網</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="libv86.js" defer></script> |
| <script src="assets.b64.js" defer></script> |
| <script src="bridge.js" defer></script> |
| <script src="app.js" defer></script> |
| </head> |
| <body> |
| <main class="shell"> |
| <header class="topbar"> |
| <div class="brand"><span class="brand-mark">D:</span><span>DOS MQTT LAB <small>v86 · FREEDOS · mTCP · NE2000</small></span></div> |
| <div class="clock"><span class="live-dot" id="liveDot"></span><span id="netText">BOOTING</span><span class="divider">|</span><span id="clock">--:--:--</span></div> |
| </header> |
|
|
| <section class="intro"> |
| <div class="eyebrow">REAL DOS · REAL TCP/IP · PUBLIC MQTT BROKER</div> |
| <h1>DOS 程式，<span>自己上網。</span></h1> |
| <p>兩台 FreeDOS 各有一張虛擬 NE2000 網卡，載入 Crynwr 封包驅動與 mTCP TCP/IP 堆疊並用 DHCP 取得位址。<b>A.EXE</b> 訂閱 MQTT 並在收到後 1 秒 echo；<b>B.EXE</b> 每次執行送出一則附時間的訊息，網頁每 5 秒執行一次 B。</p> |
| </section> |
|
|
| <section class="control-panel panel"> |
| <div class="panel-heading"><span class="prompt">C:\></span><h2>連線設定</h2><span class="panel-tag" id="bootTag">BOOTING 2 × FREEDOS</span></div> |
| <div class="controls"> |
| <label class="field"><span>MQTT broker（WSS，由網頁橋接 DOS 的 TCP 1883）</span><input id="broker" list="brokers" value="wss://broker.emqx.io:8084/mqtt" spellcheck="false" autocomplete="off"><datalist id="brokers"><option value="wss://broker.emqx.io:8084/mqtt"><option value="wss://test.mosquitto.org:8081"><option value="wss://broker.hivemq.com:8884/mqtt"></datalist></label> |
| <label class="field topic-field"><span>共用 topic</span><input id="topic" spellcheck="false" autocomplete="off"></label> |
| <button class="connect-button" id="startButton" type="button" disabled><span class="button-icon">▶</span>等待 DOS 網路…</button> |
| </div> |
| <div class="connection-note"><span class="keycap">TIP</span><span id="note">兩台 DOS 開機並取得 DHCP 位址約需 15–25 秒。點選任一 DOS 畫面可直接用鍵盤操作它。</span></div> |
| </section> |
|
|
| <section class="workstations" aria-label="兩台 DOS 虛擬機"> |
| <article class="terminal-card panel" id="cardA"> |
| <div class="terminal-title"><span class="terminal-icon">A</span><div><h2>機器 A <span class="role">BACKGROUND / LISTENER</span></h2><p>A.EXE · 訂閱 topic · 收到後 1 秒 echo</p></div><span class="state-pill" id="aState">BOOT</span></div> |
| <div class="dos-screen" id="screenA"><div></div><canvas></canvas></div> |
| <div class="terminal-footer"><span>RX <b id="rxCount">000</b></span><span>ECHO <b id="echoCount">000</b></span><span class="grow"></span><span id="aIp">IP —</span></div> |
| </article> |
| <article class="terminal-card panel" id="cardB"> |
| <div class="terminal-title"><span class="terminal-icon blue">B</span><div><h2>機器 B <span class="role">FOREGROUND / SENDER</span></h2><p>B.EXE · 執行一次送一則訊息 · 每 5 秒執行</p></div><span class="state-pill" id="bState">BOOT</span></div> |
| <div class="dos-screen" id="screenB"><div></div><canvas></canvas></div> |
| <div class="terminal-footer"><span>RUNS <b id="runCount">000</b></span><span>SENT <b id="sentCount">000</b></span><span class="grow"></span><span id="bIp">IP —</span></div> |
| </article> |
| </section> |
|
|
| <section class="observe panel"> |
| <div class="panel-heading"><span class="prompt">LOG</span><h2>觀察：A 有沒有收到 B 送的訊息</h2><span class="panel-tag" id="matchTag">0 / 0 MATCHED</span></div> |
| <div class="log" id="log" aria-live="polite"><div class="log-empty">按下「開始」後，這裡會列出從兩台 DOS 畫面上讀到的事件，以及橋接器看到的 TCP 連線。</div></div> |
| </section> |
|
|
| <section class="bottom-row"> |
| <div class="how panel"><div class="mini-heading"><span>01—04</span><h2>資料怎麼走</h2></div><ol> |
| <li><b>DOS</b><span>A.EXE / B.EXE 用 mTCP 自己做 DNS、TCP 三向交握與 MQTT 3.1.1。</span></li> |
| <li><b>網卡</b><span>封包經 Crynwr NE2000 驅動送到 v86 虛擬網卡，DHCP 與 DNS（DoH）由 v86 回應。</span></li> |
| <li><b>橋接</b><span>瀏覽器不能開原生 TCP，網頁把 DOS 對 1883 埠的位元組串流原封不動轉成 WSS。</span></li> |
| <li><b>broker</b><span>公開 MQTT broker 看到的是標準 MQTT 封包；DOS 時鐘為 UTC。</span></li></ol></div> |
| <div class="share panel"><div class="mini-heading"><span>TEST</span><h2>跨分頁／跨裝置</h2></div><p>把 topic 複製到另一個分頁或裝置，兩邊的 A 都會收到對方 B 的訊息。也可用任何 MQTT 工具對同一 topic 發佈，看 A 的 DOS 畫面。</p><button class="copy-button" id="copyButton" type="button">複製 topic <span aria-hidden="true">↗</span></button></div> |
| </section> |
|
|
| <footer><span>DOS MQTT LAB <b>v3.0</b></span><span>v86 · FreeDOS 1.4 · Crynwr NE2000 · mTCP · GPL 原始碼見 src/</span><span>NO BROKER CREDENTIALS</span></footer> |
| </main> |
| <div class="toast" id="toast" role="status" aria-live="polite"></div> |
| </body> |
| </html> |
|
|
