Initial commit

2025-11-29 18:52:50 +08:00
commit caae91ec55
17 changed files with 2063 additions and 0 deletions
--- a/skills/skill-adapter/assets/example_client.html
+++ b/skills/skill-adapter/assets/example_client.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebSocket Client Example</title>
+    <style>
+        /* Basic Styling */
+        body {
+            font-family: sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f4;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        .container {
+            width: 80%;
+            max-width: 600px;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+
+        h1 {
+            color: #333;
+        }
+
+        #messages {
+            margin-top: 20px;
+            text-align: left;
+        }
+
+        #message-input {
+            width: 70%;
+            padding: 10px;
+            margin-right: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        #send-button {
+            padding: 10px 20px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        #send-button:hover {
+            background-color: #0056b3;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 600px) {
+            .container {
+                width: 95%;
+            }
+
+            #message-input {
+                width: 60%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>WebSocket Client</h1>
+        <p>Connect to WebSocket server at: <code>{{websocket_url}}</code></p>
+
+        <div id="messages">
+            <!-- Messages will be displayed here -->
+        </div>
+
+        <div>
+            <input type="text" id="message-input" placeholder="Enter message">
+            <button id="send-button">Send</button>
+        </div>
+    </div>
+
+    <script>
+        // JavaScript to handle WebSocket connection and messages
+        const websocketUrl = "{{websocket_url}}"; // Replace with your WebSocket server URL
+        const messagesDiv = document.getElementById('messages');
+        const messageInput = document.getElementById('message-input');
+        const sendButton = document.getElementById('send-button');
+
+        let websocket;
+
+        function connectWebSocket() {
+            websocket = new WebSocket(websocketUrl);
+
+            websocket.onopen = () => {
+                console.log('Connected to WebSocket server');
+                appendMessage('Connected to server.');
+            };
+
+            websocket.onmessage = (event) => {
+                console.log('Received message:', event.data);
+                appendMessage('Server: ' + event.data);
+            };
+
+            websocket.onclose = () => {
+                console.log('Disconnected from WebSocket server');
+                appendMessage('Disconnected from server.');
+            };
+
+            websocket.onerror = (error) => {
+                console.error('WebSocket error:', error);
+                appendMessage('Error: ' + error);
+            };
+        }
+
+        function appendMessage(message) {
+            const messageElement = document.createElement('p');
+            messageElement.textContent = message;
+            messagesDiv.appendChild(messageElement);
+            messagesDiv.scrollTop = messagesDiv.scrollHeight; // Auto-scroll to bottom
+        }
+
+        sendButton.addEventListener('click', () => {
+            const message = messageInput.value;
+            if (message) {
+                websocket.send(message);
+                appendMessage('You: ' + message);
+                messageInput.value = ''; // Clear the input
+            }
+        });
+
+        // Connect to the WebSocket server when the page loads
+        connectWebSocket();
+    </script>
+</body>
+</html>