Python.Publisher.Subscriber/client.html at master · venantvr-pubsub/Python.Publisher.Subscriber · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>Python Publisher Subscriber Client & Admin</title>
    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body class="p-5">
<div class="container">
    <h1>Python Publisher Subscriber Client & Admin</h1>

    <div class="row mb-3">
        <div class="col">
            <input class="form-control" id="consumer" placeholder="Consumer name" type="text" value="alice"/>
        </div>
        <div class="col">
            <input class="form-control" id="topics" placeholder="Topics comma-separated (e.g., sport,finance)"
                   type="text" value="sport,finance"/>
        </div>
        <div class="col">
            <button class="btn btn-primary" id="connectBtn">Connect & Subscribe</button>
        </div>
    </div>

    <hr/>

    <h2>Publish</h2>
    <div class="row mb-3">
        <div class="col">
            <input class="form-control" id="pubTopic" placeholder="Topic" type="text">
        </div>
        <div class="col">
            <input id="pubProducer" placeholder="Producer name" type="text" value="frontend_publisher"/>
        </div>
        <div class="col">
            <input id="pubMessage" placeholder="Message text" type="text"/>
        </div>
        <div class="col">
            <button class="btn btn-success" id="pubBtn">Publish</button>
        </div>
    </div>

    <hr/>

    <ul class="nav nav-tabs" id="pubSubTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button aria-controls="received-messages" aria-selected="true" class="nav-link active"
                    data-bs-target="#received-messages" data-bs-toggle="tab" id="received-messages-tab" role="tab"
                    type="button">Received Messages
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button aria-controls="clients" aria-selected="false" class="nav-link" data-bs-target="#clients"
                    data-bs-toggle="tab" id="clients-tab" role="tab" type="button">Clients Connected
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button aria-controls="messages" aria-selected="false" class="nav-link" data-bs-target="#messages"
                    data-bs-toggle="tab" id="messages-tab" role="tab" type="button">Published Messages
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button aria-controls="consumptions" aria-selected="false" class="nav-link"
                    data-bs-target="#consumptions" data-bs-toggle="tab" id="consumptions-tab" role="tab"
                    type="button">Consumptions
            </button>
        </li>
    </ul>

    <div class="tab-content" id="pubSubTabContent">
        <div aria-labelledby="received-messages-tab" class="tab-pane fade show active" id="received-messages"
             role="tabpanel">
            <ul class="list-group mt-3 mb-5" id="receivedMessagesList"></ul>
        </div>
        <div aria-labelledby="clients-tab" class="tab-pane fade" id="clients" role="tabpanel">
            <table class="table table-bordered mt-3" id="clientsTable">
                <thead>
                <tr>
                    <th>Consumer</th>
                    <th>Topic</th>
                    <th>Connected At</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div aria-labelledby="messages-tab" class="tab-pane fade" id="messages" role="tabpanel">
            <table class="table table-bordered mt-3" id="messagesTable">
                <thead>
                <tr>
                    <th>Producer</th>
                    <th>Topic</th>
                    <th>Message</th>
                    <th>Timestamp</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div aria-labelledby="consumptions-tab" class="tab-pane fade" id="consumptions" role="tabpanel">
            <table class="table table-bordered mt-3" id="consTable">
                <thead>
                <tr>
                    <th>Consumer</th>
                    <th>Topic</th>
                    <th>Message</th>
                    <th>Timestamp</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/pubsub_ws.js"></script>
</body>

</html>