Fetch the repository succeeded.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<link
rel="stylesheet"
type="text/css"
href="node_modules/bulma/css/bulma.css"
/>
<link rel="stylesheet" type="text/css" href="./main.css" />
<title>Electron MQTT</title>
</head>
<body>
<div class="main">
<div class="card connection">
<header class="card-header">
<h1 class="card-header-title">Connection</h1>
</header>
<div class="card-content">
<form name="connection" class="content">
<div class="columns">
<div class="column">
<label class="label">Protocol</label>
<div class="control">
<div class="select">
<select name="protocol" id="protocol-select">
<option value="mqtt">mqtt</option>
<option value="mqtts">mqtts</option>
<option value="ws">ws</option>
<option value="wss">wss</option>
</select>
</div>
</div>
</div>
<div class="column">
<label class="label">Host</label>
<div class="control">
<input
class="input"
name="host"
type="text"
value="broker.emqx.io"
/>
</div>
</div>
<div class="column">
<label class="label">Port</label>
<div class="control">
<input
class="input"
name="port"
type="text"
value="1883"
type="number"
/>
</div>
</div>
<div class="column">
<label class="label">Client ID</label>
<div class="control">
<input
class="input"
name="clientId"
type="text"
value="emqx_electron_791d3123"
/>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<label class="label">Username</label>
<div class="control">
<input class="input" name="username" type="text" />
</div>
</div>
<div class="column">
<label class="label">Password</label>
<div class="control">
<input class="input" name="password" type="text" />
</div>
</div>
<div class="column" id="path-ipt">
<label class="label">Path</label>
<div class="control">
<input class="input" name="path" type="text" value="/mqtt" />
</div>
</div>
</div>
<div class="columns" id="file-area">
<div class="column">
<label class="label">CA File</label>
<div class="file">
<label class="file-label">
<input
class="file-input"
type="file"
name="resume"
id="ca"
/>
<span class="file-cta">
<span class="file-label"> Choose a file… </span>
</span>
<span class="file-name" id="caFileName"> No File </span>
</label>
</div>
</div>
<div class="column">
<label class="label">Client Certificate File</label>
<div class="file">
<label class="file-label">
<input
class="file-input"
type="file"
name="resume"
id="client-cert"
/>
<span class="file-cta">
<span class="file-label"> Choose a file… </span>
</span>
<span class="file-name" id="client-cert-file-name">
No File
</span>
</label>
</div>
</div>
<div class="column">
<label class="label">Client Key File</label>
<div class="file">
<label class="file-label">
<input
class="file-input"
type="file"
name="resume"
id="clientKey"
/>
<span class="file-cta">
<span class="file-label"> Choose a file… </span>
</span>
<span class="file-name" id="client-key-file-name">
No File
</span>
</label>
</div>
</div>
</div>
</form>
</div>
<footer class="card-footer">
<button id="connect-btn" class="card-footer-item button is-primary">
Connect
</button>
<button
id="disconnect-btn"
class="card-footer-item button is-danger is-light"
>
Disconnect
</button>
</footer>
</div>
<div class="mqtt-sub-pub columns">
<div class="column">
<div class="card subscriber">
<header class="card-header">
<p class="card-header-title">Subscriber</p>
</header>
<div class="card-content">
<form name="subscriber" class="content">
<div class="field">
<label class="label">Topic</label>
<div class="control">
<input
name="topic"
class="input"
type="text"
value="testtopic/electron"
/>
</div>
</div>
<div class="field">
<label class="label">QoS</label>
<div class="control">
<div class="select">
<select name="qos">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</form>
<div class="field is-grouped">
<p class="control">
<button
id="sub-btn"
class="card-footer-item button is-primary"
>
Subscribe
</button>
</p>
<p class="control">
<button
id="unsub-btn"
class="card-footer-item button is-danger is-light"
>
Unsubscribe
</button>
</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card publisher">
<header class="card-header">
<p class="card-header-title">Publisher</p>
</header>
<div class="card-content">
<form name="publisher" class="content">
<div class="field">
<label class="label">Topic</label>
<div class="control">
<input
name="topic"
class="input"
type="text"
value="testtopic/electron"
/>
</div>
</div>
<div class="field">
<label class="label">QoS</label>
<div class="control">
<div class="select">
<select name="qos">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">Payload</label>
<div class="control">
<textarea
name="payload"
class="textarea"
rows="2"
placeholder="e.g. Electron connection demo...!"
></textarea>
</div>
</div>
</form>
<div class="field is-grouped">
<p class="control">
<button
id="send-btn"
class="card-footer-item button is-primary"
>
Send
</button>
</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card receiver">
<header class="card-header">
<h1 class="card-header-title">Receiver</h1>
</header>
<div class="card-content">
<div class="content">
<article id="article" class="message is-success"></article>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./renderer.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手