637 lines
21 KiB
HTML
637 lines
21 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>ANSCloud Integration Architecture</title>
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'DM Sans', sans-serif;
|
||
|
|
background: #0a0e1a;
|
||
|
|
color: #e0e4ef;
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 30px 20px;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-title {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
.page-title h1 {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 22px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #fff;
|
||
|
|
letter-spacing: -0.5px;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
.page-title .sub {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #6b7394;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Main Architecture ── */
|
||
|
|
.arch-container {
|
||
|
|
max-width: 1100px;
|
||
|
|
margin: 0 auto 50px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Tier Section ── */
|
||
|
|
.tier-section {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tier-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
margin-bottom: 14px;
|
||
|
|
}
|
||
|
|
.tier-badge {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 700;
|
||
|
|
padding: 4px 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.tier-1 .tier-badge { background: #1a3a2a; color: #4ade80; border: 1px solid #2d5a3e; }
|
||
|
|
.tier-2 .tier-badge { background: #1a2a4a; color: #60a5fa; border: 1px solid #2d4a6e; }
|
||
|
|
.tier-3 .tier-badge { background: #2a1a3a; color: #c084fc; border: 1px solid #4a2d6e; }
|
||
|
|
|
||
|
|
.tier-label {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #c0c8e0;
|
||
|
|
}
|
||
|
|
.tier-desc {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #6b7394;
|
||
|
|
margin-left: auto;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Flow Row ── */
|
||
|
|
.flow-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0;
|
||
|
|
padding: 16px 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.tier-1 .flow-row { background: linear-gradient(135deg, #0d1a14 0%, #0f1820 100%); border: 1px solid #1a3a2a; }
|
||
|
|
.tier-2 .flow-row { background: linear-gradient(135deg, #0d1420 0%, #0f1828 100%); border: 1px solid #1a2a4a; }
|
||
|
|
.tier-3 .flow-row { background: linear-gradient(135deg, #14101e 0%, #18122a 100%); border: 1px solid #2a1a3a; }
|
||
|
|
|
||
|
|
/* ── Boxes ── */
|
||
|
|
.box {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 12px 16px;
|
||
|
|
border-radius: 8px;
|
||
|
|
min-width: 120px;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.box-icon {
|
||
|
|
font-size: 20px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
.box-title {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.box-sub {
|
||
|
|
font-size: 10px;
|
||
|
|
color: #6b7394;
|
||
|
|
line-height: 1.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Box themes */
|
||
|
|
.box-partner {
|
||
|
|
background: #141824;
|
||
|
|
border: 1px solid #2a3050;
|
||
|
|
min-width: 150px;
|
||
|
|
}
|
||
|
|
.box-partner .box-title { color: #94a3c8; }
|
||
|
|
|
||
|
|
.box-api {
|
||
|
|
background: linear-gradient(145deg, #1a3a2a, #153020);
|
||
|
|
border: 1px solid #2d5a3e;
|
||
|
|
}
|
||
|
|
.box-api .box-title { color: #4ade80; }
|
||
|
|
|
||
|
|
.box-protocol {
|
||
|
|
background: linear-gradient(145deg, #1a2a4a, #152040);
|
||
|
|
border: 1px solid #2d4a6e;
|
||
|
|
}
|
||
|
|
.box-protocol .box-title { color: #60a5fa; }
|
||
|
|
|
||
|
|
.box-lib {
|
||
|
|
background: linear-gradient(145deg, #2a1a3a, #201530);
|
||
|
|
border: 1px solid #4a2d6e;
|
||
|
|
}
|
||
|
|
.box-lib .box-title { color: #c084fc; }
|
||
|
|
|
||
|
|
.box-broker {
|
||
|
|
background: linear-gradient(145deg, #2a2010, #201810);
|
||
|
|
border: 1px solid #5a4a2d;
|
||
|
|
}
|
||
|
|
.box-broker .box-title { color: #fbbf24; }
|
||
|
|
|
||
|
|
.box-device {
|
||
|
|
background: linear-gradient(145deg, #1a1418, #201820);
|
||
|
|
border: 1px solid #4a3040;
|
||
|
|
}
|
||
|
|
.box-device .box-title { color: #f472b6; }
|
||
|
|
|
||
|
|
.box-gateway {
|
||
|
|
background: linear-gradient(145deg, #1a2820, #152218);
|
||
|
|
border: 1px solid #2d5a3e;
|
||
|
|
}
|
||
|
|
.box-gateway .box-title { color: #34d399; }
|
||
|
|
|
||
|
|
/* ── Arrows ── */
|
||
|
|
.arrow {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 8px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.arrow-line {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #3a4060;
|
||
|
|
letter-spacing: -2px;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.arrow-label {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 9px;
|
||
|
|
font-weight: 600;
|
||
|
|
white-space: nowrap;
|
||
|
|
margin-top: 2px;
|
||
|
|
}
|
||
|
|
.tier-1 .arrow-label { color: #4ade80; }
|
||
|
|
.tier-2 .arrow-label { color: #60a5fa; }
|
||
|
|
.tier-3 .arrow-label { color: #c084fc; }
|
||
|
|
|
||
|
|
/* ── Languages list ── */
|
||
|
|
.lang-tags {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 4px;
|
||
|
|
margin-top: 6px;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.lang-tag {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 9px;
|
||
|
|
padding: 2px 6px;
|
||
|
|
border-radius: 3px;
|
||
|
|
background: rgba(255,255,255,0.06);
|
||
|
|
color: #8890a8;
|
||
|
|
border: 1px solid rgba(255,255,255,0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Cloud B Detail ── */
|
||
|
|
.cloud-b-section {
|
||
|
|
max-width: 1100px;
|
||
|
|
margin: 0 auto 40px;
|
||
|
|
}
|
||
|
|
.cloud-b-section h2 {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #fbbf24;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cloud-b-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr 1fr;
|
||
|
|
gap: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cloud-b-card {
|
||
|
|
background: linear-gradient(145deg, #12161f 0%, #0e1218 100%);
|
||
|
|
border: 1px solid #1e2438;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 18px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.cloud-b-card::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0; left: 0; right: 0;
|
||
|
|
height: 2px;
|
||
|
|
border-radius: 10px 10px 0 0;
|
||
|
|
}
|
||
|
|
.cloud-b-card:nth-child(1)::before { background: #4ade80; }
|
||
|
|
.cloud-b-card:nth-child(2)::before { background: #fbbf24; }
|
||
|
|
.cloud-b-card:nth-child(3)::before { background: #f472b6; }
|
||
|
|
|
||
|
|
.cloud-b-card h3 {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.cloud-b-card:nth-child(1) h3 { color: #4ade80; }
|
||
|
|
.cloud-b-card:nth-child(2) h3 { color: #fbbf24; }
|
||
|
|
.cloud-b-card:nth-child(3) h3 { color: #f472b6; }
|
||
|
|
|
||
|
|
.cb-item {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #8890a8;
|
||
|
|
padding: 4px 0;
|
||
|
|
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 6px;
|
||
|
|
}
|
||
|
|
.cb-item:last-child { border: none; }
|
||
|
|
.cb-dot {
|
||
|
|
width: 5px;
|
||
|
|
height: 5px;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-top: 5px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.cloud-b-card:nth-child(1) .cb-dot { background: #4ade80; }
|
||
|
|
.cloud-b-card:nth-child(2) .cb-dot { background: #fbbf24; }
|
||
|
|
.cloud-b-card:nth-child(3) .cb-dot { background: #f472b6; }
|
||
|
|
|
||
|
|
/* ── Comparison Table ── */
|
||
|
|
.compare-section {
|
||
|
|
max-width: 1100px;
|
||
|
|
margin: 0 auto 40px;
|
||
|
|
}
|
||
|
|
.compare-section h2 {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #c0c8e0;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.compare-table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.compare-table th {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 700;
|
||
|
|
text-align: left;
|
||
|
|
padding: 10px 14px;
|
||
|
|
border-bottom: 2px solid #1e2438;
|
||
|
|
color: #8890a8;
|
||
|
|
}
|
||
|
|
.compare-table td {
|
||
|
|
padding: 10px 14px;
|
||
|
|
border-bottom: 1px solid #141824;
|
||
|
|
color: #a0a8c0;
|
||
|
|
}
|
||
|
|
.compare-table tr:hover td {
|
||
|
|
background: rgba(255,255,255,0.02);
|
||
|
|
}
|
||
|
|
.compare-table .tier-name {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.t1c { color: #4ade80; }
|
||
|
|
.t2c { color: #60a5fa; }
|
||
|
|
.t3c { color: #c084fc; }
|
||
|
|
|
||
|
|
.star { color: #fbbf24; }
|
||
|
|
.check { color: #4ade80; }
|
||
|
|
.cross { color: #f87171; opacity: 0.6; }
|
||
|
|
|
||
|
|
/* ── RPC Flow ── */
|
||
|
|
.rpc-section {
|
||
|
|
max-width: 1100px;
|
||
|
|
margin: 0 auto 40px;
|
||
|
|
}
|
||
|
|
.rpc-section h2 {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #c0c8e0;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.rpc-flow {
|
||
|
|
background: linear-gradient(145deg, #0e1218 0%, #12161f 100%);
|
||
|
|
border: 1px solid #1e2438;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 24px;
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 11px;
|
||
|
|
line-height: 1.8;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
.rpc-flow .actor { color: #fbbf24; font-weight: 700; }
|
||
|
|
.rpc-flow .action { color: #4ade80; }
|
||
|
|
.rpc-flow .proto { color: #60a5fa; }
|
||
|
|
.rpc-flow .data { color: #c084fc; }
|
||
|
|
.rpc-flow .dim { color: #3a4060; }
|
||
|
|
.rpc-flow .step { color: #f472b6; font-weight: 700; }
|
||
|
|
|
||
|
|
/* ── Responsive ── */
|
||
|
|
@media (max-width: 900px) {
|
||
|
|
.cloud-b-grid { grid-template-columns: 1fr; }
|
||
|
|
.flow-row { flex-wrap: wrap; justify-content: center; gap: 8px; }
|
||
|
|
.arrow { padding: 4px 6px; }
|
||
|
|
.compare-table { font-size: 11px; }
|
||
|
|
.compare-table th, .compare-table td { padding: 8px 8px; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="page-title">
|
||
|
|
<h1>ANSCloud — Partner Integration Architecture</h1>
|
||
|
|
<div class="sub">3-Tier Integration Strategy: REST API → AMQP Protocol → C++ FFI Library</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<!-- TIER 1 -->
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<div class="arch-container">
|
||
|
|
<div class="tier-section tier-1">
|
||
|
|
<div class="tier-header">
|
||
|
|
<span class="tier-badge">TIER 1</span>
|
||
|
|
<span class="tier-label">REST / WebSocket API Gateway</span>
|
||
|
|
<span class="tier-desc">★ Recommended for most partners</span>
|
||
|
|
</div>
|
||
|
|
<div class="flow-row">
|
||
|
|
<div class="box box-partner">
|
||
|
|
<div class="box-icon">🌐</div>
|
||
|
|
<div class="box-title">Partner CMS</div>
|
||
|
|
<div class="box-sub">Any language</div>
|
||
|
|
<div class="lang-tags">
|
||
|
|
<span class="lang-tag">Node.js</span>
|
||
|
|
<span class="lang-tag">Python</span>
|
||
|
|
<span class="lang-tag">Go</span>
|
||
|
|
<span class="lang-tag">Java</span>
|
||
|
|
<span class="lang-tag">C#</span>
|
||
|
|
<span class="lang-tag">PHP</span>
|
||
|
|
<span class="lang-tag">Ruby</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="arrow">
|
||
|
|
<div class="arrow-line">──────►</div>
|
||
|
|
<div class="arrow-label">HTTPS / WSS</div>
|
||
|
|
</div>
|
||
|
|
<div class="box box-api">
|
||
|
|
<div class="box-icon">🛡️</div>
|
||
|
|
<div class="box-title">API Gateway</div>
|
||
|
|
<div class="box-sub">Cloud B<br>Auth + Rate Limit</div>
|
||
|
|
</div>
|
||
|
|
<div class="arrow">
|
||
|
|
<div class="arrow-line">──────►</div>
|
||
|
|
<div class="arrow-label">AMQP internal</div>
|
||
|
|
</div>
|
||
|
|
<div class="box box-broker">
|
||
|
|
<div class="box-icon">📨</div>
|
||
|
|
<div class="box-title">RabbitMQ</div>
|
||
|
|
<div class="box-sub">Cloud B<br>Exchanges + Queues</div>
|
||
|
|
</div>
|
||
|
|
<div class="arrow">
|
||
|
|
<div class="arrow-line">──────►</div>
|
||
|
|
<div class="arrow-label">AMQP TLS</div>
|
||
|
|
</div>
|
||
|
|
<div class="box box-device">
|
||
|
|
<div class="box-icon">📷</div>
|
||
|
|
<div class="box-title">AIBOX</div>
|
||
|
|
<div class="box-sub">anscloud-device<br>C++ + Your RabbitMQ API</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<!-- TIER 2 -->
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<div class="tier-section tier-2">
|
||
|
|
<div class="tier-header">
|
||
|
|
<span class="tier-badge">TIER 2</span>
|
||
|
|
<span class="tier-label">Native AMQP Protocol (Direct Broker Access)</span>
|
||
|
|
<span class="tier-desc">Advanced integrators, on-prem</span>
|
||
|
|
</div>
|
||
|
|
<div class="flow-row">
|
||
|
|
<div class="box box-partner">
|
||
|
|
<div class="box-icon">⚡</div>
|
||
|
|
<div class="box-title">Partner CMS</div>
|
||
|
|
<div class="box-sub">Native AMQP lib</div>
|
||
|
|
<div class="lang-tags">
|
||
|
|
<span class="lang-tag">amqplib</span>
|
||
|
|
<span class="lang-tag">pika</span>
|
||
|
|
<span class="lang-tag">amqp091-go</span>
|
||
|
|
<span class="lang-tag">Spring AMQP</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="arrow">
|
||
|
|
<div class="arrow-line">════════════════════════►</div>
|
||
|
|
<div class="arrow-label">AMQP 0-9-1 (direct, same protocol)</div>
|
||
|
|
</div>
|
||
|
|
<div class="box box-broker">
|
||
|
|
<div class="box-icon">📨</div>
|
||
|
|
<div class="box-title">RabbitMQ</div>
|
||
|
|
<div class="box-sub">Cloud B<br>Partner vhost</div>
|
||
|
|
</div>
|
||
|
|
<div class="arrow">
|
||
|
|
<div class="arrow-line">──────►</div>
|
||
|
|
<div class="arrow-label">AMQP TLS</div>
|
||
|
|
</div>
|
||
|
|
<div class="box box-device">
|
||
|
|
<div class="box-icon">📷</div>
|
||
|
|
<div class="box-title">AIBOX</div>
|
||
|
|
<div class="box-sub">anscloud-device<br>C++ + Your RabbitMQ API</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<!-- TIER 3 -->
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<div class="tier-section tier-3">
|
||
|
|
<div class="tier-header">
|
||
|
|
<span class="tier-badge">TIER 3</span>
|
||
|
|
<span class="tier-label">C++ Gateway Library via FFI</span>
|
||
|
|
<span class="tier-desc">Your CMS, embedded, C/C++ partners</span>
|
||
|
|
</div>
|
||
|
|
<div class="flow-row">
|
||
|
|
<div class="box box-partner">
|
||
|
|
<div class="box-icon">🔧</div>
|
||
|
|
<div class="box-title">Partner CMS</div>
|
||
|
|
<div class="box-sub">Links .dll / .so</div>
|
||
|
|
<div class="lang-tags">
|
||
|
|
<span class="lang-tag">cgo</span>
|
||
|
|
<span class="lang-tag">ctypes</span>
|
||
|
|
<span class="lang-tag">P/Invoke</span>
|
||
|
|
<span class="lang-tag">ffi-napi</span>
|
||
|
|
<span class="lang-tag">JNI</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="arrow">
|
||
|
|
<div class="arrow-line">──────►</div>
|
||
|
|
<div class="arrow-label">C API (FFI)</div>
|
||
|
|
</div>
|
||
|
|
<div class="box box-lib">
|
||
|
|
<div class="box-icon">📦</div>
|
||
|
|
<div class="box-title">anscloud-gateway</div>
|
||
|
|
<div class="box-sub">C++ lib (CMSCore)<br>gateway_agent_c.h</div>
|
||
|
|
</div>
|
||
|
|
<div class="arrow">
|
||
|
|
<div class="arrow-line">──────►</div>
|
||
|
|
<div class="arrow-label">Your RabbitMQ API</div>
|
||
|
|
</div>
|
||
|
|
<div class="box box-broker">
|
||
|
|
<div class="box-icon">📨</div>
|
||
|
|
<div class="box-title">RabbitMQ</div>
|
||
|
|
<div class="box-sub">Cloud B</div>
|
||
|
|
</div>
|
||
|
|
<div class="arrow">
|
||
|
|
<div class="arrow-line">──────►</div>
|
||
|
|
<div class="arrow-label">AMQP TLS</div>
|
||
|
|
</div>
|
||
|
|
<div class="box box-device">
|
||
|
|
<div class="box-icon">📷</div>
|
||
|
|
<div class="box-title">AIBOX</div>
|
||
|
|
<div class="box-sub">anscloud-device<br>C++ + Your RabbitMQ API</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<!-- Cloud B Detail -->
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<div class="cloud-b-section">
|
||
|
|
<h2>☁️ Cloud B — Messaging Platform (You Own)</h2>
|
||
|
|
<div class="cloud-b-grid">
|
||
|
|
<div class="cloud-b-card">
|
||
|
|
<h3>API Gateway Layer</h3>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>REST endpoints for commands, status, telemetry</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>WebSocket for real-time event streaming</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>Webhook push to partner URLs</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>API key auth + JWT per tenant</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>Rate limiting per partner tier</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>Serves Tier 1 partners</div>
|
||
|
|
</div>
|
||
|
|
<div class="cloud-b-card">
|
||
|
|
<h3>RabbitMQ Broker</h3>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>ex.command → direct → device queues</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>ex.device.telemetry → topic → ingest</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>ex.device.events → topic → processor</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>ex.device.status → topic → tracker</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>ex.broadcast → fanout → all devices</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>vhost isolation per tenant</div>
|
||
|
|
</div>
|
||
|
|
<div class="cloud-b-card">
|
||
|
|
<h3>AIBOX Devices</h3>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>anscloud-device (C++ static lib)</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>Uses YOUR existing RabbitMQ C++ API</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>IMessageBroker adapter pattern</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>Auto boot → connect → heartbeat</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>Publishes telemetry, events, status</div>
|
||
|
|
<div class="cb-item"><div class="cb-dot"></div>Receives & executes commands</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<!-- RPC Command Flow -->
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<div class="rpc-section">
|
||
|
|
<h2>Command RPC Flow (Tier 1 Example)</h2>
|
||
|
|
<div class="rpc-flow">
|
||
|
|
<span class="step">①</span> <span class="actor">Partner</span> <span class="action">POST</span> <span class="proto">/api/v1/devices/AIBOX-001/commands</span> <span class="data">{"command":"get_config"}</span><br>
|
||
|
|
<span class="dim">│</span><br>
|
||
|
|
<span class="step">②</span> <span class="actor">API GW</span> <span class="action">generates</span> <span class="data">cmd_id + correlation_id</span> → <span class="action">publish to</span> <span class="proto">ex.command</span> <span class="dim">routing_key=AIBOX-001</span><br>
|
||
|
|
<span class="dim">│</span><br>
|
||
|
|
<span class="step">③</span> <span class="actor">RabbitMQ</span> <span class="action">routes</span> → <span class="proto">q.cmd.AIBOX-001</span><br>
|
||
|
|
<span class="dim">│</span><br>
|
||
|
|
<span class="step">④</span> <span class="actor">AIBOX</span> <span class="action">consumes</span> → <span class="action">executes locally</span> → <span class="action">publishes response</span> → <span class="proto">ex.command.response</span><br>
|
||
|
|
<span class="dim">│</span><br>
|
||
|
|
<span class="step">⑤</span> <span class="actor">API GW</span> <span class="action">matches</span> <span class="data">correlation_id</span> → <span class="action">resolves pending request</span><br>
|
||
|
|
<span class="dim">│</span><br>
|
||
|
|
<span class="step">⑥</span> <span class="actor">Partner</span> <span class="action">receives</span> <span class="proto">HTTP 200</span> <span class="data">{"status":"success","result":{"version":"3.2.0","cameras":3}}</span><br>
|
||
|
|
<br>
|
||
|
|
<span class="dim">── Partner sees a simple REST call. RabbitMQ is completely hidden. ──</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<!-- Comparison -->
|
||
|
|
<!-- ════════════════════════════════════════════════════ -->
|
||
|
|
<div class="compare-section">
|
||
|
|
<h2>Tier Comparison</h2>
|
||
|
|
<table class="compare-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th>Language Support</th>
|
||
|
|
<th>Setup Effort</th>
|
||
|
|
<th>Latency</th>
|
||
|
|
<th>Partner Needs</th>
|
||
|
|
<th>You Control</th>
|
||
|
|
<th>Best For</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="tier-name t1c">Tier 1 — REST API</td>
|
||
|
|
<td>Any <span class="star">★</span></td>
|
||
|
|
<td>Minutes <span class="star">★</span></td>
|
||
|
|
<td>~50ms added</td>
|
||
|
|
<td>API key + docs</td>
|
||
|
|
<td>Auth, rate limits, versioning <span class="star">★</span></td>
|
||
|
|
<td>SaaS partners, web/mobile</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="tier-name t2c">Tier 2 — AMQP Direct</td>
|
||
|
|
<td>Has AMQP lib</td>
|
||
|
|
<td>Hours</td>
|
||
|
|
<td>Lowest <span class="star">★</span></td>
|
||
|
|
<td>Protocol guide + credentials</td>
|
||
|
|
<td>vhost isolation</td>
|
||
|
|
<td>Large integrators, on-prem</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="tier-name t3c">Tier 3 — C++ FFI</td>
|
||
|
|
<td>Has FFI support</td>
|
||
|
|
<td>Days</td>
|
||
|
|
<td>Low</td>
|
||
|
|
<td>DLL/so + C headers</td>
|
||
|
|
<td>Full protocol encapsulated</td>
|
||
|
|
<td>Your CMS, embedded, C++ devs</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|