init

2025-09-02 14:49:16 +08:00
commit 38ba663466
2885 changed files with 391107 additions and 0 deletions
--- a/resources/waiting-queue/examples/main.css
+++ b/resources/waiting-queue/examples/main.css
--- a/resources/waiting-queue/examples/visitor.html
+++ b/resources/waiting-queue/examples/visitor.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Conference WebSocket</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="./main.css" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@7.0.0/bundles/stomp.umd.min.js"></script>
+    <script src="./visitor.js"></script>
+</head>
+<body>
+<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
+    enabled. Please enable
+    Javascript and reload this page!</h2></noscript>
+<div id="main-content" class="container">
+    <div class="row">
+        <div class="col-md-6">
+            <form class="form-inline">
+                <div class="form-group">
+                    <label for="connect">WebSocket connection:</label>
+                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
+                    <label for="conference">What is your conference?</label>
+                    <input type="text" id="conference" class="form-control" placeholder="Your conference here...">
+                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <table id="conference" class="table table-striped">
+                <thead>
+                <tr>
+                    <th>Messages</th>
+                </tr>
+                </thead>
+                <tbody id="messages">
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</body>
+</html>
--- a/resources/waiting-queue/examples/visitor.js
+++ b/resources/waiting-queue/examples/visitor.js
@@ -0,0 +1,63 @@
+const token = 'JWT_TOKEN_GOES_HERE'
+
+const stompClient = new StompJs.Client({
+    brokerURL: 'ws://localhost:8060/waiting-queue/visitor/websocket',
+});
+
+stompClient.onWebSocketError = (error) => {
+        console.error('Error with websocket', error);
+};
+
+stompClient.onStompError = (frame) => {
+    console.error('Broker reported error: ' + frame.headers['message']);
+    console.error('Additional details: ' + frame.body);
+};
+
+function setConnected(connected) {
+    $("#connect").prop("disabled", connected);
+    $("#disconnect").prop("disabled", !connected);
+    if (connected) {
+        $("#conversation").show();
+    }
+    else {
+        $("#conversation").hide();
+    }
+    $("#messages").html("");
+}
+
+function connect(conference) {
+    console.log("Connecting to conference " + conference);
+
+    headers = {
+        Authorization: 'Bearer ' + token
+    };
+
+    stompClient.connectHeaders = headers;
+
+    stompClient.onConnect = (frame) => {
+        setConnected(true);
+        console.log('Connected: ' + frame);
+
+        stompClient.subscribe('/secured/conference/visitor/topic.' + conference, (message) => {
+            showMessage(message.body);
+        }, headers);
+    };
+
+    stompClient.activate();
+}
+
+function disconnect() {
+    stompClient.deactivate();
+    setConnected(false);
+    console.log("Disconnected");
+}
+
+function showMessage(message) {
+    $("#messages").append("<tr><td>" + message + "</td></tr>");
+}
+
+$(function () {
+    $("form").on('submit', (e) => e.preventDefault());
+    $( "#connect" ).click(() => connect($("#conference").val()));
+    $( "#disconnect" ).click(() => disconnect());
+});