Nuxt cliet service
This commit is contained in:
@@ -821,7 +821,7 @@
|
|||||||
);
|
);
|
||||||
const ipBased = document.getElementById("ipBasedCheck").checked;
|
const ipBased = document.getElementById("ipBasedCheck").checked;
|
||||||
|
|
||||||
let url = `ws://localhost:8080/api/v1/ws?user_id=${encodeURIComponent(
|
let url = `ws://meninjar.dev.rssa.id:8030/api/v1/ws?user_id=${encodeURIComponent(
|
||||||
userId
|
userId
|
||||||
)}&room=${encodeURIComponent(room)}`;
|
)}&room=${encodeURIComponent(room)}`;
|
||||||
|
|
||||||
|
|||||||
24
examples/clientsocket/.gitignore
vendored
Normal file
24
examples/clientsocket/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Nuxt dev/build outputs
|
||||||
|
.output
|
||||||
|
.data
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Node dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.fleet
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
75
examples/clientsocket/README.md
Normal file
75
examples/clientsocket/README.md
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
# Nuxt Minimal Starter
|
||||||
|
|
||||||
|
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Make sure to install dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development Server
|
||||||
|
|
||||||
|
Start the development server on `http://localhost:3000`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm dev
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Production
|
||||||
|
|
||||||
|
Build the application for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm build
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Locally preview production build:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run preview
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm preview
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn preview
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||||
6
examples/clientsocket/app/app.vue
Normal file
6
examples/clientsocket/app/app.vue
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<NuxtRouteAnnouncer />
|
||||||
|
<NuxtWelcome />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
672
examples/clientsocket/assets/css/main.css
Normal file
672
examples/clientsocket/assets/css/main.css
Normal file
@@ -0,0 +1,672 @@
|
|||||||
|
/* Enhanced WebSocket Client Styles */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 24px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-connected {
|
||||||
|
background: #4CAF50;
|
||||||
|
box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-connecting {
|
||||||
|
background: #FFC107;
|
||||||
|
animation: pulse 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-disconnected {
|
||||||
|
background: #F44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-indicator {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-excellent {
|
||||||
|
background: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-good {
|
||||||
|
background: #d1ecf1;
|
||||||
|
color: #0c5460;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-warning {
|
||||||
|
background: #fff3cd;
|
||||||
|
color: #856404;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-poor {
|
||||||
|
background: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 2px solid #e9ecef;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
overflow-x: auto;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 16px 24px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
background: #f8f9fa;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
border-bottom-color: #1976d2;
|
||||||
|
color: #1976d2;
|
||||||
|
font-weight: 600;
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
display: none;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input,
|
||||||
|
.input-group select,
|
||||||
|
.input-group textarea {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input:focus,
|
||||||
|
.input-group select:focus,
|
||||||
|
.input-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1976d2;
|
||||||
|
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group input[type="checkbox"] {
|
||||||
|
margin: 0;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #1976d2;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #1565c0;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #6c757d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #5a6268;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning {
|
||||||
|
background: #FFC107;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning:hover {
|
||||||
|
background: #e0a800;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info {
|
||||||
|
background: #17a2b8;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info:hover {
|
||||||
|
background: #138496;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: #dc3545;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover {
|
||||||
|
background: #c82333;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background: #28a745;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success:hover {
|
||||||
|
background: #218838;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-container {
|
||||||
|
height: 500px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
background: #fafafa;
|
||||||
|
font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-container::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-container::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-container::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c1c1;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #a8a8a8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 4px solid #1976d2;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
animation: slideIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { opacity: 0; transform: translateX(-20px); }
|
||||||
|
to { opacity: 1; transform: translateX(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.error {
|
||||||
|
border-left-color: #dc3545;
|
||||||
|
background: #fff5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.warning {
|
||||||
|
border-left-color: #FFC107;
|
||||||
|
background: #fffbf0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.info {
|
||||||
|
border-left-color: #17a2b8;
|
||||||
|
background: #f0f9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.success {
|
||||||
|
border-left-color: #28a745;
|
||||||
|
background: #f0fff4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-time {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-type {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: white;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 2.5em;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1976d2;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-users {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-users::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-users::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-users::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c1c1;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin: 8px 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-id {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-details {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 2px solid #f3f3f3;
|
||||||
|
border-top: 2px solid #1976d2;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-limit-warning {
|
||||||
|
background: #fff3cd;
|
||||||
|
border: 1px solid #ffeaa7;
|
||||||
|
padding: 16px;
|
||||||
|
margin: 16px 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #856404;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-controls {
|
||||||
|
background: #fff3cd;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
border: 1px solid #ffeaa7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-warning {
|
||||||
|
color: #856404;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message code {
|
||||||
|
display: block;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-container {
|
||||||
|
height: 300px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-container {
|
||||||
|
height: 250px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode support */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {
|
||||||
|
background-color: #121212;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: #1e1e1e;
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
background: #2a2a2a;
|
||||||
|
border: 1px solid #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
background: #2a2a2a;
|
||||||
|
border: 1px solid #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: #2a2a2a;
|
||||||
|
border: 1px solid #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-users {
|
||||||
|
background: #2a2a2a;
|
||||||
|
border: 1px solid #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item {
|
||||||
|
background: #333;
|
||||||
|
border: 1px solid #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-container {
|
||||||
|
background: #1a1a1a;
|
||||||
|
border-color: #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: #2a2a2a;
|
||||||
|
border-color: #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility improvements */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
* {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus styles for keyboard navigation */
|
||||||
|
.btn:focus,
|
||||||
|
.tab:focus,
|
||||||
|
.input-group input:focus,
|
||||||
|
.input-group select:focus,
|
||||||
|
.input-group textarea:focus {
|
||||||
|
outline: 2px solid #1976d2;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High contrast mode support */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
.btn {
|
||||||
|
border: 2px solid currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
border: 2px solid currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
border: 2px solid currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
367
examples/clientsocket/components/WebSocketClient.vue
Normal file
367
examples/clientsocket/components/WebSocketClient.vue
Normal file
@@ -0,0 +1,367 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<h1>WebSocket Client</h1>
|
||||||
|
|
||||||
|
<!-- Status Bar -->
|
||||||
|
<div class="status-bar">
|
||||||
|
<div class="status-item">
|
||||||
|
<div
|
||||||
|
class="status-indicator"
|
||||||
|
:class="connectionStatusClass"
|
||||||
|
></div>
|
||||||
|
<span>{{ connectionStatusText }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="status-item">
|
||||||
|
<span>Client ID:</span>
|
||||||
|
<strong>{{ connectionState?.clientId || 'Not connected' }}</strong>
|
||||||
|
</div>
|
||||||
|
<div class="status-item">
|
||||||
|
<span>Room:</span>
|
||||||
|
<strong>{{ connectionState?.currentRoom || 'None' }}</strong>
|
||||||
|
</div>
|
||||||
|
<div class="status-item">
|
||||||
|
<span>Messages:</span>
|
||||||
|
<strong>{{ messages?.length || 0 }}/{{ config?.maxMessages || 1000 }}</strong>
|
||||||
|
</div>
|
||||||
|
<div class="status-item">
|
||||||
|
<span>Uptime:</span>
|
||||||
|
<strong>{{ connectionState?.uptime || '00:00:00' }}</strong>
|
||||||
|
</div>
|
||||||
|
<div class="status-item">
|
||||||
|
<span>Health:</span>
|
||||||
|
<div
|
||||||
|
class="health-indicator"
|
||||||
|
:class="connectionHealthClass"
|
||||||
|
>
|
||||||
|
{{ connectionHealthText }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Message Limit Warning -->
|
||||||
|
<div v-if="shouldShowMessageWarning" class="message-limit-warning">
|
||||||
|
<v-icon>mdi-alert</v-icon>
|
||||||
|
Message limit approaching ({{ messages?.length || 0 }}/{{ config?.maxMessages || 1000 }})
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="tabs">
|
||||||
|
<button
|
||||||
|
class="tab"
|
||||||
|
:class="{ active: activeTab === 'connection' }"
|
||||||
|
@click="activeTab = 'connection'"
|
||||||
|
>
|
||||||
|
Connection
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab"
|
||||||
|
:class="{ active: activeTab === 'messaging' }"
|
||||||
|
@click="activeTab = 'messaging'"
|
||||||
|
>
|
||||||
|
Messaging
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab"
|
||||||
|
:class="{ active: activeTab === 'database' }"
|
||||||
|
@click="activeTab = 'database'"
|
||||||
|
>
|
||||||
|
Database
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab"
|
||||||
|
:class="{ active: activeTab === 'monitoring' }"
|
||||||
|
@click="activeTab = 'monitoring'"
|
||||||
|
>
|
||||||
|
Monitoring
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab"
|
||||||
|
:class="{ active: activeTab === 'admin' }"
|
||||||
|
@click="activeTab = 'admin'"
|
||||||
|
>
|
||||||
|
Admin
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab Content -->
|
||||||
|
<div class="tab-content" :class="{ active: activeTab === 'connection' }">
|
||||||
|
<ConnectionTab />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-content" :class="{ active: activeTab === 'messaging' }">
|
||||||
|
<MessagingTab />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-content" :class="{ active: activeTab === 'database' }">
|
||||||
|
<DatabaseTab />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-content" :class="{ active: activeTab === 'monitoring' }">
|
||||||
|
<MonitoringTab />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-content" :class="{ active: activeTab === 'admin' }">
|
||||||
|
<AdminTab />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||||
|
import { useWebSocket } from '~/composables/useWebSocket'
|
||||||
|
import ConnectionTab from './tabs/ConnectionTab.vue'
|
||||||
|
import MessagingTab from './tabs/MessagingTab.vue'
|
||||||
|
import DatabaseTab from './tabs/DatabaseTab.vue'
|
||||||
|
import MonitoringTab from './tabs/MonitoringTab.vue'
|
||||||
|
import AdminTab from './tabs/AdminTab.vue'
|
||||||
|
|
||||||
|
const activeTab = ref('connection')
|
||||||
|
|
||||||
|
const {
|
||||||
|
isConnected,
|
||||||
|
connectionStatus,
|
||||||
|
connectionState,
|
||||||
|
config,
|
||||||
|
messages,
|
||||||
|
stats,
|
||||||
|
onlineUsers,
|
||||||
|
activityLog,
|
||||||
|
connect,
|
||||||
|
disconnect,
|
||||||
|
cleanup,
|
||||||
|
isMessageLimitReached,
|
||||||
|
shouldShowMessageWarning,
|
||||||
|
connectionHealthColor,
|
||||||
|
connectionHealthText
|
||||||
|
} = useWebSocket()
|
||||||
|
|
||||||
|
const connectionStatusClass = computed(() => {
|
||||||
|
switch (connectionStatus.value) {
|
||||||
|
case 'connected': return 'status-connected'
|
||||||
|
case 'connecting': return 'status-connecting'
|
||||||
|
case 'disconnected': return 'status-disconnected'
|
||||||
|
default: return 'status-disconnected'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const connectionStatusText = computed(() => {
|
||||||
|
switch (connectionStatus.value) {
|
||||||
|
case 'connected': return 'Connected'
|
||||||
|
case 'connecting': return 'Connecting...'
|
||||||
|
case 'disconnected': return 'Disconnected'
|
||||||
|
case 'error': return 'Error'
|
||||||
|
default: return 'Unknown'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const connectionHealthClass = computed(() => {
|
||||||
|
switch (connectionState?.connectionHealth) {
|
||||||
|
case 'excellent': return 'health-excellent'
|
||||||
|
case 'good': return 'health-good'
|
||||||
|
case 'warning': return 'health-warning'
|
||||||
|
case 'poor': return 'health-poor'
|
||||||
|
default: return 'health-poor'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// Auto-connect on mount
|
||||||
|
connect()
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
cleanup()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 24px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-connected {
|
||||||
|
background: #4CAF50;
|
||||||
|
box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-connecting {
|
||||||
|
background: #FFC107;
|
||||||
|
animation: pulse 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-disconnected {
|
||||||
|
background: #F44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-indicator {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-excellent {
|
||||||
|
background: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-good {
|
||||||
|
background: #d1ecf1;
|
||||||
|
color: #0c5460;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-warning {
|
||||||
|
background: #fff3cd;
|
||||||
|
color: #856404;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-poor {
|
||||||
|
background: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 2px solid #e9ecef;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
overflow-x: auto;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 16px 24px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
background: #f8f9fa;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
border-bottom-color: #1976d2;
|
||||||
|
color: #1976d2;
|
||||||
|
font-weight: 600;
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
display: none;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-limit-warning {
|
||||||
|
background: #fff3cd;
|
||||||
|
border: 1px solid #ffeaa7;
|
||||||
|
padding: 16px;
|
||||||
|
margin: 16px 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #856404;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
665
examples/clientsocket/components/tabs/AdminTab.vue
Normal file
665
examples/clientsocket/components/tabs/AdminTab.vue
Normal file
@@ -0,0 +1,665 @@
|
|||||||
|
<template>
|
||||||
|
<div class="admin-tab">
|
||||||
|
<div class="controls">
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="adminCommand">Admin Command</label>
|
||||||
|
<select id="adminCommand" v-model="adminCommand">
|
||||||
|
<option value="restart_server">Restart Server</option>
|
||||||
|
<option value="shutdown_server">Shutdown Server</option>
|
||||||
|
<option value="clear_cache">Clear Cache</option>
|
||||||
|
<option value="reload_config">Reload Configuration</option>
|
||||||
|
<option value="backup_database">Backup Database</option>
|
||||||
|
<option value="restore_database">Restore Database</option>
|
||||||
|
<option value="export_logs">Export Logs</option>
|
||||||
|
<option value="clear_logs">Clear Logs</option>
|
||||||
|
<option value="update_permissions">Update Permissions</option>
|
||||||
|
<option value="custom">Custom Command</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="commandParams">Command Parameters (JSON)</label>
|
||||||
|
<textarea
|
||||||
|
id="commandParams"
|
||||||
|
v-model="commandParams"
|
||||||
|
placeholder='{"target": "all", "force": false}'
|
||||||
|
rows="3"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="customCommand">Custom Command</label>
|
||||||
|
<input
|
||||||
|
id="customCommand"
|
||||||
|
v-model="customCommand"
|
||||||
|
type="text"
|
||||||
|
placeholder="custom_admin_command"
|
||||||
|
:disabled="adminCommand !== 'custom'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="confirmationCode">Confirmation Code</label>
|
||||||
|
<input
|
||||||
|
id="confirmationCode"
|
||||||
|
v-model="confirmationCode"
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter confirmation code"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button
|
||||||
|
class="btn btn-danger"
|
||||||
|
:disabled="!isConnected || !confirmationCode.trim()"
|
||||||
|
@click="executeAdminCommand"
|
||||||
|
>
|
||||||
|
Execute Command
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="getServerInfo"
|
||||||
|
>
|
||||||
|
Get Server Info
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="getSystemHealth"
|
||||||
|
>
|
||||||
|
Get System Health
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-warning"
|
||||||
|
@click="clearCommandHistory"
|
||||||
|
>
|
||||||
|
Clear History
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Server Information -->
|
||||||
|
<div class="server-info-section" v-if="serverInfo">
|
||||||
|
<h3>Server Information</h3>
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Server Version</div>
|
||||||
|
<div class="info-value">{{ serverInfo.version }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Environment</div>
|
||||||
|
<div class="info-value">{{ serverInfo.environment }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Node Version</div>
|
||||||
|
<div class="info-value">{{ serverInfo.nodeVersion }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Platform</div>
|
||||||
|
<div class="info-value">{{ serverInfo.platform }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Architecture</div>
|
||||||
|
<div class="info-value">{{ serverInfo.architecture }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">CPU Cores</div>
|
||||||
|
<div class="info-value">{{ serverInfo.cpuCores }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Memory Usage</div>
|
||||||
|
<div class="info-value">{{ formatBytes(serverInfo.memoryUsage) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Uptime</div>
|
||||||
|
<div class="info-value">{{ formatUptime(serverInfo.uptime) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- System Health -->
|
||||||
|
<div class="system-health-section" v-if="systemHealth">
|
||||||
|
<h3>System Health</h3>
|
||||||
|
<div class="health-grid">
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">CPU Usage</div>
|
||||||
|
<div class="health-value">{{ systemHealth.cpuUsage }}%</div>
|
||||||
|
<div class="health-bar">
|
||||||
|
<div
|
||||||
|
class="health-bar-fill"
|
||||||
|
:style="{ width: systemHealth.cpuUsage + '%' }"
|
||||||
|
:class="getCpuUsageClass(systemHealth.cpuUsage)"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Memory Usage</div>
|
||||||
|
<div class="health-value">{{ systemHealth.memoryUsage }}%</div>
|
||||||
|
<div class="health-bar">
|
||||||
|
<div
|
||||||
|
class="health-bar-fill"
|
||||||
|
:style="{ width: systemHealth.memoryUsage + '%' }"
|
||||||
|
:class="getMemoryUsageClass(systemHealth.memoryUsage)"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Disk Usage</div>
|
||||||
|
<div class="health-value">{{ systemHealth.diskUsage }}%</div>
|
||||||
|
<div class="health-bar">
|
||||||
|
<div
|
||||||
|
class="health-bar-fill"
|
||||||
|
:style="{ width: systemHealth.diskUsage + '%' }"
|
||||||
|
:class="getDiskUsageClass(systemHealth.diskUsage)"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Network I/O</div>
|
||||||
|
<div class="health-value">{{ formatBytes(systemHealth.networkRx) }} / {{ formatBytes(systemHealth.networkTx) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Active Connections</div>
|
||||||
|
<div class="health-value">{{ systemHealth.activeConnections }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Error Rate</div>
|
||||||
|
<div class="health-value">{{ systemHealth.errorRate }}%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Command History -->
|
||||||
|
<div class="command-history-section">
|
||||||
|
<h3>Command History</h3>
|
||||||
|
<div class="command-history">
|
||||||
|
<div
|
||||||
|
v-for="(command, index) in commandHistory.slice(0, 10)"
|
||||||
|
:key="index"
|
||||||
|
class="command-item"
|
||||||
|
>
|
||||||
|
<div class="command-header">
|
||||||
|
<div class="command-type">{{ command.command }}</div>
|
||||||
|
<div class="command-time">{{ formatTime(command.timestamp) }}</div>
|
||||||
|
<div class="command-status" :class="command.success ? 'success' : 'error'">
|
||||||
|
{{ command.success ? 'Success' : 'Error' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="command-details">
|
||||||
|
<div v-if="command.params" class="command-params">
|
||||||
|
<strong>Parameters:</strong> {{ command.params }}
|
||||||
|
</div>
|
||||||
|
<div v-if="command.result" class="command-result">
|
||||||
|
<strong>Result:</strong>
|
||||||
|
<pre>{{ JSON.stringify(command.result, null, 2) }}</pre>
|
||||||
|
</div>
|
||||||
|
<div v-if="command.error" class="command-error">
|
||||||
|
<strong>Error:</strong> {{ command.error }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="commandHistory.length === 0" class="no-commands">
|
||||||
|
No commands executed yet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Security Notice -->
|
||||||
|
<div class="security-notice">
|
||||||
|
<h4>⚠️ Security Notice</h4>
|
||||||
|
<p>Admin commands can have serious consequences. Please ensure you have proper authorization and understand the impact of each command before execution.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Server restart will disconnect all clients</li>
|
||||||
|
<li>Database operations are irreversible</li>
|
||||||
|
<li>Always backup before destructive operations</li>
|
||||||
|
<li>Some commands require elevated permissions</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useWebSocket } from '../../composables/useWebSocket'
|
||||||
|
|
||||||
|
const {
|
||||||
|
isConnected,
|
||||||
|
serverInfo,
|
||||||
|
systemHealth,
|
||||||
|
executeAdminCommand: executeAdminCommandFn,
|
||||||
|
getServerInfo,
|
||||||
|
getSystemHealth
|
||||||
|
} = useWebSocket()
|
||||||
|
|
||||||
|
const adminCommand = ref('restart_server')
|
||||||
|
const commandParams = ref('')
|
||||||
|
const customCommand = ref('')
|
||||||
|
const confirmationCode = ref('')
|
||||||
|
const commandHistory = ref<Array<{
|
||||||
|
command: string
|
||||||
|
params: string
|
||||||
|
result: any
|
||||||
|
error: string
|
||||||
|
success: boolean
|
||||||
|
timestamp: number
|
||||||
|
}>>([])
|
||||||
|
|
||||||
|
const executeAdminCommand = async () => {
|
||||||
|
if (!isConnected.value || !confirmationCode.value.trim()) return
|
||||||
|
|
||||||
|
let command = adminCommand.value
|
||||||
|
let params = {}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (adminCommand.value === 'custom') {
|
||||||
|
command = customCommand.value.trim()
|
||||||
|
if (!command) {
|
||||||
|
alert('Please enter a custom command')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (commandParams.value.trim()) {
|
||||||
|
params = JSON.parse(commandParams.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await executeAdminCommandFn(command, {
|
||||||
|
...params,
|
||||||
|
confirmationCode: confirmationCode.value.trim(),
|
||||||
|
timestamp: Date.now()
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add to history
|
||||||
|
commandHistory.value.unshift({
|
||||||
|
command,
|
||||||
|
params: JSON.stringify(params),
|
||||||
|
result: result,
|
||||||
|
error: '',
|
||||||
|
success: true,
|
||||||
|
timestamp: Date.now()
|
||||||
|
})
|
||||||
|
|
||||||
|
// Clear form
|
||||||
|
confirmationCode.value = ''
|
||||||
|
commandParams.value = ''
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
// Add error to history
|
||||||
|
commandHistory.value.unshift({
|
||||||
|
command,
|
||||||
|
params: commandParams.value,
|
||||||
|
result: null,
|
||||||
|
error: error instanceof Error ? error.message : String(error),
|
||||||
|
success: false,
|
||||||
|
timestamp: Date.now()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearCommandHistory = () => {
|
||||||
|
commandHistory.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTime = (timestamp: number) => {
|
||||||
|
return new Date(timestamp).toLocaleString()
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatUptime = (uptime: number) => {
|
||||||
|
const seconds = Math.floor(uptime / 1000)
|
||||||
|
const hours = Math.floor(seconds / 3600)
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60)
|
||||||
|
const secs = seconds % 60
|
||||||
|
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatBytes = (bytes: number) => {
|
||||||
|
if (bytes === 0) return '0 Bytes'
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCpuUsageClass = (usage: number) => {
|
||||||
|
if (usage < 50) return 'usage-low'
|
||||||
|
if (usage < 80) return 'usage-medium'
|
||||||
|
return 'usage-high'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMemoryUsageClass = (usage: number) => {
|
||||||
|
if (usage < 60) return 'usage-low'
|
||||||
|
if (usage < 85) return 'usage-medium'
|
||||||
|
return 'usage-high'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getDiskUsageClass = (usage: number) => {
|
||||||
|
if (usage < 70) return 'usage-low'
|
||||||
|
if (usage < 90) return 'usage-medium'
|
||||||
|
return 'usage-high'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.admin-tab {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input,
|
||||||
|
.input-group select,
|
||||||
|
.input-group textarea {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input:focus,
|
||||||
|
.input-group select:focus,
|
||||||
|
.input-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1976d2;
|
||||||
|
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input:disabled {
|
||||||
|
background: #e9ecef;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: #dc3545;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover:not(:disabled) {
|
||||||
|
background: #c82333;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #6c757d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #5a6268;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning {
|
||||||
|
background: #FFC107;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning:hover {
|
||||||
|
background: #e0a800;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-info-section,
|
||||||
|
.system-health-section {
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-info-section h3,
|
||||||
|
.system-health-section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid,
|
||||||
|
.health-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item,
|
||||||
|
.health-item {
|
||||||
|
background: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label,
|
||||||
|
.health-label {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value,
|
||||||
|
.health-value {
|
||||||
|
color: #333;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background: #e9ecef;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usage-low {
|
||||||
|
background: #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usage-medium {
|
||||||
|
background: #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usage-high {
|
||||||
|
background: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-history-section {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-history-section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-history {
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-item {
|
||||||
|
margin: 16px 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-type {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1976d2;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-time {
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-status {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-status.success {
|
||||||
|
background: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-status.error {
|
||||||
|
background: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-details {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-params,
|
||||||
|
.command-result,
|
||||||
|
.command-error {
|
||||||
|
margin: 12px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-params strong,
|
||||||
|
.command-result strong,
|
||||||
|
.command-error strong {
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-result pre {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-error {
|
||||||
|
color: #dc3545;
|
||||||
|
background: #f8d7da;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-commands {
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-style: italic;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-notice {
|
||||||
|
margin-top: 32px;
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff3cd;
|
||||||
|
border: 1px solid #ffeaa7;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 4px solid #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-notice h4 {
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
color: #856404;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-notice p {
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
color: #856404;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-notice ul {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 20px;
|
||||||
|
color: #856404;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-notice li {
|
||||||
|
margin: 4px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.controls {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid,
|
||||||
|
.health-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
403
examples/clientsocket/components/tabs/ConnectionTab.vue
Normal file
403
examples/clientsocket/components/tabs/ConnectionTab.vue
Normal file
@@ -0,0 +1,403 @@
|
|||||||
|
<template>
|
||||||
|
<div class="connection-tab">
|
||||||
|
<div class="controls">
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="wsUrl">WebSocket URL</label>
|
||||||
|
<input
|
||||||
|
id="wsUrl"
|
||||||
|
v-model="config.wsUrl"
|
||||||
|
type="text"
|
||||||
|
placeholder="ws://localhost:8080/api/v1/ws"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="userId">User ID</label>
|
||||||
|
<input
|
||||||
|
id="userId"
|
||||||
|
v-model="config.userId"
|
||||||
|
type="text"
|
||||||
|
placeholder="anonymous"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="room">Room</label>
|
||||||
|
<input
|
||||||
|
id="room"
|
||||||
|
v-model="config.room"
|
||||||
|
type="text"
|
||||||
|
placeholder="default"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="staticId">Static ID (Optional)</label>
|
||||||
|
<input
|
||||||
|
id="staticId"
|
||||||
|
v-model="config.staticId"
|
||||||
|
type="text"
|
||||||
|
placeholder="Leave empty for dynamic ID"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="checkbox-group">
|
||||||
|
<input
|
||||||
|
v-model="config.useIPBasedId"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
Use IP-based ID
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="checkbox-group">
|
||||||
|
<input
|
||||||
|
v-model="config.autoReconnect"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
Auto Reconnect
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="checkbox-group">
|
||||||
|
<input
|
||||||
|
v-model="config.heartbeatEnabled"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
Enable Heartbeat
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
:class="{ 'btn-disabled': isConnecting }"
|
||||||
|
:disabled="isConnecting"
|
||||||
|
@click="connect"
|
||||||
|
>
|
||||||
|
<span v-if="isConnecting" class="loading-indicator"></span>
|
||||||
|
{{ isConnected ? 'Reconnect' : 'Connect' }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-danger"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="disconnect"
|
||||||
|
>
|
||||||
|
Disconnect
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-info"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="testConnection"
|
||||||
|
>
|
||||||
|
Test Connection
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
@click="clearMessages"
|
||||||
|
>
|
||||||
|
Clear Messages
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="maxReconnectAttempts">Max Reconnect Attempts</label>
|
||||||
|
<input
|
||||||
|
id="maxReconnectAttempts"
|
||||||
|
v-model.number="config.maxReconnectAttempts"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="50"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="reconnectDelay">Reconnect Delay (ms)</label>
|
||||||
|
<input
|
||||||
|
id="reconnectDelay"
|
||||||
|
v-model.number="config.reconnectDelay"
|
||||||
|
type="number"
|
||||||
|
min="100"
|
||||||
|
max="10000"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="heartbeatInterval">Heartbeat Interval (ms)</label>
|
||||||
|
<input
|
||||||
|
id="heartbeatInterval"
|
||||||
|
v-model.number="config.heartbeatInterval"
|
||||||
|
type="number"
|
||||||
|
min="1000"
|
||||||
|
max="60000"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="maxMessages">Max Messages</label>
|
||||||
|
<input
|
||||||
|
id="maxMessages"
|
||||||
|
v-model.number="config.maxMessages"
|
||||||
|
type="number"
|
||||||
|
min="100"
|
||||||
|
max="5000"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="connection-info" v-if="isConnected">
|
||||||
|
<h3>Connection Information</h3>
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Client ID:</strong>
|
||||||
|
<span>{{ connectionState.clientId }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Static ID:</strong>
|
||||||
|
<span>{{ connectionState.staticId || 'N/A' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>IP Address:</strong>
|
||||||
|
<span>{{ connectionState.ipAddress || 'N/A' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>User ID:</strong>
|
||||||
|
<span>{{ connectionState.userId }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Room:</strong>
|
||||||
|
<span>{{ connectionState.currentRoom }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Connected At:</strong>
|
||||||
|
<span>{{ new Date(connectionState.connectionStartTime || 0).toLocaleString() }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Latency:</strong>
|
||||||
|
<span>{{ connectionState.connectionLatency }}ms</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Reconnect Attempts:</strong>
|
||||||
|
<span>{{ connectionState.reconnectAttempts }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { useWebSocket } from '../../composables/useWebSocket'
|
||||||
|
|
||||||
|
const {
|
||||||
|
isConnected,
|
||||||
|
isConnecting,
|
||||||
|
connectionState,
|
||||||
|
config,
|
||||||
|
connect,
|
||||||
|
disconnect,
|
||||||
|
testConnection,
|
||||||
|
clearMessages
|
||||||
|
} = useWebSocket()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.connection-tab {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1976d2;
|
||||||
|
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group input[type="checkbox"] {
|
||||||
|
margin: 0;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #1976d2;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(.btn-disabled) {
|
||||||
|
background: #1565c0;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: #dc3545;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover:not(:disabled) {
|
||||||
|
background: #c82333;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info {
|
||||||
|
background: #17a2b8;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info:hover:not(:disabled) {
|
||||||
|
background: #138496;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #6c757d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #5a6268;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 2px solid #f3f3f3;
|
||||||
|
border-top: 2px solid #1976d2;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-info {
|
||||||
|
margin-top: 32px;
|
||||||
|
padding: 24px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-info h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item strong {
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item span {
|
||||||
|
color: #666;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.controls {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
528
examples/clientsocket/components/tabs/DatabaseTab.vue
Normal file
528
examples/clientsocket/components/tabs/DatabaseTab.vue
Normal file
@@ -0,0 +1,528 @@
|
|||||||
|
<template>
|
||||||
|
<div class="database-tab">
|
||||||
|
<div class="controls">
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="queryType">Query Type</label>
|
||||||
|
<select id="queryType" v-model="queryType">
|
||||||
|
<option value="select">SELECT</option>
|
||||||
|
<option value="insert">INSERT</option>
|
||||||
|
<option value="update">UPDATE</option>
|
||||||
|
<option value="delete">DELETE</option>
|
||||||
|
<option value="create_table">CREATE TABLE</option>
|
||||||
|
<option value="drop_table">DROP TABLE</option>
|
||||||
|
<option value="show_tables">SHOW TABLES</option>
|
||||||
|
<option value="describe_table">DESCRIBE TABLE</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="tableName">Table Name</label>
|
||||||
|
<input
|
||||||
|
id="tableName"
|
||||||
|
v-model="tableName"
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter table name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="queryParams">Query Parameters (JSON)</label>
|
||||||
|
<textarea
|
||||||
|
id="queryParams"
|
||||||
|
v-model="queryParams"
|
||||||
|
placeholder='{"column": "value", "column2": "value2"}'
|
||||||
|
rows="3"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="customQuery">Custom SQL Query</label>
|
||||||
|
<textarea
|
||||||
|
id="customQuery"
|
||||||
|
v-model="customQuery"
|
||||||
|
placeholder="Enter custom SQL query"
|
||||||
|
rows="4"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
:disabled="!isConnected || (!tableName.trim() && !customQuery.trim())"
|
||||||
|
@click="executeQuery"
|
||||||
|
>
|
||||||
|
Execute Query
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="getStats"
|
||||||
|
>
|
||||||
|
Get Database Stats
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="getMonitoringData"
|
||||||
|
>
|
||||||
|
Get Monitoring Data
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
@click="clearQueryHistory"
|
||||||
|
>
|
||||||
|
Clear Query History
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Query History -->
|
||||||
|
<div class="query-history-section">
|
||||||
|
<h3>Query History</h3>
|
||||||
|
<div class="query-history">
|
||||||
|
<div
|
||||||
|
v-for="(query, index) in queryHistory.slice(0, 10)"
|
||||||
|
:key="index"
|
||||||
|
class="query-item"
|
||||||
|
>
|
||||||
|
<div class="query-header">
|
||||||
|
<div class="query-type">{{ query.type }}</div>
|
||||||
|
<div class="query-time">{{ formatTime(query.timestamp) }}</div>
|
||||||
|
<div class="query-status" :class="query.success ? 'success' : 'error'">
|
||||||
|
{{ query.success ? 'Success' : 'Error' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="query-details">
|
||||||
|
<div class="query-sql">{{ query.sql }}</div>
|
||||||
|
<div v-if="query.params" class="query-params">
|
||||||
|
<strong>Parameters:</strong> {{ query.params }}
|
||||||
|
</div>
|
||||||
|
<div v-if="query.result" class="query-result">
|
||||||
|
<strong>Result:</strong>
|
||||||
|
<pre>{{ JSON.stringify(query.result, null, 2) }}</pre>
|
||||||
|
</div>
|
||||||
|
<div v-if="query.error" class="query-error">
|
||||||
|
<strong>Error:</strong> {{ query.error }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="queryHistory.length === 0" class="no-queries">
|
||||||
|
No queries executed yet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Database Stats -->
|
||||||
|
<div class="database-stats-section" v-if="stats">
|
||||||
|
<h3>Database Statistics</h3>
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Connected Clients</div>
|
||||||
|
<div class="stat-value">{{ stats.connected_clients }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Unique IPs</div>
|
||||||
|
<div class="stat-value">{{ stats.unique_ips }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Static Clients</div>
|
||||||
|
<div class="stat-value">{{ stats.static_clients }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Active Rooms</div>
|
||||||
|
<div class="stat-value">{{ stats.active_rooms }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Message Queue Size</div>
|
||||||
|
<div class="stat-value">{{ stats.message_queue_size }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Queue Workers</div>
|
||||||
|
<div class="stat-value">{{ stats.queue_workers }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Uptime</div>
|
||||||
|
<div class="stat-value">{{ formatUptime(stats.uptime) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Last Updated</div>
|
||||||
|
<div class="stat-value">{{ formatTime(stats.timestamp) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useWebSocket } from '../../composables/useWebSocket'
|
||||||
|
|
||||||
|
const {
|
||||||
|
isConnected,
|
||||||
|
stats,
|
||||||
|
executeDatabaseQuery,
|
||||||
|
getStats,
|
||||||
|
getMonitoringData
|
||||||
|
} = useWebSocket()
|
||||||
|
|
||||||
|
const queryType = ref('select')
|
||||||
|
const tableName = ref('')
|
||||||
|
const queryParams = ref('')
|
||||||
|
const customQuery = ref('')
|
||||||
|
const queryHistory = ref<Array<{
|
||||||
|
type: string
|
||||||
|
sql: string
|
||||||
|
params: string
|
||||||
|
result: any
|
||||||
|
error: string
|
||||||
|
success: boolean
|
||||||
|
timestamp: number
|
||||||
|
}>>([])
|
||||||
|
|
||||||
|
const executeQuery = async () => {
|
||||||
|
if (!isConnected.value) return
|
||||||
|
|
||||||
|
let sql = ''
|
||||||
|
let params = {}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (customQuery.value.trim()) {
|
||||||
|
sql = customQuery.value.trim()
|
||||||
|
params = queryParams.value ? JSON.parse(queryParams.value) : {}
|
||||||
|
} else {
|
||||||
|
switch (queryType.value) {
|
||||||
|
case 'select':
|
||||||
|
sql = `SELECT * FROM ${tableName.value}`
|
||||||
|
break
|
||||||
|
case 'insert':
|
||||||
|
params = JSON.parse(queryParams.value || '{}')
|
||||||
|
sql = `INSERT INTO ${tableName.value} SET ?`
|
||||||
|
break
|
||||||
|
case 'update':
|
||||||
|
params = JSON.parse(queryParams.value || '{}')
|
||||||
|
sql = `UPDATE ${tableName.value} SET ? WHERE id = ?`
|
||||||
|
break
|
||||||
|
case 'delete':
|
||||||
|
sql = `DELETE FROM ${tableName.value} WHERE id = ?`
|
||||||
|
break
|
||||||
|
case 'create_table':
|
||||||
|
sql = `CREATE TABLE IF NOT EXISTS ${tableName.value} (id INT AUTO_INCREMENT PRIMARY KEY, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)`
|
||||||
|
break
|
||||||
|
case 'drop_table':
|
||||||
|
sql = `DROP TABLE IF EXISTS ${tableName.value}`
|
||||||
|
break
|
||||||
|
case 'show_tables':
|
||||||
|
sql = 'SHOW TABLES'
|
||||||
|
break
|
||||||
|
case 'describe_table':
|
||||||
|
sql = `DESCRIBE ${tableName.value}`
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await executeDatabaseQuery(queryType.value, {
|
||||||
|
sql,
|
||||||
|
params,
|
||||||
|
table: tableName.value
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add to history
|
||||||
|
queryHistory.value.unshift({
|
||||||
|
type: queryType.value,
|
||||||
|
sql,
|
||||||
|
params: JSON.stringify(params),
|
||||||
|
result: result,
|
||||||
|
error: '',
|
||||||
|
success: true,
|
||||||
|
timestamp: Date.now()
|
||||||
|
})
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
// Add error to history
|
||||||
|
queryHistory.value.unshift({
|
||||||
|
type: queryType.value,
|
||||||
|
sql: customQuery.value || sql,
|
||||||
|
params: queryParams.value,
|
||||||
|
result: null,
|
||||||
|
error: error instanceof Error ? error.message : String(error),
|
||||||
|
success: false,
|
||||||
|
timestamp: Date.now()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearQueryHistory = () => {
|
||||||
|
queryHistory.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTime = (timestamp: number) => {
|
||||||
|
return new Date(timestamp).toLocaleString()
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatUptime = (uptime: number) => {
|
||||||
|
const seconds = Math.floor(uptime / 1000)
|
||||||
|
const hours = Math.floor(seconds / 3600)
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60)
|
||||||
|
const secs = seconds % 60
|
||||||
|
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.database-tab {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input,
|
||||||
|
.input-group select,
|
||||||
|
.input-group textarea {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input:focus,
|
||||||
|
.input-group select:focus,
|
||||||
|
.input-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1976d2;
|
||||||
|
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #1976d2;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: #1565c0;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #6c757d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #5a6268;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-history-section {
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-history-section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-history {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-item {
|
||||||
|
margin: 16px 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-type {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1976d2;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-time {
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-status {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-status.success {
|
||||||
|
background: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-status.error {
|
||||||
|
background: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-details {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-sql {
|
||||||
|
font-family: monospace;
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-params,
|
||||||
|
.query-result,
|
||||||
|
.query-error {
|
||||||
|
margin: 12px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-params strong,
|
||||||
|
.query-result strong,
|
||||||
|
.query-error strong {
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-result pre {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-error {
|
||||||
|
color: #dc3545;
|
||||||
|
background: #f8d7da;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-queries {
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-style: italic;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.database-stats-section {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.database-stats-section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
background: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
color: #333;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.controls {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
470
examples/clientsocket/components/tabs/MessagingTab.vue
Normal file
470
examples/clientsocket/components/tabs/MessagingTab.vue
Normal file
@@ -0,0 +1,470 @@
|
|||||||
|
<template>
|
||||||
|
<div class="messaging-tab">
|
||||||
|
<div class="controls">
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="broadcastMessage">Broadcast Message</label>
|
||||||
|
<textarea
|
||||||
|
id="broadcastMessage"
|
||||||
|
v-model="broadcastMessage"
|
||||||
|
placeholder="Enter message to broadcast to all clients"
|
||||||
|
rows="3"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="targetClientId">Target Client ID (for direct messages)</label>
|
||||||
|
<input
|
||||||
|
id="targetClientId"
|
||||||
|
v-model="targetClientId"
|
||||||
|
type="text"
|
||||||
|
placeholder="Client ID for direct message"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="roomMessage">Room Message</label>
|
||||||
|
<textarea
|
||||||
|
id="roomMessage"
|
||||||
|
v-model="roomMessage"
|
||||||
|
placeholder="Enter message to send to specific room"
|
||||||
|
rows="3"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="targetRoom">Target Room</label>
|
||||||
|
<input
|
||||||
|
id="targetRoom"
|
||||||
|
v-model="targetRoom"
|
||||||
|
type="text"
|
||||||
|
placeholder="Room name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
:disabled="!isConnected || !broadcastMessage.trim()"
|
||||||
|
@click="sendBroadcast"
|
||||||
|
>
|
||||||
|
Send Broadcast
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-info"
|
||||||
|
:disabled="!isConnected || !targetClientId.trim() || !broadcastMessage.trim()"
|
||||||
|
@click="sendDirectMessage"
|
||||||
|
>
|
||||||
|
Send Direct Message
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-success"
|
||||||
|
:disabled="!isConnected || !targetRoom.trim() || !roomMessage.trim()"
|
||||||
|
@click="sendRoomMessage"
|
||||||
|
>
|
||||||
|
Send Room Message
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-warning"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="sendHeartbeat"
|
||||||
|
>
|
||||||
|
Send Heartbeat
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="getOnlineUsers"
|
||||||
|
>
|
||||||
|
Get Online Users
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="getServerInfo"
|
||||||
|
>
|
||||||
|
Get Server Info
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
@click="clearMessages"
|
||||||
|
>
|
||||||
|
Clear Messages
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
@click="clearActivityLog"
|
||||||
|
>
|
||||||
|
Clear Activity Log
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Online Users -->
|
||||||
|
<div class="online-users-section" v-if="onlineUsers.length > 0">
|
||||||
|
<h3>Online Users ({{ onlineUsers.length }})</h3>
|
||||||
|
<div class="online-users">
|
||||||
|
<div
|
||||||
|
v-for="user in onlineUsers"
|
||||||
|
:key="user.client_id"
|
||||||
|
class="user-item"
|
||||||
|
:class="{ 'current-user': user.client_id === connectionState.clientId }"
|
||||||
|
>
|
||||||
|
<div class="user-info">
|
||||||
|
<div class="user-id">{{ user.client_id }}</div>
|
||||||
|
<div class="user-details">
|
||||||
|
<span>Room: {{ user.room }}</span>
|
||||||
|
<span>IP: {{ user.ip_address }}</span>
|
||||||
|
<span>Connected: {{ formatTime(user.connected_at) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-actions">
|
||||||
|
<button
|
||||||
|
class="btn btn-sm btn-info"
|
||||||
|
@click="setTargetClient(user.client_id)"
|
||||||
|
>
|
||||||
|
Direct Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Activity Log -->
|
||||||
|
<div class="activity-log-section">
|
||||||
|
<h3>Activity Log</h3>
|
||||||
|
<div class="activity-log">
|
||||||
|
<div
|
||||||
|
v-for="(activity, index) in activityLog.slice(0, 20)"
|
||||||
|
:key="index"
|
||||||
|
class="activity-item"
|
||||||
|
>
|
||||||
|
<div class="activity-time">{{ formatTime(activity.timestamp) }}</div>
|
||||||
|
<div class="activity-event">{{ activity.event }}</div>
|
||||||
|
<div class="activity-details">{{ activity.details }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="activityLog.length === 0" class="no-activity">
|
||||||
|
No activity logged yet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useWebSocket } from '../../composables/useWebSocket'
|
||||||
|
|
||||||
|
const {
|
||||||
|
isConnected,
|
||||||
|
connectionState,
|
||||||
|
onlineUsers,
|
||||||
|
activityLog,
|
||||||
|
broadcastMessage: broadcastMessageFn,
|
||||||
|
sendDirectMessage: sendDirectMessageFn,
|
||||||
|
sendRoomMessage: sendRoomMessageFn,
|
||||||
|
sendHeartbeat,
|
||||||
|
getOnlineUsers,
|
||||||
|
getServerInfo,
|
||||||
|
clearMessages,
|
||||||
|
clearActivityLog
|
||||||
|
} = useWebSocket()
|
||||||
|
|
||||||
|
const broadcastMessage = ref('')
|
||||||
|
const targetClientId = ref('')
|
||||||
|
const roomMessage = ref('')
|
||||||
|
const targetRoom = ref('')
|
||||||
|
|
||||||
|
const sendBroadcast = () => {
|
||||||
|
if (broadcastMessage.value.trim()) {
|
||||||
|
broadcastMessageFn(broadcastMessage.value.trim())
|
||||||
|
broadcastMessage.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendDirectMessage = () => {
|
||||||
|
if (targetClientId.value.trim() && broadcastMessage.value.trim()) {
|
||||||
|
sendDirectMessageFn(targetClientId.value.trim(), broadcastMessage.value.trim())
|
||||||
|
broadcastMessage.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendRoomMessage = () => {
|
||||||
|
if (targetRoom.value.trim() && roomMessage.value.trim()) {
|
||||||
|
sendRoomMessageFn(targetRoom.value.trim(), roomMessage.value.trim())
|
||||||
|
roomMessage.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const setTargetClient = (clientId: string) => {
|
||||||
|
targetClientId.value = clientId
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTime = (timestamp: number) => {
|
||||||
|
return new Date(timestamp).toLocaleString()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.messaging-tab {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input,
|
||||||
|
.input-group textarea {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input:focus,
|
||||||
|
.input-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1976d2;
|
||||||
|
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #1976d2;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: #1565c0;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info {
|
||||||
|
background: #17a2b8;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info:hover:not(:disabled) {
|
||||||
|
background: #138496;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background: #28a745;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success:hover:not(:disabled) {
|
||||||
|
background: #218838;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning {
|
||||||
|
background: #FFC107;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning:hover:not(:disabled) {
|
||||||
|
background: #e0a800;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #6c757d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #5a6268;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-users-section {
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-users-section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-users {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin: 8px 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item.current-user {
|
||||||
|
border-left: 4px solid #1976d2;
|
||||||
|
background: #f0f8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-id {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-details {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-log-section {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-log-section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-log {
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 150px 120px 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin: 8px 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-time {
|
||||||
|
color: #666;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-event {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-details {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-activity {
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-style: italic;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.controls {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-actions {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
609
examples/clientsocket/components/tabs/MonitoringTab.vue
Normal file
609
examples/clientsocket/components/tabs/MonitoringTab.vue
Normal file
@@ -0,0 +1,609 @@
|
|||||||
|
<template>
|
||||||
|
<div class="monitoring-tab">
|
||||||
|
<div class="controls">
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="notificationChannel">Notification Channel</label>
|
||||||
|
<input
|
||||||
|
id="notificationChannel"
|
||||||
|
v-model="notificationChannel"
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter notification channel"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="notificationPayload">Notification Payload (JSON)</label>
|
||||||
|
<textarea
|
||||||
|
id="notificationPayload"
|
||||||
|
v-model="notificationPayload"
|
||||||
|
placeholder='{"message": "Hello", "type": "info"}'
|
||||||
|
rows="3"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="triggerEvent">Trigger Event</label>
|
||||||
|
<select id="triggerEvent" v-model="triggerEvent">
|
||||||
|
<option value="user_joined">User Joined</option>
|
||||||
|
<option value="user_left">User Left</option>
|
||||||
|
<option value="message_sent">Message Sent</option>
|
||||||
|
<option value="connection_lost">Connection Lost</option>
|
||||||
|
<option value="server_restart">Server Restart</option>
|
||||||
|
<option value="custom">Custom Event</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="customEvent">Custom Event Name</label>
|
||||||
|
<input
|
||||||
|
id="customEvent"
|
||||||
|
v-model="customEvent"
|
||||||
|
type="text"
|
||||||
|
placeholder="custom_event_name"
|
||||||
|
:disabled="triggerEvent !== 'custom'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
:disabled="!isConnected || !notificationChannel.trim() || !notificationPayload.trim()"
|
||||||
|
@click="triggerNotification"
|
||||||
|
>
|
||||||
|
Trigger Notification
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-info"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="getStats"
|
||||||
|
>
|
||||||
|
Refresh Stats
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
:disabled="!isConnected"
|
||||||
|
@click="getMonitoringData"
|
||||||
|
>
|
||||||
|
Get Monitoring Data
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-warning"
|
||||||
|
@click="clearMonitoringData"
|
||||||
|
>
|
||||||
|
Clear Data
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Connection Health -->
|
||||||
|
<div class="health-section">
|
||||||
|
<h3>Connection Health</h3>
|
||||||
|
<div class="health-grid">
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Status</div>
|
||||||
|
<div class="health-value" :class="connectionHealthClass">
|
||||||
|
{{ connectionHealthText }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Latency</div>
|
||||||
|
<div class="health-value">{{ connectionState.connectionLatency }}ms</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Messages Sent</div>
|
||||||
|
<div class="health-value">{{ connectionState.messagesSent }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Messages Received</div>
|
||||||
|
<div class="health-value">{{ connectionState.messagesReceived }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Reconnect Attempts</div>
|
||||||
|
<div class="health-value">{{ connectionState.reconnectAttempts }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="health-item">
|
||||||
|
<div class="health-label">Connection Time</div>
|
||||||
|
<div class="health-value">{{ connectionState.uptime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Server Statistics -->
|
||||||
|
<div class="stats-section" v-if="stats">
|
||||||
|
<h3>Server Statistics</h3>
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Connected Clients</div>
|
||||||
|
<div class="stat-value">{{ stats.connected_clients }}</div>
|
||||||
|
<div class="stat-change" :class="getStatChangeClass('connected_clients')">
|
||||||
|
{{ getStatChange('connected_clients') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Unique IPs</div>
|
||||||
|
<div class="stat-value">{{ stats.unique_ips }}</div>
|
||||||
|
<div class="stat-change" :class="getStatChangeClass('unique_ips')">
|
||||||
|
{{ getStatChange('unique_ips') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Static Clients</div>
|
||||||
|
<div class="stat-value">{{ stats.static_clients }}</div>
|
||||||
|
<div class="stat-change" :class="getStatChangeClass('static_clients')">
|
||||||
|
{{ getStatChange('static_clients') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Active Rooms</div>
|
||||||
|
<div class="stat-value">{{ stats.active_rooms }}</div>
|
||||||
|
<div class="stat-change" :class="getStatChangeClass('active_rooms')">
|
||||||
|
{{ getStatChange('active_rooms') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Message Queue</div>
|
||||||
|
<div class="stat-value">{{ stats.message_queue_size }}</div>
|
||||||
|
<div class="stat-change" :class="getStatChangeClass('message_queue_size')">
|
||||||
|
{{ getStatChange('message_queue_size') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Queue Workers</div>
|
||||||
|
<div class="stat-value">{{ stats.queue_workers }}</div>
|
||||||
|
<div class="stat-change" :class="getStatChangeClass('queue_workers')">
|
||||||
|
{{ getStatChange('queue_workers') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Server Uptime</div>
|
||||||
|
<div class="stat-value">{{ formatUptime(stats.uptime) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">Last Updated</div>
|
||||||
|
<div class="stat-value">{{ formatTime(stats.timestamp) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Monitoring Data -->
|
||||||
|
<div class="monitoring-data-section" v-if="monitoringData">
|
||||||
|
<h3>Monitoring Data</h3>
|
||||||
|
<div class="monitoring-content">
|
||||||
|
<pre>{{ JSON.stringify(monitoringData, null, 2) }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notification History -->
|
||||||
|
<div class="notification-history-section">
|
||||||
|
<h3>Notification History</h3>
|
||||||
|
<div class="notification-history">
|
||||||
|
<div
|
||||||
|
v-for="(notification, index) in notificationHistory.slice(0, 10)"
|
||||||
|
:key="index"
|
||||||
|
class="notification-item"
|
||||||
|
>
|
||||||
|
<div class="notification-header">
|
||||||
|
<div class="notification-channel">{{ notification.channel }}</div>
|
||||||
|
<div class="notification-time">{{ formatTime(notification.timestamp) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="notification-payload">
|
||||||
|
<pre>{{ JSON.stringify(notification.payload, null, 2) }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="notificationHistory.length === 0" class="no-notifications">
|
||||||
|
No notifications sent yet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { useWebSocket } from '../../composables/useWebSocket'
|
||||||
|
|
||||||
|
const {
|
||||||
|
isConnected,
|
||||||
|
connectionState,
|
||||||
|
stats,
|
||||||
|
monitoringData,
|
||||||
|
triggerNotification: triggerNotificationFn,
|
||||||
|
getStats,
|
||||||
|
getMonitoringData
|
||||||
|
} = useWebSocket()
|
||||||
|
|
||||||
|
const notificationChannel = ref('')
|
||||||
|
const notificationPayload = ref('')
|
||||||
|
const triggerEvent = ref('user_joined')
|
||||||
|
const customEvent = ref('')
|
||||||
|
const notificationHistory = ref<Array<{
|
||||||
|
channel: string
|
||||||
|
payload: any
|
||||||
|
timestamp: number
|
||||||
|
}>>([])
|
||||||
|
|
||||||
|
const connectionHealthClass = computed(() => {
|
||||||
|
switch (connectionState.connectionHealth) {
|
||||||
|
case 'excellent': return 'health-excellent'
|
||||||
|
case 'good': return 'health-good'
|
||||||
|
case 'warning': return 'health-warning'
|
||||||
|
case 'poor': return 'health-poor'
|
||||||
|
default: return 'health-poor'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const connectionHealthText = computed(() => {
|
||||||
|
switch (connectionState.connectionHealth) {
|
||||||
|
case 'excellent': return 'Excellent'
|
||||||
|
case 'good': return 'Good'
|
||||||
|
case 'warning': return 'Warning'
|
||||||
|
case 'poor': return 'Poor'
|
||||||
|
default: return 'Unknown'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const triggerNotification = () => {
|
||||||
|
if (!notificationChannel.value.trim() || !notificationPayload.value.trim()) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
const payload = JSON.parse(notificationPayload.value)
|
||||||
|
const eventName = triggerEvent.value === 'custom' ? customEvent.value : triggerEvent.value
|
||||||
|
|
||||||
|
triggerNotificationFn(notificationChannel.value.trim(), {
|
||||||
|
...payload,
|
||||||
|
event: eventName,
|
||||||
|
timestamp: Date.now()
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add to history
|
||||||
|
notificationHistory.value.unshift({
|
||||||
|
channel: notificationChannel.value.trim(),
|
||||||
|
payload,
|
||||||
|
timestamp: Date.now()
|
||||||
|
})
|
||||||
|
|
||||||
|
// Clear form
|
||||||
|
notificationChannel.value = ''
|
||||||
|
notificationPayload.value = ''
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
alert('Invalid JSON payload: ' + (error instanceof Error ? error.message : String(error)))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearMonitoringData = () => {
|
||||||
|
notificationHistory.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTime = (timestamp: number) => {
|
||||||
|
return new Date(timestamp).toLocaleString()
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatUptime = (uptime: number) => {
|
||||||
|
const seconds = Math.floor(uptime / 1000)
|
||||||
|
const hours = Math.floor(seconds / 3600)
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60)
|
||||||
|
const secs = seconds % 60
|
||||||
|
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock stat changes for demonstration
|
||||||
|
const previousStats = ref<any>(null)
|
||||||
|
|
||||||
|
const getStatChange = (statName: string) => {
|
||||||
|
if (!previousStats.value || !stats.value) return ''
|
||||||
|
|
||||||
|
const current = stats.value[statName as keyof typeof stats.value]
|
||||||
|
const previous = previousStats.value[statName as keyof typeof previousStats.value]
|
||||||
|
|
||||||
|
if (current > previous) return `+${current - previous}`
|
||||||
|
if (current < previous) return `-${previous - current}`
|
||||||
|
return '0'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatChangeClass = (statName: string) => {
|
||||||
|
if (!previousStats.value || !stats.value) return ''
|
||||||
|
|
||||||
|
const current = stats.value[statName as keyof typeof stats.value]
|
||||||
|
const previous = previousStats.value[statName as keyof typeof previousStats.value]
|
||||||
|
|
||||||
|
if (current > previous) return 'stat-increase'
|
||||||
|
if (current < previous) return 'stat-decrease'
|
||||||
|
return 'stat-unchanged'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update previous stats when new stats arrive
|
||||||
|
const updatePreviousStats = () => {
|
||||||
|
if (stats.value) {
|
||||||
|
previousStats.value = { ...stats.value }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Watch for stats changes
|
||||||
|
import { watch } from 'vue'
|
||||||
|
watch(stats, updatePreviousStats, { deep: true })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.monitoring-tab {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input,
|
||||||
|
.input-group select,
|
||||||
|
.input-group textarea {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #e9ecef;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input:focus,
|
||||||
|
.input-group select:focus,
|
||||||
|
.input-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1976d2;
|
||||||
|
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input:disabled {
|
||||||
|
background: #e9ecef;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #1976d2;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: #1565c0;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info {
|
||||||
|
background: #17a2b8;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info:hover:not(:disabled) {
|
||||||
|
background: #138496;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #6c757d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #5a6268;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning {
|
||||||
|
background: #FFC107;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning:hover {
|
||||||
|
background: #e0a800;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-section,
|
||||||
|
.stats-section {
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-section h3,
|
||||||
|
.stats-section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-grid,
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-item,
|
||||||
|
.stat-item {
|
||||||
|
background: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-label,
|
||||||
|
.stat-label {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-value {
|
||||||
|
color: #333;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
color: #333;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-change {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-increase {
|
||||||
|
color: #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-decrease {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-unchanged {
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitoring-data-section {
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitoring-data-section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitoring-content {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitoring-content pre {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-history-section {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-history-section h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-history {
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-item {
|
||||||
|
margin: 16px 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-channel {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1976d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-time {
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-payload {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-payload pre {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-notifications {
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-style: italic;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.controls {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-grid,
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
318
examples/clientsocket/composables/useWebSocket.ts
Normal file
318
examples/clientsocket/composables/useWebSocket.ts
Normal file
@@ -0,0 +1,318 @@
|
|||||||
|
import { ref, computed, reactive, nextTick } from 'vue'
|
||||||
|
import type {
|
||||||
|
WebSocketMessage,
|
||||||
|
ConnectionState,
|
||||||
|
WebSocketConfig,
|
||||||
|
MessageHistory,
|
||||||
|
ConnectionStats,
|
||||||
|
MonitoringData,
|
||||||
|
ClientInfo,
|
||||||
|
OnlineUser,
|
||||||
|
ActivityLog
|
||||||
|
} from '../types/websocket'
|
||||||
|
|
||||||
|
export const useWebSocket = () => {
|
||||||
|
// Check if we're in browser environment
|
||||||
|
const isBrowser = process.client
|
||||||
|
|
||||||
|
const ws = ref<WebSocket | null>(null)
|
||||||
|
const isConnected = ref(false)
|
||||||
|
const isConnecting = ref(false)
|
||||||
|
const connectionStatus = ref<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected')
|
||||||
|
|
||||||
|
const connectionState = reactive<ConnectionState>({
|
||||||
|
isConnected: false,
|
||||||
|
isConnecting: false,
|
||||||
|
connectionStatus: 'disconnected',
|
||||||
|
clientId: null,
|
||||||
|
staticId: null,
|
||||||
|
currentRoom: null,
|
||||||
|
userId: 'anonymous',
|
||||||
|
ipAddress: null,
|
||||||
|
connectionStartTime: null,
|
||||||
|
lastPingTime: null,
|
||||||
|
connectionLatency: 0,
|
||||||
|
connectionHealth: 'poor',
|
||||||
|
reconnectAttempts: 0,
|
||||||
|
messagesReceived: 0,
|
||||||
|
messagesSent: 0,
|
||||||
|
uptime: '00:00:00'
|
||||||
|
})
|
||||||
|
|
||||||
|
const config = reactive<WebSocketConfig>({
|
||||||
|
wsUrl: 'ws://localhost:8080/api/v1/ws',
|
||||||
|
userId: 'anonymous',
|
||||||
|
room: 'default',
|
||||||
|
staticId: '',
|
||||||
|
useIPBasedId: false,
|
||||||
|
autoReconnect: true,
|
||||||
|
heartbeatEnabled: true,
|
||||||
|
maxReconnectAttempts: 10,
|
||||||
|
reconnectDelay: 1000,
|
||||||
|
maxReconnectDelay: 30000,
|
||||||
|
heartbeatInterval: 30000,
|
||||||
|
heartbeatTimeout: 5000,
|
||||||
|
maxMissedHeartbeats: 3,
|
||||||
|
maxMessages: 1000,
|
||||||
|
messageWarningThreshold: 800,
|
||||||
|
actionThrottle: 100
|
||||||
|
})
|
||||||
|
|
||||||
|
const messages = ref<MessageHistory[]>([])
|
||||||
|
const stats = ref<ConnectionStats | null>(null)
|
||||||
|
const monitoringData = ref<MonitoringData | null>(null)
|
||||||
|
const onlineUsers = ref<OnlineUser[]>([])
|
||||||
|
const activityLog = ref<ActivityLog[]>([])
|
||||||
|
|
||||||
|
let reconnectTimeout: number | null = null
|
||||||
|
let heartbeatInterval: number | null = null
|
||||||
|
let heartbeatTimeout: number | null = null
|
||||||
|
let missedHeartbeats = 0
|
||||||
|
let lastHeartbeatTime = 0
|
||||||
|
let messageCount = 0
|
||||||
|
|
||||||
|
// Only run WebSocket logic in browser
|
||||||
|
if (isBrowser) {
|
||||||
|
// WebSocket connection logic here
|
||||||
|
}
|
||||||
|
|
||||||
|
const addMessage = (type: string, data: any, messageId?: string) => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
|
||||||
|
const message: MessageHistory = {
|
||||||
|
timestamp: new Date(),
|
||||||
|
type,
|
||||||
|
data,
|
||||||
|
messageId,
|
||||||
|
size: JSON.stringify(data).length
|
||||||
|
}
|
||||||
|
|
||||||
|
messages.value.unshift(message)
|
||||||
|
messageCount++
|
||||||
|
|
||||||
|
// Keep only the last maxMessages
|
||||||
|
if (messages.value.length > config.maxMessages) {
|
||||||
|
messages.value = messages.value.slice(0, config.maxMessages)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update connection state
|
||||||
|
connectionState.messagesReceived++
|
||||||
|
}
|
||||||
|
|
||||||
|
const connectionHealthColor = computed(() => {
|
||||||
|
switch (connectionState.connectionHealth) {
|
||||||
|
case 'excellent': return '#4CAF50'
|
||||||
|
case 'good': return '#2196F3'
|
||||||
|
case 'warning': return '#FFC107'
|
||||||
|
case 'poor': return '#F44336'
|
||||||
|
default: return '#9E9E9E'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const connectionHealthText = computed(() => {
|
||||||
|
switch (connectionState.connectionHealth) {
|
||||||
|
case 'excellent': return 'Excellent'
|
||||||
|
case 'good': return 'Good'
|
||||||
|
case 'warning': return 'Warning'
|
||||||
|
case 'poor': return 'Poor'
|
||||||
|
default: return 'Unknown'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Admin functionality
|
||||||
|
const serverInfo = ref<any>(null)
|
||||||
|
const systemHealth = ref<any>(null)
|
||||||
|
|
||||||
|
const executeAdminCommand = async (command: string, params: any) => {
|
||||||
|
if (!isBrowser || !ws.value) throw new Error('Not connected')
|
||||||
|
|
||||||
|
const message = {
|
||||||
|
type: 'admin_command',
|
||||||
|
command,
|
||||||
|
params,
|
||||||
|
timestamp: Date.now()
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.value.send(JSON.stringify(message))
|
||||||
|
return { success: true, message: 'Command sent successfully' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const getServerInfo = async () => {
|
||||||
|
if (!isBrowser || !ws.value) throw new Error('Not connected')
|
||||||
|
|
||||||
|
const message = {
|
||||||
|
type: 'get_server_info',
|
||||||
|
timestamp: Date.now()
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.value.send(JSON.stringify(message))
|
||||||
|
}
|
||||||
|
|
||||||
|
const getSystemHealth = async () => {
|
||||||
|
if (!isBrowser || !ws.value) throw new Error('Not connected')
|
||||||
|
|
||||||
|
const message = {
|
||||||
|
type: 'get_system_health',
|
||||||
|
timestamp: Date.now()
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.value.send(JSON.stringify(message))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cleanup on unmount
|
||||||
|
const cleanup = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
|
||||||
|
disconnect()
|
||||||
|
if (reconnectTimeout) {
|
||||||
|
clearTimeout(reconnectTimeout)
|
||||||
|
}
|
||||||
|
stopHeartbeat()
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebSocket connection methods (only available in browser)
|
||||||
|
const connect = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
// WebSocket connection logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const disconnect = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
// WebSocket disconnection logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendMessage = (message: any) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Send message logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const broadcastMessage = (message: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Broadcast message logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendDirectMessage = (clientId: string, message: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Direct message logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendRoomMessage = (room: string, message: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Room message logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const getOnlineUsers = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Get online users logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const testConnection = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Test connection logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendHeartbeat = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Send heartbeat logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const executeDatabaseQuery = async (query: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Database query logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const triggerNotification = async (message: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Notification logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStats = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Get stats logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMonitoringData = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Get monitoring data logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearMessages = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
messages.value = []
|
||||||
|
messageCount = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearActivityLog = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
activityLog.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMessagesByType = (type: string) => {
|
||||||
|
return messages.value.filter(msg => msg.type === type)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getRecentMessages = (count: number = 10) => {
|
||||||
|
return messages.value.slice(0, count)
|
||||||
|
}
|
||||||
|
|
||||||
|
const stopHeartbeat = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
// Stop heartbeat logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const isMessageLimitReached = computed(() => {
|
||||||
|
return messages.value.length >= config.maxMessages
|
||||||
|
})
|
||||||
|
|
||||||
|
const shouldShowMessageWarning = computed(() => {
|
||||||
|
return messages.value.length >= config.messageWarningThreshold
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
// State
|
||||||
|
ws,
|
||||||
|
isConnected,
|
||||||
|
isConnecting,
|
||||||
|
connectionStatus,
|
||||||
|
connectionState,
|
||||||
|
config,
|
||||||
|
messages,
|
||||||
|
stats,
|
||||||
|
monitoringData,
|
||||||
|
onlineUsers,
|
||||||
|
activityLog,
|
||||||
|
|
||||||
|
// Admin state
|
||||||
|
serverInfo,
|
||||||
|
systemHealth,
|
||||||
|
|
||||||
|
// Methods
|
||||||
|
connect,
|
||||||
|
disconnect,
|
||||||
|
sendMessage,
|
||||||
|
broadcastMessage,
|
||||||
|
sendDirectMessage,
|
||||||
|
sendRoomMessage,
|
||||||
|
getServerInfo,
|
||||||
|
getOnlineUsers,
|
||||||
|
testConnection,
|
||||||
|
sendHeartbeat,
|
||||||
|
executeDatabaseQuery,
|
||||||
|
triggerNotification,
|
||||||
|
getStats,
|
||||||
|
getMonitoringData,
|
||||||
|
executeAdminCommand,
|
||||||
|
getSystemHealth,
|
||||||
|
clearMessages,
|
||||||
|
clearActivityLog,
|
||||||
|
getMessagesByType,
|
||||||
|
getRecentMessages,
|
||||||
|
cleanup,
|
||||||
|
|
||||||
|
// Computed
|
||||||
|
isMessageLimitReached,
|
||||||
|
shouldShowMessageWarning,
|
||||||
|
connectionHealthColor,
|
||||||
|
connectionHealthText
|
||||||
|
}
|
||||||
|
}
|
||||||
318
examples/clientsocket/composables/useWebSocket.ts.backup
Normal file
318
examples/clientsocket/composables/useWebSocket.ts.backup
Normal file
@@ -0,0 +1,318 @@
|
|||||||
|
import { ref, computed, reactive, nextTick } from 'vue'
|
||||||
|
import type {
|
||||||
|
WebSocketMessage,
|
||||||
|
ConnectionState,
|
||||||
|
WebSocketConfig,
|
||||||
|
MessageHistory,
|
||||||
|
ConnectionStats,
|
||||||
|
MonitoringData,
|
||||||
|
ClientInfo,
|
||||||
|
OnlineUser,
|
||||||
|
ActivityLog
|
||||||
|
} from '../types/websocket'
|
||||||
|
|
||||||
|
export const useWebSocket = () => {
|
||||||
|
// Check if we're in browser environment
|
||||||
|
const isBrowser = process.client
|
||||||
|
|
||||||
|
const ws = ref<WebSocket | null>(null)
|
||||||
|
const isConnected = ref(false)
|
||||||
|
const isConnecting = ref(false)
|
||||||
|
const connectionStatus = ref<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected')
|
||||||
|
|
||||||
|
const connectionState = reactive<ConnectionState>({
|
||||||
|
isConnected: false,
|
||||||
|
isConnecting: false,
|
||||||
|
connectionStatus: 'disconnected',
|
||||||
|
clientId: null,
|
||||||
|
staticId: null,
|
||||||
|
currentRoom: null,
|
||||||
|
userId: 'anonymous',
|
||||||
|
ipAddress: null,
|
||||||
|
connectionStartTime: null,
|
||||||
|
lastPingTime: null,
|
||||||
|
connectionLatency: 0,
|
||||||
|
connectionHealth: 'poor',
|
||||||
|
reconnectAttempts: 0,
|
||||||
|
messagesReceived: 0,
|
||||||
|
messagesSent: 0,
|
||||||
|
uptime: '00:00:00'
|
||||||
|
})
|
||||||
|
|
||||||
|
const config = reactive<WebSocketConfig>({
|
||||||
|
wsUrl: 'ws://localhost:8080/api/v1/ws',
|
||||||
|
userId: 'anonymous',
|
||||||
|
room: 'default',
|
||||||
|
staticId: '',
|
||||||
|
useIPBasedId: false,
|
||||||
|
autoReconnect: true,
|
||||||
|
heartbeatEnabled: true,
|
||||||
|
maxReconnectAttempts: 10,
|
||||||
|
reconnectDelay: 1000,
|
||||||
|
maxReconnectDelay: 30000,
|
||||||
|
heartbeatInterval: 30000,
|
||||||
|
heartbeatTimeout: 5000,
|
||||||
|
maxMissedHeartbeats: 3,
|
||||||
|
maxMessages: 1000,
|
||||||
|
messageWarningThreshold: 800,
|
||||||
|
actionThrottle: 100
|
||||||
|
})
|
||||||
|
|
||||||
|
const messages = ref<MessageHistory[]>([])
|
||||||
|
const stats = ref<ConnectionStats | null>(null)
|
||||||
|
const monitoringData = ref<MonitoringData | null>(null)
|
||||||
|
const onlineUsers = ref<OnlineUser[]>([])
|
||||||
|
const activityLog = ref<ActivityLog[]>([])
|
||||||
|
|
||||||
|
let reconnectTimeout: number | null = null
|
||||||
|
let heartbeatInterval: number | null = null
|
||||||
|
let heartbeatTimeout: number | null = null
|
||||||
|
let missedHeartbeats = 0
|
||||||
|
let lastHeartbeatTime = 0
|
||||||
|
let messageCount = 0
|
||||||
|
|
||||||
|
// Only run WebSocket logic in browser
|
||||||
|
if (isBrowser) {
|
||||||
|
// WebSocket connection logic here
|
||||||
|
}
|
||||||
|
|
||||||
|
const addMessage = (type: string, data: any, messageId?: string) => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
|
||||||
|
const message: MessageHistory = {
|
||||||
|
timestamp: new Date(),
|
||||||
|
type,
|
||||||
|
data,
|
||||||
|
messageId,
|
||||||
|
size: JSON.stringify(data).length
|
||||||
|
}
|
||||||
|
|
||||||
|
messages.value.unshift(message)
|
||||||
|
messageCount++
|
||||||
|
|
||||||
|
// Keep only the last maxMessages
|
||||||
|
if (messages.value.length > config.maxMessages) {
|
||||||
|
messages.value = messages.value.slice(0, config.maxMessages)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update connection state
|
||||||
|
connectionState.messagesReceived++
|
||||||
|
}
|
||||||
|
|
||||||
|
const connectionHealthColor = computed(() => {
|
||||||
|
switch (connectionState.connectionHealth) {
|
||||||
|
case 'excellent': return '#4CAF50'
|
||||||
|
case 'good': return '#2196F3'
|
||||||
|
case 'warning': return '#FFC107'
|
||||||
|
case 'poor': return '#F44336'
|
||||||
|
default: return '#9E9E9E'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const connectionHealthText = computed(() => {
|
||||||
|
switch (connectionState.connectionHealth) {
|
||||||
|
case 'excellent': return 'Excellent'
|
||||||
|
case 'good': return 'Good'
|
||||||
|
case 'warning': return 'Warning'
|
||||||
|
case 'poor': return 'Poor'
|
||||||
|
default: return 'Unknown'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Admin functionality
|
||||||
|
const serverInfo = ref<any>(null)
|
||||||
|
const systemHealth = ref<any>(null)
|
||||||
|
|
||||||
|
const executeAdminCommand = async (command: string, params: any) => {
|
||||||
|
if (!isBrowser || !ws.value) throw new Error('Not connected')
|
||||||
|
|
||||||
|
const message = {
|
||||||
|
type: 'admin_command',
|
||||||
|
command,
|
||||||
|
params,
|
||||||
|
timestamp: Date.now()
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.value.send(JSON.stringify(message))
|
||||||
|
return { success: true, message: 'Command sent successfully' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const getServerInfo = async () => {
|
||||||
|
if (!isBrowser || !ws.value) throw new Error('Not connected')
|
||||||
|
|
||||||
|
const message = {
|
||||||
|
type: 'get_server_info',
|
||||||
|
timestamp: Date.now()
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.value.send(JSON.stringify(message))
|
||||||
|
}
|
||||||
|
|
||||||
|
const getSystemHealth = async () => {
|
||||||
|
if (!isBrowser || !ws.value) throw new Error('Not connected')
|
||||||
|
|
||||||
|
const message = {
|
||||||
|
type: 'get_system_health',
|
||||||
|
timestamp: Date.now()
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.value.send(JSON.stringify(message))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cleanup on unmount
|
||||||
|
const cleanup = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
|
||||||
|
disconnect()
|
||||||
|
if (reconnectTimeout) {
|
||||||
|
clearTimeout(reconnectTimeout)
|
||||||
|
}
|
||||||
|
stopHeartbeat()
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebSocket connection methods (only available in browser)
|
||||||
|
const connect = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
// WebSocket connection logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const disconnect = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
// WebSocket disconnection logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendMessage = (message: any) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Send message logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const broadcastMessage = (message: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Broadcast message logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendDirectMessage = (clientId: string, message: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Direct message logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendRoomMessage = (room: string, message: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Room message logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const getOnlineUsers = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Get online users logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const testConnection = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Test connection logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendHeartbeat = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Send heartbeat logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const executeDatabaseQuery = async (query: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Database query logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const triggerNotification = async (message: string) => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Notification logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStats = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Get stats logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMonitoringData = () => {
|
||||||
|
if (!isBrowser || !ws.value) return
|
||||||
|
// Get monitoring data logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearMessages = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
messages.value = []
|
||||||
|
messageCount = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearActivityLog = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
activityLog.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMessagesByType = (type: string) => {
|
||||||
|
return messages.value.filter(msg => msg.type === type)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getRecentMessages = (count: number = 10) => {
|
||||||
|
return messages.value.slice(0, count)
|
||||||
|
}
|
||||||
|
|
||||||
|
const stopHeartbeat = () => {
|
||||||
|
if (!isBrowser) return
|
||||||
|
// Stop heartbeat logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const isMessageLimitReached = computed(() => {
|
||||||
|
return messages.value.length >= config.maxMessages
|
||||||
|
})
|
||||||
|
|
||||||
|
const shouldShowMessageWarning = computed(() => {
|
||||||
|
return messages.value.length >= config.messageWarningThreshold
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
// State
|
||||||
|
ws,
|
||||||
|
isConnected,
|
||||||
|
isConnecting,
|
||||||
|
connectionStatus,
|
||||||
|
connectionState,
|
||||||
|
config,
|
||||||
|
messages,
|
||||||
|
stats,
|
||||||
|
monitoringData,
|
||||||
|
onlineUsers,
|
||||||
|
activityLog,
|
||||||
|
|
||||||
|
// Admin state
|
||||||
|
serverInfo,
|
||||||
|
systemHealth,
|
||||||
|
|
||||||
|
// Methods
|
||||||
|
connect,
|
||||||
|
disconnect,
|
||||||
|
sendMessage,
|
||||||
|
broadcastMessage,
|
||||||
|
sendDirectMessage,
|
||||||
|
sendRoomMessage,
|
||||||
|
getServerInfo,
|
||||||
|
getOnlineUsers,
|
||||||
|
testConnection,
|
||||||
|
sendHeartbeat,
|
||||||
|
executeDatabaseQuery,
|
||||||
|
triggerNotification,
|
||||||
|
getStats,
|
||||||
|
getMonitoringData,
|
||||||
|
executeAdminCommand,
|
||||||
|
getSystemHealth,
|
||||||
|
clearMessages,
|
||||||
|
clearActivityLog,
|
||||||
|
getMessagesByType,
|
||||||
|
getRecentMessages,
|
||||||
|
cleanup,
|
||||||
|
|
||||||
|
// Computed
|
||||||
|
isMessageLimitReached,
|
||||||
|
shouldShowMessageWarning,
|
||||||
|
connectionHealthColor,
|
||||||
|
connectionHealthText
|
||||||
|
}
|
||||||
|
}
|
||||||
22
examples/clientsocket/nuxt.config.ts
Normal file
22
examples/clientsocket/nuxt.config.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
export default defineNuxtConfig({
|
||||||
|
devtools: { enabled: true },
|
||||||
|
modules: [],
|
||||||
|
css: ['~/assets/css/main.css', 'vuetify/styles'],
|
||||||
|
build: {
|
||||||
|
transpile: ['vuetify']
|
||||||
|
},
|
||||||
|
runtimeConfig: {
|
||||||
|
public: {
|
||||||
|
wsUrl: 'ws://localhost:8080/api/v1/ws'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
typescript: {
|
||||||
|
typeCheck: false
|
||||||
|
},
|
||||||
|
vite: {
|
||||||
|
define: {
|
||||||
|
global: 'globalThis'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
compatibilityDate: '2024-04-03'
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "nuxt3-websocket-client",
|
"name": "nuxt3-websocket-client",
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "Nuxt 3 WebSocket client example for Go WebSocket server",
|
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "nuxt build",
|
"build": "nuxt build",
|
||||||
"dev": "nuxt dev",
|
"dev": "nuxt dev",
|
||||||
@@ -12,9 +11,17 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxt/devtools": "latest",
|
"@nuxt/devtools": "latest",
|
||||||
"nuxt": "^3.10.0"
|
"nuxt": "^3.8.0",
|
||||||
|
"vue": "^3.3.8",
|
||||||
|
"vue-router": "^4.2.5",
|
||||||
|
"vue-tsc": "^3.0.8"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxtjs/tailwindcss": "^6.10.1"
|
"@mdi/font": "^7.3.67",
|
||||||
|
"@nuxtjs/vuetify": "^1.12.3",
|
||||||
|
"highlight.js": "^11.9.0",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"vue3-highlightjs": "^1.0.5",
|
||||||
|
"vuetify": "^3.4.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
14
examples/clientsocket/pages/index.vue
Normal file
14
examples/clientsocket/pages/index.vue
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<WebSocketClient />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// Main page for the WebSocket client application
|
||||||
|
// This page serves as the entry point and displays the WebSocket client interface
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Additional page-specific styles if needed */
|
||||||
|
</style>
|
||||||
15
examples/clientsocket/plugins/vuetify.js
Normal file
15
examples/clientsocket/plugins/vuetify.js
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { createVuetify } from 'vuetify'
|
||||||
|
import * as components from 'vuetify/components'
|
||||||
|
import * as directives from 'vuetify/directives'
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
const vuetify = createVuetify({
|
||||||
|
components,
|
||||||
|
directives,
|
||||||
|
theme: {
|
||||||
|
defaultTheme: 'light'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
nuxtApp.vueApp.use(vuetify)
|
||||||
|
})
|
||||||
BIN
examples/clientsocket/public/favicon.ico
Normal file
BIN
examples/clientsocket/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
2
examples/clientsocket/public/robots.txt
Normal file
2
examples/clientsocket/public/robots.txt
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
User-Agent: *
|
||||||
|
Disallow:
|
||||||
3
examples/clientsocket/tsconfig.json
Normal file
3
examples/clientsocket/tsconfig.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
|
}
|
||||||
180
examples/clientsocket/types/websocket.ts
Normal file
180
examples/clientsocket/types/websocket.ts
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
export interface WebSocketMessage {
|
||||||
|
type: string
|
||||||
|
data: any
|
||||||
|
timestamp?: number
|
||||||
|
client_id?: string
|
||||||
|
message_id?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConnectionInfo {
|
||||||
|
client_id: string
|
||||||
|
static_id: string
|
||||||
|
ip_address: string
|
||||||
|
room: string
|
||||||
|
user_id: string
|
||||||
|
connected_at: number
|
||||||
|
id_type: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ClientInfo {
|
||||||
|
id: string
|
||||||
|
static_id: string
|
||||||
|
ip_address: string
|
||||||
|
user_id: string
|
||||||
|
room: string
|
||||||
|
connected_at: number
|
||||||
|
last_ping: number
|
||||||
|
is_active?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OnlineUser {
|
||||||
|
client_id: string
|
||||||
|
static_id: string
|
||||||
|
user_id: string
|
||||||
|
room: string
|
||||||
|
ip_address: string
|
||||||
|
connected_at: number
|
||||||
|
last_ping: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConnectionStats {
|
||||||
|
connected_clients: number
|
||||||
|
unique_ips: number
|
||||||
|
static_clients: number
|
||||||
|
active_rooms: number
|
||||||
|
ip_distribution: Record<string, number>
|
||||||
|
room_distribution: Record<string, number>
|
||||||
|
message_queue_size: number
|
||||||
|
queue_workers: number
|
||||||
|
uptime: number
|
||||||
|
timestamp: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SystemHealth {
|
||||||
|
databases: any
|
||||||
|
available_dbs: string[]
|
||||||
|
websocket_status: string
|
||||||
|
uptime_seconds: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PerformanceMetrics {
|
||||||
|
messages_per_second: number
|
||||||
|
average_latency_ms: number
|
||||||
|
error_rate_percent: number
|
||||||
|
memory_usage_bytes: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MonitoringData {
|
||||||
|
stats: ConnectionStats
|
||||||
|
recent_activity: ActivityLog[]
|
||||||
|
system_health: SystemHealth
|
||||||
|
performance: PerformanceMetrics
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ActivityLog {
|
||||||
|
timestamp: number
|
||||||
|
event: string
|
||||||
|
client_id: string
|
||||||
|
details: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MessageHistory {
|
||||||
|
timestamp: Date
|
||||||
|
type: string
|
||||||
|
data: any
|
||||||
|
messageId?: string
|
||||||
|
size: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConnectionState {
|
||||||
|
isConnected: boolean
|
||||||
|
isConnecting: boolean
|
||||||
|
connectionStatus: 'disconnected' | 'connecting' | 'connected' | 'error'
|
||||||
|
clientId: string | null
|
||||||
|
staticId: string | null
|
||||||
|
currentRoom: string | null
|
||||||
|
userId: string
|
||||||
|
ipAddress: string | null
|
||||||
|
connectionStartTime: number | null
|
||||||
|
lastPingTime: number | null
|
||||||
|
connectionLatency: number
|
||||||
|
connectionHealth: 'poor' | 'warning' | 'good' | 'excellent'
|
||||||
|
reconnectAttempts: number
|
||||||
|
messagesReceived: number
|
||||||
|
messagesSent: number
|
||||||
|
uptime: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WebSocketConfig {
|
||||||
|
wsUrl: string
|
||||||
|
userId: string
|
||||||
|
room: string
|
||||||
|
staticId?: string
|
||||||
|
useIPBasedId?: boolean
|
||||||
|
autoReconnect: boolean
|
||||||
|
heartbeatEnabled: boolean
|
||||||
|
maxReconnectAttempts: number
|
||||||
|
reconnectDelay: number
|
||||||
|
maxReconnectDelay: number
|
||||||
|
heartbeatInterval: number
|
||||||
|
heartbeatTimeout: number
|
||||||
|
maxMissedHeartbeats: number
|
||||||
|
maxMessages: number
|
||||||
|
messageWarningThreshold: number
|
||||||
|
actionThrottle: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MessageType =
|
||||||
|
| 'welcome'
|
||||||
|
| 'broadcast'
|
||||||
|
| 'direct_message'
|
||||||
|
| 'room_message'
|
||||||
|
| 'ping'
|
||||||
|
| 'pong'
|
||||||
|
| 'heartbeat'
|
||||||
|
| 'heartbeat_ack'
|
||||||
|
| 'connection_test'
|
||||||
|
| 'connection_test_result'
|
||||||
|
| 'get_online_users'
|
||||||
|
| 'online_users'
|
||||||
|
| 'get_server_info'
|
||||||
|
| 'server_info'
|
||||||
|
| 'error'
|
||||||
|
| 'message_received'
|
||||||
|
| 'broadcast_sent'
|
||||||
|
| 'direct_message_sent'
|
||||||
|
| 'room_message_sent'
|
||||||
|
| 'db_insert'
|
||||||
|
| 'db_query'
|
||||||
|
| 'db_custom_query'
|
||||||
|
| 'query_result'
|
||||||
|
| 'admin_kick_client'
|
||||||
|
| 'admin_kill_server'
|
||||||
|
| 'get_server_stats'
|
||||||
|
| 'get_system_health'
|
||||||
|
| 'admin_clear_logs'
|
||||||
|
| 'get_stats'
|
||||||
|
| 'get_room_info'
|
||||||
|
| 'join_room'
|
||||||
|
| 'leave_room'
|
||||||
|
| 'database_change'
|
||||||
|
| 'data_stream'
|
||||||
|
| 'server_heartbeat'
|
||||||
|
| 'system_status'
|
||||||
|
| 'clients_by_ip'
|
||||||
|
| 'client_info'
|
||||||
|
| 'get_clients_by_ip'
|
||||||
|
| 'get_client_info'
|
||||||
|
| 'health_check'
|
||||||
|
| 'database_list'
|
||||||
|
| 'connection_stats'
|
||||||
|
| 'trigger_notification'
|
||||||
|
| 'notification_sent'
|
||||||
|
| 'API_TEST'
|
||||||
|
| 'manual_test'
|
||||||
|
| 'retribusi_created'
|
||||||
|
| 'retribusi_updated'
|
||||||
|
| 'retribusi_deleted'
|
||||||
|
| 'peserta_changes'
|
||||||
|
| 'retribusi_changes'
|
||||||
|
| 'system_changes'
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
|
|
||||||
import { _replaceAppConfig } from '#app/config'
|
|
||||||
import { defuFn } from 'defu'
|
|
||||||
|
|
||||||
const inlineConfig = {
|
|
||||||
"nuxt": {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vite - webpack is handled directly in #app/config
|
|
||||||
if (import.meta.hot) {
|
|
||||||
import.meta.hot.accept((newModule) => {
|
|
||||||
_replaceAppConfig(newModule.default)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default /*@__PURE__*/ defuFn(inlineConfig)
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
|
|
||||||
import type { DefineComponent, SlotsType } from 'vue'
|
|
||||||
type IslandComponent<T extends DefineComponent> = T & DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>>
|
|
||||||
|
|
||||||
type HydrationStrategies = {
|
|
||||||
hydrateOnVisible?: IntersectionObserverInit | true
|
|
||||||
hydrateOnIdle?: number | true
|
|
||||||
hydrateOnInteraction?: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap> | true
|
|
||||||
hydrateOnMediaQuery?: string
|
|
||||||
hydrateAfter?: number
|
|
||||||
hydrateWhen?: boolean
|
|
||||||
hydrateNever?: true
|
|
||||||
}
|
|
||||||
type LazyComponent<T> = (T & DefineComponent<HydrationStrategies, {}, {}, {}, {}, {}, {}, { hydrated: () => void }>)
|
|
||||||
|
|
||||||
|
|
||||||
export const NuxtWelcome: typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
|
|
||||||
export const NuxtLayout: typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
|
|
||||||
export const NuxtErrorBoundary: typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']
|
|
||||||
export const ClientOnly: typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']
|
|
||||||
export const DevOnly: typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']
|
|
||||||
export const ServerPlaceholder: typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']
|
|
||||||
export const NuxtLink: typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']
|
|
||||||
export const NuxtLoadingIndicator: typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']
|
|
||||||
export const NuxtTime: typeof import("../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']
|
|
||||||
export const NuxtRouteAnnouncer: typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']
|
|
||||||
export const NuxtImg: typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']
|
|
||||||
export const NuxtPicture: typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']
|
|
||||||
export const NuxtPage: typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']
|
|
||||||
export const NoScript: typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']
|
|
||||||
export const Link: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']
|
|
||||||
export const Base: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']
|
|
||||||
export const Title: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']
|
|
||||||
export const Meta: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']
|
|
||||||
export const Style: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']
|
|
||||||
export const Head: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']
|
|
||||||
export const Html: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']
|
|
||||||
export const Body: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']
|
|
||||||
export const NuxtIsland: typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']
|
|
||||||
export const NuxtRouteAnnouncer: typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']
|
|
||||||
export const LazyNuxtWelcome: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']>
|
|
||||||
export const LazyNuxtLayout: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']>
|
|
||||||
export const LazyNuxtErrorBoundary: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']>
|
|
||||||
export const LazyClientOnly: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']>
|
|
||||||
export const LazyDevOnly: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']>
|
|
||||||
export const LazyServerPlaceholder: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
|
|
||||||
export const LazyNuxtLink: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']>
|
|
||||||
export const LazyNuxtLoadingIndicator: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']>
|
|
||||||
export const LazyNuxtTime: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']>
|
|
||||||
export const LazyNuxtRouteAnnouncer: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']>
|
|
||||||
export const LazyNuxtImg: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']>
|
|
||||||
export const LazyNuxtPicture: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']>
|
|
||||||
export const LazyNuxtPage: LazyComponent<typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']>
|
|
||||||
export const LazyNoScript: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']>
|
|
||||||
export const LazyLink: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']>
|
|
||||||
export const LazyBase: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']>
|
|
||||||
export const LazyTitle: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']>
|
|
||||||
export const LazyMeta: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']>
|
|
||||||
export const LazyStyle: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']>
|
|
||||||
export const LazyHead: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']>
|
|
||||||
export const LazyHtml: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']>
|
|
||||||
export const LazyBody: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']>
|
|
||||||
export const LazyNuxtIsland: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']>
|
|
||||||
export const LazyNuxtRouteAnnouncer: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
|
|
||||||
|
|
||||||
export const componentNames: string[]
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,18 +0,0 @@
|
|||||||
{
|
|
||||||
"@vite/client": {
|
|
||||||
"prefetch": true,
|
|
||||||
"isEntry": true,
|
|
||||||
"file": "@vite/client",
|
|
||||||
"css": [],
|
|
||||||
"module": true,
|
|
||||||
"resourceType": "script"
|
|
||||||
},
|
|
||||||
"F:/Goproject/golang-template/examples/nuxt3-websocket-client/node_modules/nuxt/dist/app/entry.js": {
|
|
||||||
"resourceType": "script",
|
|
||||||
"module": true,
|
|
||||||
"prefetch": true,
|
|
||||||
"preload": true,
|
|
||||||
"isEntry": true,
|
|
||||||
"file": "F:/Goproject/golang-template/examples/nuxt3-websocket-client/node_modules/nuxt/dist/app/entry.js"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from "file:///F:/Goproject/golang-template/examples/nuxt3-websocket-client/node_modules/@nuxt/vite-builder/dist/runtime/client.manifest.mjs"
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from "file:///F:/Goproject/golang-template/examples/nuxt3-websocket-client/node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs"
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
export { useScriptTriggerConsent, useScriptEventPage, useScriptTriggerElement, useScript, useScriptGoogleAnalytics, useScriptPlausibleAnalytics, useScriptCrisp, useScriptClarity, useScriptCloudflareWebAnalytics, useScriptFathomAnalytics, useScriptMatomoAnalytics, useScriptGoogleTagManager, useScriptGoogleAdsense, useScriptSegment, useScriptMetaPixel, useScriptXPixel, useScriptIntercom, useScriptHotjar, useScriptStripe, useScriptLemonSqueezy, useScriptVimeoPlayer, useScriptYouTubePlayer, useScriptGoogleMaps, useScriptNpm, useScriptUmamiAnalytics, useScriptSnapchatPixel, useScriptRybbitAnalytics } from '#app/composables/script-stubs';
|
|
||||||
export { isVue2, isVue3 } from 'vue-demi';
|
|
||||||
export { defineNuxtLink } from '#app/components/nuxt-link';
|
|
||||||
export { useNuxtApp, tryUseNuxtApp, defineNuxtPlugin, definePayloadPlugin, useRuntimeConfig, defineAppConfig } from '#app/nuxt';
|
|
||||||
export { useAppConfig, updateAppConfig } from '#app/config';
|
|
||||||
export { defineNuxtComponent } from '#app/composables/component';
|
|
||||||
export { useAsyncData, useLazyAsyncData, useNuxtData, refreshNuxtData, clearNuxtData } from '#app/composables/asyncData';
|
|
||||||
export { useHydration } from '#app/composables/hydrate';
|
|
||||||
export { callOnce } from '#app/composables/once';
|
|
||||||
export { useState, clearNuxtState } from '#app/composables/state';
|
|
||||||
export { clearError, createError, isNuxtError, showError, useError } from '#app/composables/error';
|
|
||||||
export { useFetch, useLazyFetch } from '#app/composables/fetch';
|
|
||||||
export { useCookie, refreshCookie } from '#app/composables/cookie';
|
|
||||||
export { onPrehydrate, prerenderRoutes, useRequestHeader, useRequestHeaders, useResponseHeader, useRequestEvent, useRequestFetch, setResponseStatus } from '#app/composables/ssr';
|
|
||||||
export { onNuxtReady } from '#app/composables/ready';
|
|
||||||
export { preloadComponents, prefetchComponents, preloadRouteComponents } from '#app/composables/preload';
|
|
||||||
export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, setPageLayout, navigateTo, useRoute, useRouter } from '#app/composables/router';
|
|
||||||
export { isPrerendered, loadPayload, preloadPayload, definePayloadReducer, definePayloadReviver } from '#app/composables/payload';
|
|
||||||
export { useLoadingIndicator } from '#app/composables/loading-indicator';
|
|
||||||
export { getAppManifest, getRouteRules } from '#app/composables/manifest';
|
|
||||||
export { reloadNuxtApp } from '#app/composables/chunk';
|
|
||||||
export { useRequestURL } from '#app/composables/url';
|
|
||||||
export { usePreviewMode } from '#app/composables/preview';
|
|
||||||
export { useRouteAnnouncer } from '#app/composables/route-announcer';
|
|
||||||
export { useRuntimeHook } from '#app/composables/runtime-hook';
|
|
||||||
export { useHead, useHeadSafe, useServerHeadSafe, useServerHead, useSeoMeta, useServerSeoMeta, injectHead } from '#app/composables/head';
|
|
||||||
export { onBeforeRouteLeave, onBeforeRouteUpdate, useLink } from 'vue-router';
|
|
||||||
export { withCtx, withDirectives, withKeys, withMemo, withModifiers, withScopeId, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, onUpdated, computed, customRef, isProxy, isReactive, isReadonly, isRef, markRaw, proxyRefs, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, watch, watchEffect, watchPostEffect, watchSyncEffect, onWatcherCleanup, isShallow, effect, effectScope, getCurrentScope, onScopeDispose, defineComponent, defineAsyncComponent, resolveComponent, getCurrentInstance, h, inject, hasInjectionContext, nextTick, provide, mergeModels, toValue, useModel, useAttrs, useCssModule, useCssVars, useSlots, useTransitionState, useId, useTemplateRef, useShadowRoot, Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue';
|
|
||||||
export { requestIdleCallback, cancelIdleCallback } from '#app/compat/idle-callback';
|
|
||||||
export { setInterval } from '#app/compat/interval';
|
|
||||||
export { definePageMeta } from '../node_modules/nuxt/dist/pages/runtime/composables';
|
|
||||||
export { defineLazyHydrationComponent } from '#app/composables/lazy-hydration';
|
|
||||||
export { useWebSocket } from '../composables/useWebSocket';
|
|
||||||
export { useNuxtDevTools } from '../node_modules/@nuxt/devtools/dist/runtime/use-nuxt-devtools';
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
{"id":"dev","timestamp":1758196702735}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
{}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
{"id":"dev","timestamp":1758196702735,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"date": "2025-09-18T11:58:24.948Z",
|
|
||||||
"preset": "nitro-dev",
|
|
||||||
"framework": {
|
|
||||||
"name": "nuxt",
|
|
||||||
"version": "3.19.2"
|
|
||||||
},
|
|
||||||
"versions": {
|
|
||||||
"nitro": "2.12.6"
|
|
||||||
},
|
|
||||||
"dev": {
|
|
||||||
"pid": 18960,
|
|
||||||
"workerAddress": {
|
|
||||||
"socketPath": "\\\\.\\pipe\\nitro-worker-18960-3-3-1738.sock"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
21
examples/nuxt3-websocket-client/.nuxt/nuxt.d.ts
vendored
21
examples/nuxt3-websocket-client/.nuxt/nuxt.d.ts
vendored
@@ -1,21 +0,0 @@
|
|||||||
/// <reference types="@nuxtjs/tailwindcss" />
|
|
||||||
/// <reference types="@nuxt/devtools" />
|
|
||||||
/// <reference types="@nuxt/telemetry" />
|
|
||||||
/// <reference path="types/builder-env.d.ts" />
|
|
||||||
/// <reference types="nuxt" />
|
|
||||||
/// <reference path="types/app-defaults.d.ts" />
|
|
||||||
/// <reference path="types/plugins.d.ts" />
|
|
||||||
/// <reference path="types/build.d.ts" />
|
|
||||||
/// <reference path="types/schema.d.ts" />
|
|
||||||
/// <reference path="types/app.config.d.ts" />
|
|
||||||
/// <reference types="vue-router" />
|
|
||||||
/// <reference path="types/middleware.d.ts" />
|
|
||||||
/// <reference path="types/nitro-middleware.d.ts" />
|
|
||||||
/// <reference path="types/layouts.d.ts" />
|
|
||||||
/// <reference path="types/components.d.ts" />
|
|
||||||
/// <reference path="imports.d.ts" />
|
|
||||||
/// <reference path="types/imports.d.ts" />
|
|
||||||
/// <reference path="schema/nuxt.schema.d.ts" />
|
|
||||||
/// <reference path="types/nitro.d.ts" />
|
|
||||||
|
|
||||||
export {}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"_hash": "c2XTabe4UYXi_EFXDtZJjMgYfx2T9mODnnwUXcZdyu0",
|
|
||||||
"project": {
|
|
||||||
"rootDir": "F:/Goproject/golang-template/examples/nuxt3-websocket-client"
|
|
||||||
},
|
|
||||||
"versions": {
|
|
||||||
"nuxt": "3.19.2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
export interface NuxtCustomSchema {
|
|
||||||
|
|
||||||
}
|
|
||||||
export type CustomAppConfig = Exclude<NuxtCustomSchema['appConfig'], undefined>
|
|
||||||
type _CustomAppConfig = CustomAppConfig
|
|
||||||
|
|
||||||
declare module '@nuxt/schema' {
|
|
||||||
interface NuxtConfig extends Omit<NuxtCustomSchema, 'appConfig'> {}
|
|
||||||
interface NuxtOptions extends Omit<NuxtCustomSchema, 'appConfig'> {}
|
|
||||||
interface CustomAppConfig extends _CustomAppConfig {}
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module 'nuxt/schema' {
|
|
||||||
interface NuxtConfig extends Omit<NuxtCustomSchema, 'appConfig'> {}
|
|
||||||
interface NuxtOptions extends Omit<NuxtCustomSchema, 'appConfig'> {}
|
|
||||||
interface CustomAppConfig extends _CustomAppConfig {}
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"id": "#"
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 9/18/2025, 6:58:23 PM
|
|
||||||
import "@nuxtjs/tailwindcss/config-ctx"
|
|
||||||
import configMerger from "@nuxtjs/tailwindcss/merger";
|
|
||||||
|
|
||||||
;
|
|
||||||
const config = [
|
|
||||||
{"content":{"files":["F:/Goproject/golang-template/examples/nuxt3-websocket-client/components/**/*.{vue,js,jsx,mjs,ts,tsx}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/components/global/**/*.{vue,js,jsx,mjs,ts,tsx}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/components/**/*.{vue,js,jsx,mjs,ts,tsx}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/plugins/**/*.{js,ts,mjs}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/composables/**/*.{js,ts,mjs}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/utils/**/*.{js,ts,mjs}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/pages/**/*.{vue,js,jsx,mjs,ts,tsx}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}","F:/Goproject/golang-template/examples/nuxt3-websocket-client/app.config.{js,ts,mjs}"]}},
|
|
||||||
{}
|
|
||||||
].reduce((acc, curr) => configMerger(acc, curr), {});
|
|
||||||
|
|
||||||
const resolvedConfig = config;
|
|
||||||
|
|
||||||
export default resolvedConfig;
|
|
||||||
@@ -1,172 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"paths": {
|
|
||||||
"nitropack/types": [
|
|
||||||
"../node_modules/nitropack/types"
|
|
||||||
],
|
|
||||||
"nitropack/runtime": [
|
|
||||||
"../node_modules/nitropack/runtime"
|
|
||||||
],
|
|
||||||
"nitropack": [
|
|
||||||
"../node_modules/nitropack"
|
|
||||||
],
|
|
||||||
"defu": [
|
|
||||||
"../node_modules/defu"
|
|
||||||
],
|
|
||||||
"h3": [
|
|
||||||
"../node_modules/h3"
|
|
||||||
],
|
|
||||||
"consola": [
|
|
||||||
"../node_modules/consola"
|
|
||||||
],
|
|
||||||
"ofetch": [
|
|
||||||
"../node_modules/ofetch"
|
|
||||||
],
|
|
||||||
"@unhead/vue": [
|
|
||||||
"../node_modules/@unhead/vue"
|
|
||||||
],
|
|
||||||
"vue": [
|
|
||||||
"../node_modules/vue"
|
|
||||||
],
|
|
||||||
"@vue/runtime-core": [
|
|
||||||
"../node_modules/@vue/runtime-core"
|
|
||||||
],
|
|
||||||
"@vue/compiler-sfc": [
|
|
||||||
"../node_modules/@vue/compiler-sfc"
|
|
||||||
],
|
|
||||||
"vue-router": [
|
|
||||||
"../node_modules/vue-router"
|
|
||||||
],
|
|
||||||
"vue-router/auto-routes": [
|
|
||||||
"../node_modules/vue-router/vue-router-auto-routes"
|
|
||||||
],
|
|
||||||
"unplugin-vue-router/client": [
|
|
||||||
"../node_modules/unplugin-vue-router/client"
|
|
||||||
],
|
|
||||||
"@nuxt/schema": [
|
|
||||||
"../node_modules/@nuxt/schema"
|
|
||||||
],
|
|
||||||
"nuxt": [
|
|
||||||
"../node_modules/nuxt"
|
|
||||||
],
|
|
||||||
"vite/client": [
|
|
||||||
"../node_modules/vite/client"
|
|
||||||
],
|
|
||||||
"~": [
|
|
||||||
".."
|
|
||||||
],
|
|
||||||
"~/*": [
|
|
||||||
"../*"
|
|
||||||
],
|
|
||||||
"@": [
|
|
||||||
".."
|
|
||||||
],
|
|
||||||
"@/*": [
|
|
||||||
"../*"
|
|
||||||
],
|
|
||||||
"~~": [
|
|
||||||
".."
|
|
||||||
],
|
|
||||||
"~~/*": [
|
|
||||||
"../*"
|
|
||||||
],
|
|
||||||
"@@": [
|
|
||||||
".."
|
|
||||||
],
|
|
||||||
"@@/*": [
|
|
||||||
"../*"
|
|
||||||
],
|
|
||||||
"#shared": [
|
|
||||||
"../shared"
|
|
||||||
],
|
|
||||||
"#shared/*": [
|
|
||||||
"../shared/*"
|
|
||||||
],
|
|
||||||
"assets": [
|
|
||||||
"../assets"
|
|
||||||
],
|
|
||||||
"assets/*": [
|
|
||||||
"../assets/*"
|
|
||||||
],
|
|
||||||
"public": [
|
|
||||||
"../public"
|
|
||||||
],
|
|
||||||
"public/*": [
|
|
||||||
"../public/*"
|
|
||||||
],
|
|
||||||
"#app": [
|
|
||||||
"../node_modules/nuxt/dist/app"
|
|
||||||
],
|
|
||||||
"#app/*": [
|
|
||||||
"../node_modules/nuxt/dist/app/*"
|
|
||||||
],
|
|
||||||
"vue-demi": [
|
|
||||||
"../node_modules/nuxt/dist/app/compat/vue-demi"
|
|
||||||
],
|
|
||||||
"#vue-router": [
|
|
||||||
"../node_modules/vue-router"
|
|
||||||
],
|
|
||||||
"#unhead/composables": [
|
|
||||||
"../node_modules/nuxt/dist/head/runtime/composables/v3"
|
|
||||||
],
|
|
||||||
"#imports": [
|
|
||||||
"./imports"
|
|
||||||
],
|
|
||||||
"#app-manifest": [
|
|
||||||
"./manifest/meta/dev"
|
|
||||||
],
|
|
||||||
"#components": [
|
|
||||||
"./components"
|
|
||||||
],
|
|
||||||
"#build": [
|
|
||||||
"."
|
|
||||||
],
|
|
||||||
"#build/*": [
|
|
||||||
"./*"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"target": "ESNext",
|
|
||||||
"allowJs": true,
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"isolatedModules": true,
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
"strict": true,
|
|
||||||
"noUncheckedIndexedAccess": false,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"noImplicitOverride": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"noEmit": true,
|
|
||||||
"lib": [
|
|
||||||
"ESNext",
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"webworker"
|
|
||||||
],
|
|
||||||
"jsx": "preserve",
|
|
||||||
"jsxImportSource": "vue",
|
|
||||||
"types": [],
|
|
||||||
"moduleResolution": "Bundler",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"noImplicitThis": true,
|
|
||||||
"allowSyntheticDefaultImports": true
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"../**/*",
|
|
||||||
"../.config/nuxt.*",
|
|
||||||
"./nuxt.d.ts",
|
|
||||||
"../node_modules/runtime",
|
|
||||||
"../node_modules/dist/runtime",
|
|
||||||
".."
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"../dist",
|
|
||||||
"../.data",
|
|
||||||
"../../../node_modules",
|
|
||||||
"../node_modules/runtime/server",
|
|
||||||
"../node_modules/dist/runtime/server",
|
|
||||||
"dev"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,138 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"strict": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"target": "ESNext",
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleResolution": "Bundler",
|
|
||||||
"allowJs": true,
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"jsx": "preserve",
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"jsxFactory": "h",
|
|
||||||
"jsxFragmentFactory": "Fragment",
|
|
||||||
"paths": {
|
|
||||||
"#imports": [
|
|
||||||
"./types/nitro-imports"
|
|
||||||
],
|
|
||||||
"~/*": [
|
|
||||||
"../*"
|
|
||||||
],
|
|
||||||
"@/*": [
|
|
||||||
"../*"
|
|
||||||
],
|
|
||||||
"~~/*": [
|
|
||||||
"../*"
|
|
||||||
],
|
|
||||||
"@@/*": [
|
|
||||||
"../*"
|
|
||||||
],
|
|
||||||
"nitropack/types": [
|
|
||||||
"../node_modules/nitropack/types"
|
|
||||||
],
|
|
||||||
"nitropack/runtime": [
|
|
||||||
"../node_modules/nitropack/runtime"
|
|
||||||
],
|
|
||||||
"nitropack": [
|
|
||||||
"../node_modules/nitropack"
|
|
||||||
],
|
|
||||||
"defu": [
|
|
||||||
"../node_modules/defu"
|
|
||||||
],
|
|
||||||
"h3": [
|
|
||||||
"../node_modules/h3"
|
|
||||||
],
|
|
||||||
"consola": [
|
|
||||||
"../node_modules/consola"
|
|
||||||
],
|
|
||||||
"ofetch": [
|
|
||||||
"../node_modules/ofetch"
|
|
||||||
],
|
|
||||||
"@unhead/vue": [
|
|
||||||
"../node_modules/@unhead/vue"
|
|
||||||
],
|
|
||||||
"vue": [
|
|
||||||
"../node_modules/vue"
|
|
||||||
],
|
|
||||||
"@vue/runtime-core": [
|
|
||||||
"../node_modules/@vue/runtime-core"
|
|
||||||
],
|
|
||||||
"@vue/compiler-sfc": [
|
|
||||||
"../node_modules/@vue/compiler-sfc"
|
|
||||||
],
|
|
||||||
"vue-router": [
|
|
||||||
"../node_modules/vue-router"
|
|
||||||
],
|
|
||||||
"vue-router/auto-routes": [
|
|
||||||
"../node_modules/vue-router/vue-router-auto-routes"
|
|
||||||
],
|
|
||||||
"unplugin-vue-router/client": [
|
|
||||||
"../node_modules/unplugin-vue-router/client"
|
|
||||||
],
|
|
||||||
"@nuxt/schema": [
|
|
||||||
"../node_modules/@nuxt/schema"
|
|
||||||
],
|
|
||||||
"nuxt": [
|
|
||||||
"../node_modules/nuxt"
|
|
||||||
],
|
|
||||||
"vite/client": [
|
|
||||||
"../node_modules/vite/client"
|
|
||||||
],
|
|
||||||
"#shared": [
|
|
||||||
"../shared"
|
|
||||||
],
|
|
||||||
"#shared/*": [
|
|
||||||
"../shared/*"
|
|
||||||
],
|
|
||||||
"assets": [
|
|
||||||
"../assets"
|
|
||||||
],
|
|
||||||
"assets/*": [
|
|
||||||
"../assets/*"
|
|
||||||
],
|
|
||||||
"public": [
|
|
||||||
"../public"
|
|
||||||
],
|
|
||||||
"public/*": [
|
|
||||||
"../public/*"
|
|
||||||
],
|
|
||||||
"#build": [
|
|
||||||
"./"
|
|
||||||
],
|
|
||||||
"#build/*": [
|
|
||||||
"./*"
|
|
||||||
],
|
|
||||||
"#internal/nuxt/paths": [
|
|
||||||
"../node_modules/nuxt/dist/core/runtime/nitro/utils/paths"
|
|
||||||
],
|
|
||||||
"#unhead/composables": [
|
|
||||||
"../node_modules/nuxt/dist/head/runtime/composables/v3"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"lib": [
|
|
||||||
"esnext",
|
|
||||||
"webworker",
|
|
||||||
"dom.iterable"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"./types/nitro-nuxt.d.ts",
|
|
||||||
"../node_modules/runtime/server",
|
|
||||||
"../node_modules/dist/runtime/server",
|
|
||||||
"../shared/**/*.d.ts",
|
|
||||||
"./types/nitro.d.ts",
|
|
||||||
"../**/*",
|
|
||||||
"../server/**/*"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"../node_modules",
|
|
||||||
"../../../node_modules",
|
|
||||||
"../node_modules/nuxt/node_modules",
|
|
||||||
"../node_modules/@nuxtjs/tailwindcss/node_modules",
|
|
||||||
"../node_modules/@nuxt/devtools/node_modules",
|
|
||||||
"../node_modules/@nuxt/telemetry/node_modules",
|
|
||||||
"../dist"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
|
|
||||||
declare module 'nuxt/app/defaults' {
|
|
||||||
type DefaultAsyncDataErrorValue = null
|
|
||||||
type DefaultAsyncDataValue = null
|
|
||||||
type DefaultErrorValue = null
|
|
||||||
type DedupeOption = boolean | 'cancel' | 'defer'
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
|
|
||||||
import type { CustomAppConfig } from 'nuxt/schema'
|
|
||||||
import type { Defu } from 'defu'
|
|
||||||
|
|
||||||
|
|
||||||
declare const inlineConfig = {
|
|
||||||
"nuxt": {}
|
|
||||||
}
|
|
||||||
type ResolvedAppConfig = Defu<typeof inlineConfig, []>
|
|
||||||
type IsAny<T> = 0 extends 1 & T ? true : false
|
|
||||||
|
|
||||||
type MergedAppConfig<Resolved extends Record<string, unknown>, Custom extends Record<string, unknown>> = {
|
|
||||||
[K in keyof (Resolved & Custom)]: K extends keyof Custom
|
|
||||||
? unknown extends Custom[K]
|
|
||||||
? Resolved[K]
|
|
||||||
: IsAny<Custom[K]> extends true
|
|
||||||
? Resolved[K]
|
|
||||||
: Custom[K] extends Record<string, any>
|
|
||||||
? Resolved[K] extends Record<string, any>
|
|
||||||
? MergedAppConfig<Resolved[K], Custom[K]>
|
|
||||||
: Exclude<Custom[K], undefined>
|
|
||||||
: Exclude<Custom[K], undefined>
|
|
||||||
: Resolved[K]
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module 'nuxt/schema' {
|
|
||||||
interface AppConfig extends MergedAppConfig<ResolvedAppConfig, CustomAppConfig> { }
|
|
||||||
}
|
|
||||||
declare module '@nuxt/schema' {
|
|
||||||
interface AppConfig extends MergedAppConfig<ResolvedAppConfig, CustomAppConfig> { }
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
declare module "#build/app-component.mjs";
|
|
||||||
declare module "#build/nitro.client.mjs";
|
|
||||||
declare module "#build/plugins.client.mjs";
|
|
||||||
declare module "#build/css.mjs";
|
|
||||||
declare module "#build/fetch.mjs";
|
|
||||||
declare module "#build/error-component.mjs";
|
|
||||||
declare module "#build/global-polyfills.mjs";
|
|
||||||
declare module "#build/layouts.mjs";
|
|
||||||
declare module "#build/middleware.mjs";
|
|
||||||
declare module "#build/nuxt.config.mjs";
|
|
||||||
declare module "#build/paths.mjs";
|
|
||||||
declare module "#build/root-component.mjs";
|
|
||||||
declare module "#build/plugins.server.mjs";
|
|
||||||
declare module "#build/test-component-wrapper.mjs";
|
|
||||||
declare module "#build/devtools/settings.mjs";
|
|
||||||
declare module "#build/runtime.vue-devtools-client.CORwN7P5yo3jpzAmHk5JoIa_BCLNSnL8Nevsm5XRUSo.js";
|
|
||||||
declare module "#build/routes.mjs";
|
|
||||||
declare module "#build/pages.mjs";
|
|
||||||
declare module "#build/router.options.mjs";
|
|
||||||
declare module "#build/unhead-options.mjs";
|
|
||||||
declare module "#build/unhead.config.mjs";
|
|
||||||
declare module "#build/components.plugin.mjs";
|
|
||||||
declare module "#build/component-names.mjs";
|
|
||||||
declare module "#build/components.islands.mjs";
|
|
||||||
declare module "#build/component-chunk.mjs";
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
import "vite/client";
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
|
|
||||||
import type { DefineComponent, SlotsType } from 'vue'
|
|
||||||
type IslandComponent<T extends DefineComponent> = T & DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>>
|
|
||||||
|
|
||||||
type HydrationStrategies = {
|
|
||||||
hydrateOnVisible?: IntersectionObserverInit | true
|
|
||||||
hydrateOnIdle?: number | true
|
|
||||||
hydrateOnInteraction?: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap> | true
|
|
||||||
hydrateOnMediaQuery?: string
|
|
||||||
hydrateAfter?: number
|
|
||||||
hydrateWhen?: boolean
|
|
||||||
hydrateNever?: true
|
|
||||||
}
|
|
||||||
type LazyComponent<T> = (T & DefineComponent<HydrationStrategies, {}, {}, {}, {}, {}, {}, { hydrated: () => void }>)
|
|
||||||
|
|
||||||
interface _GlobalComponents {
|
|
||||||
'NuxtWelcome': typeof import("../../node_modules/nuxt/dist/app/components/welcome.vue")['default']
|
|
||||||
'NuxtLayout': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
|
|
||||||
'NuxtErrorBoundary': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']
|
|
||||||
'ClientOnly': typeof import("../../node_modules/nuxt/dist/app/components/client-only")['default']
|
|
||||||
'DevOnly': typeof import("../../node_modules/nuxt/dist/app/components/dev-only")['default']
|
|
||||||
'ServerPlaceholder': typeof import("../../node_modules/nuxt/dist/app/components/server-placeholder")['default']
|
|
||||||
'NuxtLink': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-link")['default']
|
|
||||||
'NuxtLoadingIndicator': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']
|
|
||||||
'NuxtTime': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']
|
|
||||||
'NuxtRouteAnnouncer': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']
|
|
||||||
'NuxtImg': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']
|
|
||||||
'NuxtPicture': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']
|
|
||||||
'NuxtPage': typeof import("../../node_modules/nuxt/dist/pages/runtime/page")['default']
|
|
||||||
'NoScript': typeof import("../../node_modules/nuxt/dist/head/runtime/components")['NoScript']
|
|
||||||
'Link': typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Link']
|
|
||||||
'Base': typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Base']
|
|
||||||
'Title': typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Title']
|
|
||||||
'Meta': typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Meta']
|
|
||||||
'Style': typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Style']
|
|
||||||
'Head': typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Head']
|
|
||||||
'Html': typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Html']
|
|
||||||
'Body': typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Body']
|
|
||||||
'NuxtIsland': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-island")['default']
|
|
||||||
'NuxtRouteAnnouncer': typeof import("../../node_modules/nuxt/dist/app/components/server-placeholder")['default']
|
|
||||||
'LazyNuxtWelcome': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/welcome.vue")['default']>
|
|
||||||
'LazyNuxtLayout': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/nuxt-layout")['default']>
|
|
||||||
'LazyNuxtErrorBoundary': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']>
|
|
||||||
'LazyClientOnly': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/client-only")['default']>
|
|
||||||
'LazyDevOnly': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/dev-only")['default']>
|
|
||||||
'LazyServerPlaceholder': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
|
|
||||||
'LazyNuxtLink': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/nuxt-link")['default']>
|
|
||||||
'LazyNuxtLoadingIndicator': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']>
|
|
||||||
'LazyNuxtTime': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']>
|
|
||||||
'LazyNuxtRouteAnnouncer': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']>
|
|
||||||
'LazyNuxtImg': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']>
|
|
||||||
'LazyNuxtPicture': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']>
|
|
||||||
'LazyNuxtPage': LazyComponent<typeof import("../../node_modules/nuxt/dist/pages/runtime/page")['default']>
|
|
||||||
'LazyNoScript': LazyComponent<typeof import("../../node_modules/nuxt/dist/head/runtime/components")['NoScript']>
|
|
||||||
'LazyLink': LazyComponent<typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Link']>
|
|
||||||
'LazyBase': LazyComponent<typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Base']>
|
|
||||||
'LazyTitle': LazyComponent<typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Title']>
|
|
||||||
'LazyMeta': LazyComponent<typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Meta']>
|
|
||||||
'LazyStyle': LazyComponent<typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Style']>
|
|
||||||
'LazyHead': LazyComponent<typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Head']>
|
|
||||||
'LazyHtml': LazyComponent<typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Html']>
|
|
||||||
'LazyBody': LazyComponent<typeof import("../../node_modules/nuxt/dist/head/runtime/components")['Body']>
|
|
||||||
'LazyNuxtIsland': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/nuxt-island")['default']>
|
|
||||||
'LazyNuxtRouteAnnouncer': LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module 'vue' {
|
|
||||||
export interface GlobalComponents extends _GlobalComponents { }
|
|
||||||
}
|
|
||||||
|
|
||||||
export {}
|
|
||||||
@@ -1,362 +0,0 @@
|
|||||||
// Generated by auto imports
|
|
||||||
export {}
|
|
||||||
declare global {
|
|
||||||
const abortNavigation: typeof import('../../node_modules/nuxt/dist/app/composables/router')['abortNavigation']
|
|
||||||
const addRouteMiddleware: typeof import('../../node_modules/nuxt/dist/app/composables/router')['addRouteMiddleware']
|
|
||||||
const callOnce: typeof import('../../node_modules/nuxt/dist/app/composables/once')['callOnce']
|
|
||||||
const cancelIdleCallback: typeof import('../../node_modules/nuxt/dist/app/compat/idle-callback')['cancelIdleCallback']
|
|
||||||
const clearError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['clearError']
|
|
||||||
const clearNuxtData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['clearNuxtData']
|
|
||||||
const clearNuxtState: typeof import('../../node_modules/nuxt/dist/app/composables/state')['clearNuxtState']
|
|
||||||
const computed: typeof import('../../node_modules/vue')['computed']
|
|
||||||
const createError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['createError']
|
|
||||||
const customRef: typeof import('../../node_modules/vue')['customRef']
|
|
||||||
const defineAppConfig: typeof import('../../node_modules/nuxt/dist/app/nuxt')['defineAppConfig']
|
|
||||||
const defineAsyncComponent: typeof import('../../node_modules/vue')['defineAsyncComponent']
|
|
||||||
const defineComponent: typeof import('../../node_modules/vue')['defineComponent']
|
|
||||||
const defineLazyHydrationComponent: typeof import('../../node_modules/nuxt/dist/app/composables/lazy-hydration')['defineLazyHydrationComponent']
|
|
||||||
const defineNuxtComponent: typeof import('../../node_modules/nuxt/dist/app/composables/component')['defineNuxtComponent']
|
|
||||||
const defineNuxtLink: typeof import('../../node_modules/nuxt/dist/app/components/nuxt-link')['defineNuxtLink']
|
|
||||||
const defineNuxtPlugin: typeof import('../../node_modules/nuxt/dist/app/nuxt')['defineNuxtPlugin']
|
|
||||||
const defineNuxtRouteMiddleware: typeof import('../../node_modules/nuxt/dist/app/composables/router')['defineNuxtRouteMiddleware']
|
|
||||||
const definePageMeta: typeof import('../../node_modules/nuxt/dist/pages/runtime/composables')['definePageMeta']
|
|
||||||
const definePayloadPlugin: typeof import('../../node_modules/nuxt/dist/app/nuxt')['definePayloadPlugin']
|
|
||||||
const definePayloadReducer: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['definePayloadReducer']
|
|
||||||
const definePayloadReviver: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['definePayloadReviver']
|
|
||||||
const effect: typeof import('../../node_modules/vue')['effect']
|
|
||||||
const effectScope: typeof import('../../node_modules/vue')['effectScope']
|
|
||||||
const getAppManifest: typeof import('../../node_modules/nuxt/dist/app/composables/manifest')['getAppManifest']
|
|
||||||
const getCurrentInstance: typeof import('../../node_modules/vue')['getCurrentInstance']
|
|
||||||
const getCurrentScope: typeof import('../../node_modules/vue')['getCurrentScope']
|
|
||||||
const getRouteRules: typeof import('../../node_modules/nuxt/dist/app/composables/manifest')['getRouteRules']
|
|
||||||
const h: typeof import('../../node_modules/vue')['h']
|
|
||||||
const hasInjectionContext: typeof import('../../node_modules/vue')['hasInjectionContext']
|
|
||||||
const inject: typeof import('../../node_modules/vue')['inject']
|
|
||||||
const injectHead: typeof import('../../node_modules/nuxt/dist/app/composables/head')['injectHead']
|
|
||||||
const isNuxtError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['isNuxtError']
|
|
||||||
const isPrerendered: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['isPrerendered']
|
|
||||||
const isProxy: typeof import('../../node_modules/vue')['isProxy']
|
|
||||||
const isReactive: typeof import('../../node_modules/vue')['isReactive']
|
|
||||||
const isReadonly: typeof import('../../node_modules/vue')['isReadonly']
|
|
||||||
const isRef: typeof import('../../node_modules/vue')['isRef']
|
|
||||||
const isShallow: typeof import('../../node_modules/vue')['isShallow']
|
|
||||||
const isVue2: typeof import('../../node_modules/nuxt/dist/app/compat/vue-demi')['isVue2']
|
|
||||||
const isVue3: typeof import('../../node_modules/nuxt/dist/app/compat/vue-demi')['isVue3']
|
|
||||||
const loadPayload: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['loadPayload']
|
|
||||||
const markRaw: typeof import('../../node_modules/vue')['markRaw']
|
|
||||||
const mergeModels: typeof import('../../node_modules/vue')['mergeModels']
|
|
||||||
const navigateTo: typeof import('../../node_modules/nuxt/dist/app/composables/router')['navigateTo']
|
|
||||||
const nextTick: typeof import('../../node_modules/vue')['nextTick']
|
|
||||||
const onActivated: typeof import('../../node_modules/vue')['onActivated']
|
|
||||||
const onBeforeMount: typeof import('../../node_modules/vue')['onBeforeMount']
|
|
||||||
const onBeforeRouteLeave: typeof import('../../node_modules/vue-router')['onBeforeRouteLeave']
|
|
||||||
const onBeforeRouteUpdate: typeof import('../../node_modules/vue-router')['onBeforeRouteUpdate']
|
|
||||||
const onBeforeUnmount: typeof import('../../node_modules/vue')['onBeforeUnmount']
|
|
||||||
const onBeforeUpdate: typeof import('../../node_modules/vue')['onBeforeUpdate']
|
|
||||||
const onDeactivated: typeof import('../../node_modules/vue')['onDeactivated']
|
|
||||||
const onErrorCaptured: typeof import('../../node_modules/vue')['onErrorCaptured']
|
|
||||||
const onMounted: typeof import('../../node_modules/vue')['onMounted']
|
|
||||||
const onNuxtReady: typeof import('../../node_modules/nuxt/dist/app/composables/ready')['onNuxtReady']
|
|
||||||
const onPrehydrate: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['onPrehydrate']
|
|
||||||
const onRenderTracked: typeof import('../../node_modules/vue')['onRenderTracked']
|
|
||||||
const onRenderTriggered: typeof import('../../node_modules/vue')['onRenderTriggered']
|
|
||||||
const onScopeDispose: typeof import('../../node_modules/vue')['onScopeDispose']
|
|
||||||
const onServerPrefetch: typeof import('../../node_modules/vue')['onServerPrefetch']
|
|
||||||
const onUnmounted: typeof import('../../node_modules/vue')['onUnmounted']
|
|
||||||
const onUpdated: typeof import('../../node_modules/vue')['onUpdated']
|
|
||||||
const onWatcherCleanup: typeof import('../../node_modules/vue')['onWatcherCleanup']
|
|
||||||
const prefetchComponents: typeof import('../../node_modules/nuxt/dist/app/composables/preload')['prefetchComponents']
|
|
||||||
const preloadComponents: typeof import('../../node_modules/nuxt/dist/app/composables/preload')['preloadComponents']
|
|
||||||
const preloadPayload: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['preloadPayload']
|
|
||||||
const preloadRouteComponents: typeof import('../../node_modules/nuxt/dist/app/composables/preload')['preloadRouteComponents']
|
|
||||||
const prerenderRoutes: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['prerenderRoutes']
|
|
||||||
const provide: typeof import('../../node_modules/vue')['provide']
|
|
||||||
const proxyRefs: typeof import('../../node_modules/vue')['proxyRefs']
|
|
||||||
const reactive: typeof import('../../node_modules/vue')['reactive']
|
|
||||||
const readonly: typeof import('../../node_modules/vue')['readonly']
|
|
||||||
const ref: typeof import('../../node_modules/vue')['ref']
|
|
||||||
const refreshCookie: typeof import('../../node_modules/nuxt/dist/app/composables/cookie')['refreshCookie']
|
|
||||||
const refreshNuxtData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['refreshNuxtData']
|
|
||||||
const reloadNuxtApp: typeof import('../../node_modules/nuxt/dist/app/composables/chunk')['reloadNuxtApp']
|
|
||||||
const requestIdleCallback: typeof import('../../node_modules/nuxt/dist/app/compat/idle-callback')['requestIdleCallback']
|
|
||||||
const resolveComponent: typeof import('../../node_modules/vue')['resolveComponent']
|
|
||||||
const setInterval: typeof import('../../node_modules/nuxt/dist/app/compat/interval')['setInterval']
|
|
||||||
const setPageLayout: typeof import('../../node_modules/nuxt/dist/app/composables/router')['setPageLayout']
|
|
||||||
const setResponseStatus: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['setResponseStatus']
|
|
||||||
const shallowReactive: typeof import('../../node_modules/vue')['shallowReactive']
|
|
||||||
const shallowReadonly: typeof import('../../node_modules/vue')['shallowReadonly']
|
|
||||||
const shallowRef: typeof import('../../node_modules/vue')['shallowRef']
|
|
||||||
const showError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['showError']
|
|
||||||
const toRaw: typeof import('../../node_modules/vue')['toRaw']
|
|
||||||
const toRef: typeof import('../../node_modules/vue')['toRef']
|
|
||||||
const toRefs: typeof import('../../node_modules/vue')['toRefs']
|
|
||||||
const toValue: typeof import('../../node_modules/vue')['toValue']
|
|
||||||
const triggerRef: typeof import('../../node_modules/vue')['triggerRef']
|
|
||||||
const tryUseNuxtApp: typeof import('../../node_modules/nuxt/dist/app/nuxt')['tryUseNuxtApp']
|
|
||||||
const unref: typeof import('../../node_modules/vue')['unref']
|
|
||||||
const updateAppConfig: typeof import('../../node_modules/nuxt/dist/app/config')['updateAppConfig']
|
|
||||||
const useAppConfig: typeof import('../../node_modules/nuxt/dist/app/config')['useAppConfig']
|
|
||||||
const useAsyncData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useAsyncData']
|
|
||||||
const useAttrs: typeof import('../../node_modules/vue')['useAttrs']
|
|
||||||
const useCookie: typeof import('../../node_modules/nuxt/dist/app/composables/cookie')['useCookie']
|
|
||||||
const useCssModule: typeof import('../../node_modules/vue')['useCssModule']
|
|
||||||
const useCssVars: typeof import('../../node_modules/vue')['useCssVars']
|
|
||||||
const useError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['useError']
|
|
||||||
const useFetch: typeof import('../../node_modules/nuxt/dist/app/composables/fetch')['useFetch']
|
|
||||||
const useHead: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useHead']
|
|
||||||
const useHeadSafe: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useHeadSafe']
|
|
||||||
const useHydration: typeof import('../../node_modules/nuxt/dist/app/composables/hydrate')['useHydration']
|
|
||||||
const useId: typeof import('../../node_modules/vue')['useId']
|
|
||||||
const useLazyAsyncData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useLazyAsyncData']
|
|
||||||
const useLazyFetch: typeof import('../../node_modules/nuxt/dist/app/composables/fetch')['useLazyFetch']
|
|
||||||
const useLink: typeof import('../../node_modules/vue-router')['useLink']
|
|
||||||
const useLoadingIndicator: typeof import('../../node_modules/nuxt/dist/app/composables/loading-indicator')['useLoadingIndicator']
|
|
||||||
const useModel: typeof import('../../node_modules/vue')['useModel']
|
|
||||||
const useNuxtApp: typeof import('../../node_modules/nuxt/dist/app/nuxt')['useNuxtApp']
|
|
||||||
const useNuxtData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useNuxtData']
|
|
||||||
const useNuxtDevTools: typeof import('../../node_modules/@nuxt/devtools/dist/runtime/use-nuxt-devtools')['useNuxtDevTools']
|
|
||||||
const usePreviewMode: typeof import('../../node_modules/nuxt/dist/app/composables/preview')['usePreviewMode']
|
|
||||||
const useRequestEvent: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestEvent']
|
|
||||||
const useRequestFetch: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestFetch']
|
|
||||||
const useRequestHeader: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestHeader']
|
|
||||||
const useRequestHeaders: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestHeaders']
|
|
||||||
const useRequestURL: typeof import('../../node_modules/nuxt/dist/app/composables/url')['useRequestURL']
|
|
||||||
const useResponseHeader: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useResponseHeader']
|
|
||||||
const useRoute: typeof import('../../node_modules/nuxt/dist/app/composables/router')['useRoute']
|
|
||||||
const useRouteAnnouncer: typeof import('../../node_modules/nuxt/dist/app/composables/route-announcer')['useRouteAnnouncer']
|
|
||||||
const useRouter: typeof import('../../node_modules/nuxt/dist/app/composables/router')['useRouter']
|
|
||||||
const useRuntimeConfig: typeof import('../../node_modules/nuxt/dist/app/nuxt')['useRuntimeConfig']
|
|
||||||
const useRuntimeHook: typeof import('../../node_modules/nuxt/dist/app/composables/runtime-hook')['useRuntimeHook']
|
|
||||||
const useScript: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScript']
|
|
||||||
const useScriptClarity: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptClarity']
|
|
||||||
const useScriptCloudflareWebAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptCloudflareWebAnalytics']
|
|
||||||
const useScriptCrisp: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptCrisp']
|
|
||||||
const useScriptEventPage: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptEventPage']
|
|
||||||
const useScriptFathomAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptFathomAnalytics']
|
|
||||||
const useScriptGoogleAdsense: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleAdsense']
|
|
||||||
const useScriptGoogleAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleAnalytics']
|
|
||||||
const useScriptGoogleMaps: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleMaps']
|
|
||||||
const useScriptGoogleTagManager: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleTagManager']
|
|
||||||
const useScriptHotjar: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptHotjar']
|
|
||||||
const useScriptIntercom: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptIntercom']
|
|
||||||
const useScriptLemonSqueezy: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptLemonSqueezy']
|
|
||||||
const useScriptMatomoAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptMatomoAnalytics']
|
|
||||||
const useScriptMetaPixel: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptMetaPixel']
|
|
||||||
const useScriptNpm: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptNpm']
|
|
||||||
const useScriptPlausibleAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptPlausibleAnalytics']
|
|
||||||
const useScriptRybbitAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptRybbitAnalytics']
|
|
||||||
const useScriptSegment: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptSegment']
|
|
||||||
const useScriptSnapchatPixel: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptSnapchatPixel']
|
|
||||||
const useScriptStripe: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptStripe']
|
|
||||||
const useScriptTriggerConsent: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptTriggerConsent']
|
|
||||||
const useScriptTriggerElement: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptTriggerElement']
|
|
||||||
const useScriptUmamiAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptUmamiAnalytics']
|
|
||||||
const useScriptVimeoPlayer: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptVimeoPlayer']
|
|
||||||
const useScriptXPixel: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptXPixel']
|
|
||||||
const useScriptYouTubePlayer: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptYouTubePlayer']
|
|
||||||
const useSeoMeta: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useSeoMeta']
|
|
||||||
const useServerHead: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerHead']
|
|
||||||
const useServerHeadSafe: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerHeadSafe']
|
|
||||||
const useServerSeoMeta: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerSeoMeta']
|
|
||||||
const useShadowRoot: typeof import('../../node_modules/vue')['useShadowRoot']
|
|
||||||
const useSlots: typeof import('../../node_modules/vue')['useSlots']
|
|
||||||
const useState: typeof import('../../node_modules/nuxt/dist/app/composables/state')['useState']
|
|
||||||
const useTemplateRef: typeof import('../../node_modules/vue')['useTemplateRef']
|
|
||||||
const useTransitionState: typeof import('../../node_modules/vue')['useTransitionState']
|
|
||||||
const useWebSocket: typeof import('../../composables/useWebSocket')['useWebSocket']
|
|
||||||
const watch: typeof import('../../node_modules/vue')['watch']
|
|
||||||
const watchEffect: typeof import('../../node_modules/vue')['watchEffect']
|
|
||||||
const watchPostEffect: typeof import('../../node_modules/vue')['watchPostEffect']
|
|
||||||
const watchSyncEffect: typeof import('../../node_modules/vue')['watchSyncEffect']
|
|
||||||
const withCtx: typeof import('../../node_modules/vue')['withCtx']
|
|
||||||
const withDirectives: typeof import('../../node_modules/vue')['withDirectives']
|
|
||||||
const withKeys: typeof import('../../node_modules/vue')['withKeys']
|
|
||||||
const withMemo: typeof import('../../node_modules/vue')['withMemo']
|
|
||||||
const withModifiers: typeof import('../../node_modules/vue')['withModifiers']
|
|
||||||
const withScopeId: typeof import('../../node_modules/vue')['withScopeId']
|
|
||||||
}
|
|
||||||
// for type re-export
|
|
||||||
declare global {
|
|
||||||
// @ts-ignore
|
|
||||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from '../../node_modules/vue'
|
|
||||||
import('../../node_modules/vue')
|
|
||||||
}
|
|
||||||
// for vue template auto import
|
|
||||||
import { UnwrapRef } from 'vue'
|
|
||||||
declare module 'vue' {
|
|
||||||
interface ComponentCustomProperties {
|
|
||||||
readonly abortNavigation: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['abortNavigation']>
|
|
||||||
readonly addRouteMiddleware: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['addRouteMiddleware']>
|
|
||||||
readonly callOnce: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/once')['callOnce']>
|
|
||||||
readonly cancelIdleCallback: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/idle-callback')['cancelIdleCallback']>
|
|
||||||
readonly clearError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['clearError']>
|
|
||||||
readonly clearNuxtData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['clearNuxtData']>
|
|
||||||
readonly clearNuxtState: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/state')['clearNuxtState']>
|
|
||||||
readonly computed: UnwrapRef<typeof import('../../node_modules/vue')['computed']>
|
|
||||||
readonly createError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['createError']>
|
|
||||||
readonly customRef: UnwrapRef<typeof import('../../node_modules/vue')['customRef']>
|
|
||||||
readonly defineAppConfig: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['defineAppConfig']>
|
|
||||||
readonly defineAsyncComponent: UnwrapRef<typeof import('../../node_modules/vue')['defineAsyncComponent']>
|
|
||||||
readonly defineComponent: UnwrapRef<typeof import('../../node_modules/vue')['defineComponent']>
|
|
||||||
readonly defineLazyHydrationComponent: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/lazy-hydration')['defineLazyHydrationComponent']>
|
|
||||||
readonly defineNuxtComponent: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/component')['defineNuxtComponent']>
|
|
||||||
readonly defineNuxtLink: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/components/nuxt-link')['defineNuxtLink']>
|
|
||||||
readonly defineNuxtPlugin: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['defineNuxtPlugin']>
|
|
||||||
readonly defineNuxtRouteMiddleware: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['defineNuxtRouteMiddleware']>
|
|
||||||
readonly definePageMeta: UnwrapRef<typeof import('../../node_modules/nuxt/dist/pages/runtime/composables')['definePageMeta']>
|
|
||||||
readonly definePayloadPlugin: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['definePayloadPlugin']>
|
|
||||||
readonly definePayloadReducer: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['definePayloadReducer']>
|
|
||||||
readonly definePayloadReviver: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['definePayloadReviver']>
|
|
||||||
readonly effect: UnwrapRef<typeof import('../../node_modules/vue')['effect']>
|
|
||||||
readonly effectScope: UnwrapRef<typeof import('../../node_modules/vue')['effectScope']>
|
|
||||||
readonly getAppManifest: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/manifest')['getAppManifest']>
|
|
||||||
readonly getCurrentInstance: UnwrapRef<typeof import('../../node_modules/vue')['getCurrentInstance']>
|
|
||||||
readonly getCurrentScope: UnwrapRef<typeof import('../../node_modules/vue')['getCurrentScope']>
|
|
||||||
readonly getRouteRules: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/manifest')['getRouteRules']>
|
|
||||||
readonly h: UnwrapRef<typeof import('../../node_modules/vue')['h']>
|
|
||||||
readonly hasInjectionContext: UnwrapRef<typeof import('../../node_modules/vue')['hasInjectionContext']>
|
|
||||||
readonly inject: UnwrapRef<typeof import('../../node_modules/vue')['inject']>
|
|
||||||
readonly injectHead: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['injectHead']>
|
|
||||||
readonly isNuxtError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['isNuxtError']>
|
|
||||||
readonly isPrerendered: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['isPrerendered']>
|
|
||||||
readonly isProxy: UnwrapRef<typeof import('../../node_modules/vue')['isProxy']>
|
|
||||||
readonly isReactive: UnwrapRef<typeof import('../../node_modules/vue')['isReactive']>
|
|
||||||
readonly isReadonly: UnwrapRef<typeof import('../../node_modules/vue')['isReadonly']>
|
|
||||||
readonly isRef: UnwrapRef<typeof import('../../node_modules/vue')['isRef']>
|
|
||||||
readonly isShallow: UnwrapRef<typeof import('../../node_modules/vue')['isShallow']>
|
|
||||||
readonly isVue2: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/vue-demi')['isVue2']>
|
|
||||||
readonly isVue3: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/vue-demi')['isVue3']>
|
|
||||||
readonly loadPayload: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['loadPayload']>
|
|
||||||
readonly markRaw: UnwrapRef<typeof import('../../node_modules/vue')['markRaw']>
|
|
||||||
readonly mergeModels: UnwrapRef<typeof import('../../node_modules/vue')['mergeModels']>
|
|
||||||
readonly navigateTo: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['navigateTo']>
|
|
||||||
readonly nextTick: UnwrapRef<typeof import('../../node_modules/vue')['nextTick']>
|
|
||||||
readonly onActivated: UnwrapRef<typeof import('../../node_modules/vue')['onActivated']>
|
|
||||||
readonly onBeforeMount: UnwrapRef<typeof import('../../node_modules/vue')['onBeforeMount']>
|
|
||||||
readonly onBeforeRouteLeave: UnwrapRef<typeof import('../../node_modules/vue-router')['onBeforeRouteLeave']>
|
|
||||||
readonly onBeforeRouteUpdate: UnwrapRef<typeof import('../../node_modules/vue-router')['onBeforeRouteUpdate']>
|
|
||||||
readonly onBeforeUnmount: UnwrapRef<typeof import('../../node_modules/vue')['onBeforeUnmount']>
|
|
||||||
readonly onBeforeUpdate: UnwrapRef<typeof import('../../node_modules/vue')['onBeforeUpdate']>
|
|
||||||
readonly onDeactivated: UnwrapRef<typeof import('../../node_modules/vue')['onDeactivated']>
|
|
||||||
readonly onErrorCaptured: UnwrapRef<typeof import('../../node_modules/vue')['onErrorCaptured']>
|
|
||||||
readonly onMounted: UnwrapRef<typeof import('../../node_modules/vue')['onMounted']>
|
|
||||||
readonly onNuxtReady: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ready')['onNuxtReady']>
|
|
||||||
readonly onPrehydrate: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['onPrehydrate']>
|
|
||||||
readonly onRenderTracked: UnwrapRef<typeof import('../../node_modules/vue')['onRenderTracked']>
|
|
||||||
readonly onRenderTriggered: UnwrapRef<typeof import('../../node_modules/vue')['onRenderTriggered']>
|
|
||||||
readonly onScopeDispose: UnwrapRef<typeof import('../../node_modules/vue')['onScopeDispose']>
|
|
||||||
readonly onServerPrefetch: UnwrapRef<typeof import('../../node_modules/vue')['onServerPrefetch']>
|
|
||||||
readonly onUnmounted: UnwrapRef<typeof import('../../node_modules/vue')['onUnmounted']>
|
|
||||||
readonly onUpdated: UnwrapRef<typeof import('../../node_modules/vue')['onUpdated']>
|
|
||||||
readonly onWatcherCleanup: UnwrapRef<typeof import('../../node_modules/vue')['onWatcherCleanup']>
|
|
||||||
readonly prefetchComponents: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/preload')['prefetchComponents']>
|
|
||||||
readonly preloadComponents: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/preload')['preloadComponents']>
|
|
||||||
readonly preloadPayload: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['preloadPayload']>
|
|
||||||
readonly preloadRouteComponents: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/preload')['preloadRouteComponents']>
|
|
||||||
readonly prerenderRoutes: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['prerenderRoutes']>
|
|
||||||
readonly provide: UnwrapRef<typeof import('../../node_modules/vue')['provide']>
|
|
||||||
readonly proxyRefs: UnwrapRef<typeof import('../../node_modules/vue')['proxyRefs']>
|
|
||||||
readonly reactive: UnwrapRef<typeof import('../../node_modules/vue')['reactive']>
|
|
||||||
readonly readonly: UnwrapRef<typeof import('../../node_modules/vue')['readonly']>
|
|
||||||
readonly ref: UnwrapRef<typeof import('../../node_modules/vue')['ref']>
|
|
||||||
readonly refreshCookie: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/cookie')['refreshCookie']>
|
|
||||||
readonly refreshNuxtData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['refreshNuxtData']>
|
|
||||||
readonly reloadNuxtApp: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/chunk')['reloadNuxtApp']>
|
|
||||||
readonly requestIdleCallback: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/idle-callback')['requestIdleCallback']>
|
|
||||||
readonly resolveComponent: UnwrapRef<typeof import('../../node_modules/vue')['resolveComponent']>
|
|
||||||
readonly setInterval: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/interval')['setInterval']>
|
|
||||||
readonly setPageLayout: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['setPageLayout']>
|
|
||||||
readonly setResponseStatus: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['setResponseStatus']>
|
|
||||||
readonly shallowReactive: UnwrapRef<typeof import('../../node_modules/vue')['shallowReactive']>
|
|
||||||
readonly shallowReadonly: UnwrapRef<typeof import('../../node_modules/vue')['shallowReadonly']>
|
|
||||||
readonly shallowRef: UnwrapRef<typeof import('../../node_modules/vue')['shallowRef']>
|
|
||||||
readonly showError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['showError']>
|
|
||||||
readonly toRaw: UnwrapRef<typeof import('../../node_modules/vue')['toRaw']>
|
|
||||||
readonly toRef: UnwrapRef<typeof import('../../node_modules/vue')['toRef']>
|
|
||||||
readonly toRefs: UnwrapRef<typeof import('../../node_modules/vue')['toRefs']>
|
|
||||||
readonly toValue: UnwrapRef<typeof import('../../node_modules/vue')['toValue']>
|
|
||||||
readonly triggerRef: UnwrapRef<typeof import('../../node_modules/vue')['triggerRef']>
|
|
||||||
readonly tryUseNuxtApp: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['tryUseNuxtApp']>
|
|
||||||
readonly unref: UnwrapRef<typeof import('../../node_modules/vue')['unref']>
|
|
||||||
readonly updateAppConfig: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/config')['updateAppConfig']>
|
|
||||||
readonly useAppConfig: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/config')['useAppConfig']>
|
|
||||||
readonly useAsyncData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useAsyncData']>
|
|
||||||
readonly useAttrs: UnwrapRef<typeof import('../../node_modules/vue')['useAttrs']>
|
|
||||||
readonly useCookie: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/cookie')['useCookie']>
|
|
||||||
readonly useCssModule: UnwrapRef<typeof import('../../node_modules/vue')['useCssModule']>
|
|
||||||
readonly useCssVars: UnwrapRef<typeof import('../../node_modules/vue')['useCssVars']>
|
|
||||||
readonly useError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['useError']>
|
|
||||||
readonly useFetch: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/fetch')['useFetch']>
|
|
||||||
readonly useHead: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useHead']>
|
|
||||||
readonly useHeadSafe: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useHeadSafe']>
|
|
||||||
readonly useHydration: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/hydrate')['useHydration']>
|
|
||||||
readonly useId: UnwrapRef<typeof import('../../node_modules/vue')['useId']>
|
|
||||||
readonly useLazyAsyncData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useLazyAsyncData']>
|
|
||||||
readonly useLazyFetch: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/fetch')['useLazyFetch']>
|
|
||||||
readonly useLink: UnwrapRef<typeof import('../../node_modules/vue-router')['useLink']>
|
|
||||||
readonly useLoadingIndicator: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/loading-indicator')['useLoadingIndicator']>
|
|
||||||
readonly useModel: UnwrapRef<typeof import('../../node_modules/vue')['useModel']>
|
|
||||||
readonly useNuxtApp: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['useNuxtApp']>
|
|
||||||
readonly useNuxtData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useNuxtData']>
|
|
||||||
readonly useNuxtDevTools: UnwrapRef<typeof import('../../node_modules/@nuxt/devtools/dist/runtime/use-nuxt-devtools')['useNuxtDevTools']>
|
|
||||||
readonly usePreviewMode: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/preview')['usePreviewMode']>
|
|
||||||
readonly useRequestEvent: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestEvent']>
|
|
||||||
readonly useRequestFetch: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestFetch']>
|
|
||||||
readonly useRequestHeader: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestHeader']>
|
|
||||||
readonly useRequestHeaders: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestHeaders']>
|
|
||||||
readonly useRequestURL: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/url')['useRequestURL']>
|
|
||||||
readonly useResponseHeader: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useResponseHeader']>
|
|
||||||
readonly useRoute: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['useRoute']>
|
|
||||||
readonly useRouteAnnouncer: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/route-announcer')['useRouteAnnouncer']>
|
|
||||||
readonly useRouter: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['useRouter']>
|
|
||||||
readonly useRuntimeConfig: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['useRuntimeConfig']>
|
|
||||||
readonly useRuntimeHook: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/runtime-hook')['useRuntimeHook']>
|
|
||||||
readonly useScript: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScript']>
|
|
||||||
readonly useScriptClarity: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptClarity']>
|
|
||||||
readonly useScriptCloudflareWebAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptCloudflareWebAnalytics']>
|
|
||||||
readonly useScriptCrisp: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptCrisp']>
|
|
||||||
readonly useScriptEventPage: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptEventPage']>
|
|
||||||
readonly useScriptFathomAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptFathomAnalytics']>
|
|
||||||
readonly useScriptGoogleAdsense: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleAdsense']>
|
|
||||||
readonly useScriptGoogleAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleAnalytics']>
|
|
||||||
readonly useScriptGoogleMaps: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleMaps']>
|
|
||||||
readonly useScriptGoogleTagManager: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleTagManager']>
|
|
||||||
readonly useScriptHotjar: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptHotjar']>
|
|
||||||
readonly useScriptIntercom: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptIntercom']>
|
|
||||||
readonly useScriptLemonSqueezy: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptLemonSqueezy']>
|
|
||||||
readonly useScriptMatomoAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptMatomoAnalytics']>
|
|
||||||
readonly useScriptMetaPixel: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptMetaPixel']>
|
|
||||||
readonly useScriptNpm: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptNpm']>
|
|
||||||
readonly useScriptPlausibleAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptPlausibleAnalytics']>
|
|
||||||
readonly useScriptRybbitAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptRybbitAnalytics']>
|
|
||||||
readonly useScriptSegment: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptSegment']>
|
|
||||||
readonly useScriptSnapchatPixel: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptSnapchatPixel']>
|
|
||||||
readonly useScriptStripe: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptStripe']>
|
|
||||||
readonly useScriptTriggerConsent: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptTriggerConsent']>
|
|
||||||
readonly useScriptTriggerElement: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptTriggerElement']>
|
|
||||||
readonly useScriptUmamiAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptUmamiAnalytics']>
|
|
||||||
readonly useScriptVimeoPlayer: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptVimeoPlayer']>
|
|
||||||
readonly useScriptXPixel: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptXPixel']>
|
|
||||||
readonly useScriptYouTubePlayer: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptYouTubePlayer']>
|
|
||||||
readonly useSeoMeta: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useSeoMeta']>
|
|
||||||
readonly useServerHead: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerHead']>
|
|
||||||
readonly useServerHeadSafe: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerHeadSafe']>
|
|
||||||
readonly useServerSeoMeta: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerSeoMeta']>
|
|
||||||
readonly useShadowRoot: UnwrapRef<typeof import('../../node_modules/vue')['useShadowRoot']>
|
|
||||||
readonly useSlots: UnwrapRef<typeof import('../../node_modules/vue')['useSlots']>
|
|
||||||
readonly useState: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/state')['useState']>
|
|
||||||
readonly useTemplateRef: UnwrapRef<typeof import('../../node_modules/vue')['useTemplateRef']>
|
|
||||||
readonly useTransitionState: UnwrapRef<typeof import('../../node_modules/vue')['useTransitionState']>
|
|
||||||
readonly useWebSocket: UnwrapRef<typeof import('../../composables/useWebSocket')['useWebSocket']>
|
|
||||||
readonly watch: UnwrapRef<typeof import('../../node_modules/vue')['watch']>
|
|
||||||
readonly watchEffect: UnwrapRef<typeof import('../../node_modules/vue')['watchEffect']>
|
|
||||||
readonly watchPostEffect: UnwrapRef<typeof import('../../node_modules/vue')['watchPostEffect']>
|
|
||||||
readonly watchSyncEffect: UnwrapRef<typeof import('../../node_modules/vue')['watchSyncEffect']>
|
|
||||||
readonly withCtx: UnwrapRef<typeof import('../../node_modules/vue')['withCtx']>
|
|
||||||
readonly withDirectives: UnwrapRef<typeof import('../../node_modules/vue')['withDirectives']>
|
|
||||||
readonly withKeys: UnwrapRef<typeof import('../../node_modules/vue')['withKeys']>
|
|
||||||
readonly withMemo: UnwrapRef<typeof import('../../node_modules/vue')['withMemo']>
|
|
||||||
readonly withModifiers: UnwrapRef<typeof import('../../node_modules/vue')['withModifiers']>
|
|
||||||
readonly withScopeId: UnwrapRef<typeof import('../../node_modules/vue')['withScopeId']>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import type { ComputedRef, MaybeRef } from 'vue'
|
|
||||||
export type LayoutKey = string
|
|
||||||
declare module 'nuxt/app' {
|
|
||||||
interface PageMeta {
|
|
||||||
layout?: MaybeRef<LayoutKey | false> | ComputedRef<LayoutKey | false>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import type { NavigationGuard } from 'vue-router'
|
|
||||||
export type MiddlewareKey = never
|
|
||||||
declare module 'nuxt/app' {
|
|
||||||
interface PageMeta {
|
|
||||||
middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
// Generated by nitro
|
|
||||||
|
|
||||||
// App Config
|
|
||||||
import type { Defu } from 'defu'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
type UserAppConfig = Defu<{}, []>
|
|
||||||
|
|
||||||
declare module "nitropack/types" {
|
|
||||||
interface AppConfig extends UserAppConfig {}
|
|
||||||
|
|
||||||
}
|
|
||||||
export {}
|
|
||||||
@@ -1,141 +0,0 @@
|
|||||||
declare global {
|
|
||||||
const __buildAssetsURL: typeof import('../../node_modules/nuxt/dist/core/runtime/nitro/utils/paths')['buildAssetsURL']
|
|
||||||
const __publicAssetsURL: typeof import('../../node_modules/nuxt/dist/core/runtime/nitro/utils/paths')['publicAssetsURL']
|
|
||||||
const appendCorsHeaders: typeof import('../../node_modules/h3')['appendCorsHeaders']
|
|
||||||
const appendCorsPreflightHeaders: typeof import('../../node_modules/h3')['appendCorsPreflightHeaders']
|
|
||||||
const appendHeader: typeof import('../../node_modules/h3')['appendHeader']
|
|
||||||
const appendHeaders: typeof import('../../node_modules/h3')['appendHeaders']
|
|
||||||
const appendResponseHeader: typeof import('../../node_modules/h3')['appendResponseHeader']
|
|
||||||
const appendResponseHeaders: typeof import('../../node_modules/h3')['appendResponseHeaders']
|
|
||||||
const assertMethod: typeof import('../../node_modules/h3')['assertMethod']
|
|
||||||
const cachedEventHandler: typeof import('../../node_modules/nitropack/dist/runtime/internal/cache')['cachedEventHandler']
|
|
||||||
const cachedFunction: typeof import('../../node_modules/nitropack/dist/runtime/internal/cache')['cachedFunction']
|
|
||||||
const callNodeListener: typeof import('../../node_modules/h3')['callNodeListener']
|
|
||||||
const clearResponseHeaders: typeof import('../../node_modules/h3')['clearResponseHeaders']
|
|
||||||
const clearSession: typeof import('../../node_modules/h3')['clearSession']
|
|
||||||
const createApp: typeof import('../../node_modules/h3')['createApp']
|
|
||||||
const createAppEventHandler: typeof import('../../node_modules/h3')['createAppEventHandler']
|
|
||||||
const createError: typeof import('../../node_modules/h3')['createError']
|
|
||||||
const createEvent: typeof import('../../node_modules/h3')['createEvent']
|
|
||||||
const createEventStream: typeof import('../../node_modules/h3')['createEventStream']
|
|
||||||
const createRouter: typeof import('../../node_modules/h3')['createRouter']
|
|
||||||
const defaultContentType: typeof import('../../node_modules/h3')['defaultContentType']
|
|
||||||
const defineAppConfig: typeof import('../../node_modules/nuxt/dist/core/runtime/nitro/utils/config')['defineAppConfig']
|
|
||||||
const defineCachedEventHandler: typeof import('../../node_modules/nitropack/dist/runtime/internal/cache')['defineCachedEventHandler']
|
|
||||||
const defineCachedFunction: typeof import('../../node_modules/nitropack/dist/runtime/internal/cache')['defineCachedFunction']
|
|
||||||
const defineEventHandler: typeof import('../../node_modules/h3')['defineEventHandler']
|
|
||||||
const defineLazyEventHandler: typeof import('../../node_modules/h3')['defineLazyEventHandler']
|
|
||||||
const defineNitroErrorHandler: typeof import('../../node_modules/nitropack/dist/runtime/internal/error/utils')['defineNitroErrorHandler']
|
|
||||||
const defineNitroPlugin: typeof import('../../node_modules/nitropack/dist/runtime/internal/plugin')['defineNitroPlugin']
|
|
||||||
const defineNodeListener: typeof import('../../node_modules/h3')['defineNodeListener']
|
|
||||||
const defineNodeMiddleware: typeof import('../../node_modules/h3')['defineNodeMiddleware']
|
|
||||||
const defineRenderHandler: typeof import('../../node_modules/nitropack/dist/runtime/internal/renderer')['defineRenderHandler']
|
|
||||||
const defineRequestMiddleware: typeof import('../../node_modules/h3')['defineRequestMiddleware']
|
|
||||||
const defineResponseMiddleware: typeof import('../../node_modules/h3')['defineResponseMiddleware']
|
|
||||||
const defineRouteMeta: typeof import('../../node_modules/nitropack/dist/runtime/internal/meta')['defineRouteMeta']
|
|
||||||
const defineTask: typeof import('../../node_modules/nitropack/dist/runtime/internal/task')['defineTask']
|
|
||||||
const defineWebSocket: typeof import('../../node_modules/h3')['defineWebSocket']
|
|
||||||
const defineWebSocketHandler: typeof import('../../node_modules/h3')['defineWebSocketHandler']
|
|
||||||
const deleteCookie: typeof import('../../node_modules/h3')['deleteCookie']
|
|
||||||
const dynamicEventHandler: typeof import('../../node_modules/h3')['dynamicEventHandler']
|
|
||||||
const eventHandler: typeof import('../../node_modules/h3')['eventHandler']
|
|
||||||
const fetchWithEvent: typeof import('../../node_modules/h3')['fetchWithEvent']
|
|
||||||
const fromNodeMiddleware: typeof import('../../node_modules/h3')['fromNodeMiddleware']
|
|
||||||
const fromPlainHandler: typeof import('../../node_modules/h3')['fromPlainHandler']
|
|
||||||
const fromWebHandler: typeof import('../../node_modules/h3')['fromWebHandler']
|
|
||||||
const getCookie: typeof import('../../node_modules/h3')['getCookie']
|
|
||||||
const getHeader: typeof import('../../node_modules/h3')['getHeader']
|
|
||||||
const getHeaders: typeof import('../../node_modules/h3')['getHeaders']
|
|
||||||
const getMethod: typeof import('../../node_modules/h3')['getMethod']
|
|
||||||
const getProxyRequestHeaders: typeof import('../../node_modules/h3')['getProxyRequestHeaders']
|
|
||||||
const getQuery: typeof import('../../node_modules/h3')['getQuery']
|
|
||||||
const getRequestFingerprint: typeof import('../../node_modules/h3')['getRequestFingerprint']
|
|
||||||
const getRequestHeader: typeof import('../../node_modules/h3')['getRequestHeader']
|
|
||||||
const getRequestHeaders: typeof import('../../node_modules/h3')['getRequestHeaders']
|
|
||||||
const getRequestHost: typeof import('../../node_modules/h3')['getRequestHost']
|
|
||||||
const getRequestIP: typeof import('../../node_modules/h3')['getRequestIP']
|
|
||||||
const getRequestPath: typeof import('../../node_modules/h3')['getRequestPath']
|
|
||||||
const getRequestProtocol: typeof import('../../node_modules/h3')['getRequestProtocol']
|
|
||||||
const getRequestURL: typeof import('../../node_modules/h3')['getRequestURL']
|
|
||||||
const getRequestWebStream: typeof import('../../node_modules/h3')['getRequestWebStream']
|
|
||||||
const getResponseHeader: typeof import('../../node_modules/h3')['getResponseHeader']
|
|
||||||
const getResponseHeaders: typeof import('../../node_modules/h3')['getResponseHeaders']
|
|
||||||
const getResponseStatus: typeof import('../../node_modules/h3')['getResponseStatus']
|
|
||||||
const getResponseStatusText: typeof import('../../node_modules/h3')['getResponseStatusText']
|
|
||||||
const getRouteRules: typeof import('../../node_modules/nitropack/dist/runtime/internal/route-rules')['getRouteRules']
|
|
||||||
const getRouterParam: typeof import('../../node_modules/h3')['getRouterParam']
|
|
||||||
const getRouterParams: typeof import('../../node_modules/h3')['getRouterParams']
|
|
||||||
const getSession: typeof import('../../node_modules/h3')['getSession']
|
|
||||||
const getValidatedQuery: typeof import('../../node_modules/h3')['getValidatedQuery']
|
|
||||||
const getValidatedRouterParams: typeof import('../../node_modules/h3')['getValidatedRouterParams']
|
|
||||||
const handleCacheHeaders: typeof import('../../node_modules/h3')['handleCacheHeaders']
|
|
||||||
const handleCors: typeof import('../../node_modules/h3')['handleCors']
|
|
||||||
const isCorsOriginAllowed: typeof import('../../node_modules/h3')['isCorsOriginAllowed']
|
|
||||||
const isError: typeof import('../../node_modules/h3')['isError']
|
|
||||||
const isEvent: typeof import('../../node_modules/h3')['isEvent']
|
|
||||||
const isEventHandler: typeof import('../../node_modules/h3')['isEventHandler']
|
|
||||||
const isMethod: typeof import('../../node_modules/h3')['isMethod']
|
|
||||||
const isPreflightRequest: typeof import('../../node_modules/h3')['isPreflightRequest']
|
|
||||||
const isStream: typeof import('../../node_modules/h3')['isStream']
|
|
||||||
const isWebResponse: typeof import('../../node_modules/h3')['isWebResponse']
|
|
||||||
const lazyEventHandler: typeof import('../../node_modules/h3')['lazyEventHandler']
|
|
||||||
const nitroPlugin: typeof import('../../node_modules/nitropack/dist/runtime/internal/plugin')['nitroPlugin']
|
|
||||||
const parseCookies: typeof import('../../node_modules/h3')['parseCookies']
|
|
||||||
const promisifyNodeListener: typeof import('../../node_modules/h3')['promisifyNodeListener']
|
|
||||||
const proxyRequest: typeof import('../../node_modules/h3')['proxyRequest']
|
|
||||||
const readBody: typeof import('../../node_modules/h3')['readBody']
|
|
||||||
const readFormData: typeof import('../../node_modules/h3')['readFormData']
|
|
||||||
const readMultipartFormData: typeof import('../../node_modules/h3')['readMultipartFormData']
|
|
||||||
const readRawBody: typeof import('../../node_modules/h3')['readRawBody']
|
|
||||||
const readValidatedBody: typeof import('../../node_modules/h3')['readValidatedBody']
|
|
||||||
const removeResponseHeader: typeof import('../../node_modules/h3')['removeResponseHeader']
|
|
||||||
const runTask: typeof import('../../node_modules/nitropack/dist/runtime/internal/task')['runTask']
|
|
||||||
const sanitizeStatusCode: typeof import('../../node_modules/h3')['sanitizeStatusCode']
|
|
||||||
const sanitizeStatusMessage: typeof import('../../node_modules/h3')['sanitizeStatusMessage']
|
|
||||||
const sealSession: typeof import('../../node_modules/h3')['sealSession']
|
|
||||||
const send: typeof import('../../node_modules/h3')['send']
|
|
||||||
const sendError: typeof import('../../node_modules/h3')['sendError']
|
|
||||||
const sendIterable: typeof import('../../node_modules/h3')['sendIterable']
|
|
||||||
const sendNoContent: typeof import('../../node_modules/h3')['sendNoContent']
|
|
||||||
const sendProxy: typeof import('../../node_modules/h3')['sendProxy']
|
|
||||||
const sendRedirect: typeof import('../../node_modules/h3')['sendRedirect']
|
|
||||||
const sendStream: typeof import('../../node_modules/h3')['sendStream']
|
|
||||||
const sendWebResponse: typeof import('../../node_modules/h3')['sendWebResponse']
|
|
||||||
const serveStatic: typeof import('../../node_modules/h3')['serveStatic']
|
|
||||||
const setCookie: typeof import('../../node_modules/h3')['setCookie']
|
|
||||||
const setHeader: typeof import('../../node_modules/h3')['setHeader']
|
|
||||||
const setHeaders: typeof import('../../node_modules/h3')['setHeaders']
|
|
||||||
const setResponseHeader: typeof import('../../node_modules/h3')['setResponseHeader']
|
|
||||||
const setResponseHeaders: typeof import('../../node_modules/h3')['setResponseHeaders']
|
|
||||||
const setResponseStatus: typeof import('../../node_modules/h3')['setResponseStatus']
|
|
||||||
const splitCookiesString: typeof import('../../node_modules/h3')['splitCookiesString']
|
|
||||||
const toEventHandler: typeof import('../../node_modules/h3')['toEventHandler']
|
|
||||||
const toNodeListener: typeof import('../../node_modules/h3')['toNodeListener']
|
|
||||||
const toPlainHandler: typeof import('../../node_modules/h3')['toPlainHandler']
|
|
||||||
const toWebHandler: typeof import('../../node_modules/h3')['toWebHandler']
|
|
||||||
const toWebRequest: typeof import('../../node_modules/h3')['toWebRequest']
|
|
||||||
const unsealSession: typeof import('../../node_modules/h3')['unsealSession']
|
|
||||||
const updateSession: typeof import('../../node_modules/h3')['updateSession']
|
|
||||||
const useAppConfig: typeof import('../../node_modules/nitropack/dist/runtime/internal/config')['useAppConfig']
|
|
||||||
const useBase: typeof import('../../node_modules/h3')['useBase']
|
|
||||||
const useEvent: typeof import('../../node_modules/nitropack/dist/runtime/internal/context')['useEvent']
|
|
||||||
const useNitroApp: typeof import('../../node_modules/nitropack/dist/runtime/internal/app')['useNitroApp']
|
|
||||||
const useRuntimeConfig: typeof import('../../node_modules/nitropack/dist/runtime/internal/config')['useRuntimeConfig']
|
|
||||||
const useSession: typeof import('../../node_modules/h3')['useSession']
|
|
||||||
const useStorage: typeof import('../../node_modules/nitropack/dist/runtime/internal/storage')['useStorage']
|
|
||||||
const writeEarlyHints: typeof import('../../node_modules/h3')['writeEarlyHints']
|
|
||||||
}
|
|
||||||
export { useNitroApp } from 'nitropack/runtime/internal/app';
|
|
||||||
export { useRuntimeConfig, useAppConfig } from 'nitropack/runtime/internal/config';
|
|
||||||
export { defineNitroPlugin, nitroPlugin } from 'nitropack/runtime/internal/plugin';
|
|
||||||
export { defineCachedFunction, defineCachedEventHandler, cachedFunction, cachedEventHandler } from 'nitropack/runtime/internal/cache';
|
|
||||||
export { useStorage } from 'nitropack/runtime/internal/storage';
|
|
||||||
export { defineRenderHandler } from 'nitropack/runtime/internal/renderer';
|
|
||||||
export { defineRouteMeta } from 'nitropack/runtime/internal/meta';
|
|
||||||
export { getRouteRules } from 'nitropack/runtime/internal/route-rules';
|
|
||||||
export { useEvent } from 'nitropack/runtime/internal/context';
|
|
||||||
export { defineTask, runTask } from 'nitropack/runtime/internal/task';
|
|
||||||
export { defineNitroErrorHandler } from 'nitropack/runtime/internal/error/utils';
|
|
||||||
export { appendCorsHeaders, appendCorsPreflightHeaders, appendHeader, appendHeaders, appendResponseHeader, appendResponseHeaders, assertMethod, callNodeListener, clearResponseHeaders, clearSession, createApp, createAppEventHandler, createError, createEvent, createEventStream, createRouter, defaultContentType, defineEventHandler, defineLazyEventHandler, defineNodeListener, defineNodeMiddleware, defineRequestMiddleware, defineResponseMiddleware, defineWebSocket, defineWebSocketHandler, deleteCookie, dynamicEventHandler, eventHandler, fetchWithEvent, fromNodeMiddleware, fromPlainHandler, fromWebHandler, getCookie, getHeader, getHeaders, getMethod, getProxyRequestHeaders, getQuery, getRequestFingerprint, getRequestHeader, getRequestHeaders, getRequestHost, getRequestIP, getRequestPath, getRequestProtocol, getRequestURL, getRequestWebStream, getResponseHeader, getResponseHeaders, getResponseStatus, getResponseStatusText, getRouterParam, getRouterParams, getSession, getValidatedQuery, getValidatedRouterParams, handleCacheHeaders, handleCors, isCorsOriginAllowed, isError, isEvent, isEventHandler, isMethod, isPreflightRequest, isStream, isWebResponse, lazyEventHandler, parseCookies, promisifyNodeListener, proxyRequest, readBody, readFormData, readMultipartFormData, readRawBody, readValidatedBody, removeResponseHeader, sanitizeStatusCode, sanitizeStatusMessage, sealSession, send, sendError, sendIterable, sendNoContent, sendProxy, sendRedirect, sendStream, sendWebResponse, serveStatic, setCookie, setHeader, setHeaders, setResponseHeader, setResponseHeaders, setResponseStatus, splitCookiesString, toEventHandler, toNodeListener, toPlainHandler, toWebHandler, toWebRequest, unsealSession, updateSession, useBase, useSession, writeEarlyHints } from 'h3';
|
|
||||||
export { buildAssetsURL as __buildAssetsURL, publicAssetsURL as __publicAssetsURL } from 'F:/Goproject/golang-template/examples/nuxt3-websocket-client/node_modules/nuxt/dist/core/runtime/nitro/utils/paths';
|
|
||||||
export { defineAppConfig } from 'F:/Goproject/golang-template/examples/nuxt3-websocket-client/node_modules/nuxt/dist/core/runtime/nitro/utils/config';
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
export type MiddlewareKey = never
|
|
||||||
declare module 'nitropack' {
|
|
||||||
interface NitroRouteConfig {
|
|
||||||
appMiddleware?: MiddlewareKey | MiddlewareKey[] | Record<MiddlewareKey, boolean>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
|
|
||||||
/// <reference path="nitro-middleware.d.ts" />
|
|
||||||
/// <reference path="./schema.d.ts" />
|
|
||||||
|
|
||||||
import type { RuntimeConfig } from 'nuxt/schema'
|
|
||||||
import type { H3Event } from 'h3'
|
|
||||||
import type { LogObject } from 'consola'
|
|
||||||
import type { NuxtIslandContext, NuxtIslandResponse, NuxtRenderHTMLContext } from 'nuxt/app'
|
|
||||||
|
|
||||||
declare module 'nitropack' {
|
|
||||||
interface NitroRuntimeConfigApp {
|
|
||||||
buildAssetsDir: string
|
|
||||||
cdnURL: string
|
|
||||||
}
|
|
||||||
interface NitroRuntimeConfig extends RuntimeConfig {}
|
|
||||||
interface NitroRouteConfig {
|
|
||||||
ssr?: boolean
|
|
||||||
noScripts?: boolean
|
|
||||||
/** @deprecated Use `noScripts` instead */
|
|
||||||
experimentalNoScripts?: boolean
|
|
||||||
}
|
|
||||||
interface NitroRouteRules {
|
|
||||||
ssr?: boolean
|
|
||||||
noScripts?: boolean
|
|
||||||
/** @deprecated Use `noScripts` instead */
|
|
||||||
experimentalNoScripts?: boolean
|
|
||||||
appMiddleware?: Record<string, boolean>
|
|
||||||
}
|
|
||||||
interface NitroRuntimeHooks {
|
|
||||||
'dev:ssr-logs': (ctx: { logs: LogObject[], path: string }) => void | Promise<void>
|
|
||||||
'render:html': (htmlContext: NuxtRenderHTMLContext, context: { event: H3Event }) => void | Promise<void>
|
|
||||||
'render:island': (islandResponse: NuxtIslandResponse, context: { event: H3Event, islandContext: NuxtIslandContext }) => void | Promise<void>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
// Generated by nitro
|
|
||||||
import type { Serialize, Simplify } from "nitropack/types";
|
|
||||||
declare module "nitropack/types" {
|
|
||||||
type Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T
|
|
||||||
interface InternalApi {
|
|
||||||
'/__nuxt_error': {
|
|
||||||
'default': Simplify<Serialize<Awaited<ReturnType<typeof import('../../node_modules/nuxt/dist/core/runtime/nitro/handlers/renderer').default>>>>
|
|
||||||
}
|
|
||||||
'/__nuxt_island/**': {
|
|
||||||
'default': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/#internal/nuxt/island-renderer').default>>>>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export {}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
/// <reference path="./nitro-routes.d.ts" />
|
|
||||||
/// <reference path="./nitro-config.d.ts" />
|
|
||||||
/// <reference path="./nitro-imports.d.ts" />
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
// Generated by Nuxt'
|
|
||||||
import type { Plugin } from '#app'
|
|
||||||
|
|
||||||
type Decorate<T extends Record<string, any>> = { [K in keyof T as K extends string ? `$${K}` : never]: T[K] }
|
|
||||||
|
|
||||||
type InjectionType<A extends Plugin> = A extends {default: Plugin<infer T>} ? Decorate<T> : unknown
|
|
||||||
|
|
||||||
type NuxtAppInjections =
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/revive-payload.client.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/head/runtime/plugins/unhead.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/pages/runtime/plugins/router.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/browser-devtools-timing.client.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/navigation-repaint.client.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/check-outdated-build.client.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/revive-payload.server.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/chunk-reload.client.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/pages/runtime/plugins/prefetch.client.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/pages/runtime/plugins/check-if-page-unused.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.server.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.client.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/dev-server-logs.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/warn.dev.server.js")> &
|
|
||||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/check-if-layout-used.js")>
|
|
||||||
|
|
||||||
declare module '#app' {
|
|
||||||
interface NuxtApp extends NuxtAppInjections { }
|
|
||||||
|
|
||||||
interface NuxtAppLiterals {
|
|
||||||
pluginName: 'vue-devtools-client' | 'nuxt:revive-payload:client' | 'nuxt:head' | 'nuxt:router' | 'nuxt:browser-devtools-timing' | 'nuxt:revive-payload:server' | 'nuxt:chunk-reload' | 'nuxt:global-components' | 'nuxt:prefetch' | 'nuxt:checkIfPageUnused' | 'nuxt:checkIfLayoutUsed'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module 'vue' {
|
|
||||||
interface ComponentCustomProperties extends NuxtAppInjections { }
|
|
||||||
}
|
|
||||||
|
|
||||||
export { }
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
import { NuxtModule, ModuleDependencyMeta, RuntimeConfig } from '@nuxt/schema'
|
|
||||||
declare module '@nuxt/schema' {
|
|
||||||
interface ModuleDependencies {
|
|
||||||
["@nuxtjs/tailwindcss"]?: ModuleDependencyMeta<typeof import("@nuxtjs/tailwindcss").default extends NuxtModule<infer O> ? O : Record<string, unknown>>
|
|
||||||
["@nuxt/devtools"]?: ModuleDependencyMeta<typeof import("@nuxt/devtools").default extends NuxtModule<infer O> ? O : Record<string, unknown>>
|
|
||||||
["@nuxt/telemetry"]?: ModuleDependencyMeta<typeof import("@nuxt/telemetry").default extends NuxtModule<infer O> ? O : Record<string, unknown>>
|
|
||||||
}
|
|
||||||
interface NuxtOptions {
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxtjs/tailwindcss`
|
|
||||||
*/
|
|
||||||
["tailwindcss"]: typeof import("@nuxtjs/tailwindcss").default extends NuxtModule<infer O, unknown, boolean> ? O : Record<string, any>
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxt/devtools`
|
|
||||||
*/
|
|
||||||
["devtools"]: typeof import("@nuxt/devtools").default extends NuxtModule<infer O, unknown, boolean> ? O : Record<string, any>
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxt/telemetry`
|
|
||||||
*/
|
|
||||||
["telemetry"]: typeof import("@nuxt/telemetry").default extends NuxtModule<infer O, unknown, boolean> ? O : Record<string, any>
|
|
||||||
}
|
|
||||||
interface NuxtConfig {
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxtjs/tailwindcss`
|
|
||||||
*/
|
|
||||||
["tailwindcss"]?: typeof import("@nuxtjs/tailwindcss").default extends NuxtModule<infer O, unknown, boolean> ? Partial<O> : Record<string, any>
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxt/devtools`
|
|
||||||
*/
|
|
||||||
["devtools"]?: typeof import("@nuxt/devtools").default extends NuxtModule<infer O, unknown, boolean> ? Partial<O> : Record<string, any>
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxt/telemetry`
|
|
||||||
*/
|
|
||||||
["telemetry"]?: typeof import("@nuxt/telemetry").default extends NuxtModule<infer O, unknown, boolean> ? Partial<O> : Record<string, any>
|
|
||||||
modules?: (undefined | null | false | NuxtModule<any> | string | [NuxtModule | string, Record<string, any>] | ["@nuxtjs/tailwindcss", Exclude<NuxtConfig["tailwindcss"], boolean>] | ["@nuxt/devtools", Exclude<NuxtConfig["devtools"], boolean>] | ["@nuxt/telemetry", Exclude<NuxtConfig["telemetry"], boolean>])[],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
declare module 'nuxt/schema' {
|
|
||||||
interface ModuleDependencies {
|
|
||||||
["@nuxtjs/tailwindcss"]?: ModuleDependencyMeta<typeof import("@nuxtjs/tailwindcss").default extends NuxtModule<infer O> ? O : Record<string, unknown>>
|
|
||||||
["@nuxt/devtools"]?: ModuleDependencyMeta<typeof import("@nuxt/devtools").default extends NuxtModule<infer O> ? O : Record<string, unknown>>
|
|
||||||
["@nuxt/telemetry"]?: ModuleDependencyMeta<typeof import("@nuxt/telemetry").default extends NuxtModule<infer O> ? O : Record<string, unknown>>
|
|
||||||
}
|
|
||||||
interface NuxtOptions {
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxtjs/tailwindcss`
|
|
||||||
* @see https://www.npmjs.com/package/@nuxtjs/tailwindcss
|
|
||||||
*/
|
|
||||||
["tailwindcss"]: typeof import("@nuxtjs/tailwindcss").default extends NuxtModule<infer O, unknown, boolean> ? O : Record<string, any>
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxt/devtools`
|
|
||||||
* @see https://www.npmjs.com/package/@nuxt/devtools
|
|
||||||
*/
|
|
||||||
["devtools"]: typeof import("@nuxt/devtools").default extends NuxtModule<infer O, unknown, boolean> ? O : Record<string, any>
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxt/telemetry`
|
|
||||||
* @see https://www.npmjs.com/package/@nuxt/telemetry
|
|
||||||
*/
|
|
||||||
["telemetry"]: typeof import("@nuxt/telemetry").default extends NuxtModule<infer O, unknown, boolean> ? O : Record<string, any>
|
|
||||||
}
|
|
||||||
interface NuxtConfig {
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxtjs/tailwindcss`
|
|
||||||
* @see https://www.npmjs.com/package/@nuxtjs/tailwindcss
|
|
||||||
*/
|
|
||||||
["tailwindcss"]?: typeof import("@nuxtjs/tailwindcss").default extends NuxtModule<infer O, unknown, boolean> ? Partial<O> : Record<string, any>
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxt/devtools`
|
|
||||||
* @see https://www.npmjs.com/package/@nuxt/devtools
|
|
||||||
*/
|
|
||||||
["devtools"]?: typeof import("@nuxt/devtools").default extends NuxtModule<infer O, unknown, boolean> ? Partial<O> : Record<string, any>
|
|
||||||
/**
|
|
||||||
* Configuration for `@nuxt/telemetry`
|
|
||||||
* @see https://www.npmjs.com/package/@nuxt/telemetry
|
|
||||||
*/
|
|
||||||
["telemetry"]?: typeof import("@nuxt/telemetry").default extends NuxtModule<infer O, unknown, boolean> ? Partial<O> : Record<string, any>
|
|
||||||
modules?: (undefined | null | false | NuxtModule<any> | string | [NuxtModule | string, Record<string, any>] | ["@nuxtjs/tailwindcss", Exclude<NuxtConfig["tailwindcss"], boolean>] | ["@nuxt/devtools", Exclude<NuxtConfig["devtools"], boolean>] | ["@nuxt/telemetry", Exclude<NuxtConfig["telemetry"], boolean>])[],
|
|
||||||
}
|
|
||||||
interface RuntimeConfig {
|
|
||||||
app: {
|
|
||||||
buildId: string,
|
|
||||||
|
|
||||||
baseURL: string,
|
|
||||||
|
|
||||||
buildAssetsDir: string,
|
|
||||||
|
|
||||||
cdnURL: string,
|
|
||||||
},
|
|
||||||
|
|
||||||
nitro: {
|
|
||||||
envPrefix: string,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
interface PublicRuntimeConfig {
|
|
||||||
websocketUrl: string,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
declare module 'vue' {
|
|
||||||
interface ComponentCustomProperties {
|
|
||||||
$config: RuntimeConfig
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
# Nuxt 3 WebSocket Client Example
|
|
||||||
|
|
||||||
This is an example Nuxt 3 application that demonstrates how to connect to and communicate with the Go WebSocket server.
|
|
||||||
|
|
||||||
## Setup
|
|
||||||
|
|
||||||
1. Install dependencies:
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Start the development server:
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Open your browser and navigate to `http://localhost:3000`
|
|
||||||
|
|
||||||
## Configuration
|
|
||||||
|
|
||||||
The WebSocket URL can be configured in `nuxt.config.ts`:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
runtimeConfig: {
|
|
||||||
public: {
|
|
||||||
websocketUrl: process.env.WEBSOCKET_URL || 'ws://localhost:8080/api/v1/ws'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
You can also set the `WEBSOCKET_URL` environment variable.
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
The example page (`pages/index.vue`) shows:
|
|
||||||
|
|
||||||
- Connection status
|
|
||||||
- Sending messages to the server
|
|
||||||
- Receiving and displaying messages from the server
|
|
||||||
|
|
||||||
## WebSocket Message Format
|
|
||||||
|
|
||||||
Messages are sent and received in JSON format:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"type": "message",
|
|
||||||
"data": "Your message content",
|
|
||||||
"timestamp": "2024-01-01T00:00:00Z",
|
|
||||||
"client_id": "unique-client-id"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
- Automatic connection on page load
|
|
||||||
- Real-time message display
|
|
||||||
- Connection status indicator
|
|
||||||
- Error handling
|
|
||||||
- Clean disconnection on page unload
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.websocket-connected {
|
|
||||||
@apply text-green-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.websocket-disconnected {
|
|
||||||
@apply text-red-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-list {
|
|
||||||
@apply max-h-96 overflow-y-auto border rounded p-4 bg-gray-50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-item {
|
|
||||||
@apply mb-2 p-2 bg-white rounded shadow-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-input {
|
|
||||||
@apply border border-gray-300 rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-button {
|
|
||||||
@apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500;
|
|
||||||
}
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
import { ref, onMounted, onUnmounted } from "vue";
|
|
||||||
|
|
||||||
export function useWebSocket(url) {
|
|
||||||
const socket = ref(null);
|
|
||||||
const messages = ref([]);
|
|
||||||
const isConnected = ref(false);
|
|
||||||
const error = ref(null);
|
|
||||||
|
|
||||||
function connect() {
|
|
||||||
socket.value = new WebSocket(url);
|
|
||||||
|
|
||||||
socket.value.onopen = () => {
|
|
||||||
isConnected.value = true;
|
|
||||||
console.log("WebSocket connected");
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.value.onmessage = (event) => {
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
messages.value.push(data);
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Failed to parse message", e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.value.onerror = (event) => {
|
|
||||||
error.value = "WebSocket error";
|
|
||||||
console.error("WebSocket error", event);
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.value.onclose = () => {
|
|
||||||
isConnected.value = false;
|
|
||||||
console.log("WebSocket disconnected");
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function sendMessage(message) {
|
|
||||||
if (socket.value && isConnected.value) {
|
|
||||||
socket.value.send(JSON.stringify(message));
|
|
||||||
} else {
|
|
||||||
console.warn("WebSocket is not connected");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
connect();
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (socket.value) {
|
|
||||||
socket.value.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
socket,
|
|
||||||
messages,
|
|
||||||
isConnected,
|
|
||||||
error,
|
|
||||||
sendMessage,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
export default defineNuxtConfig({
|
|
||||||
devtools: { enabled: true },
|
|
||||||
modules: ["@nuxtjs/tailwindcss"],
|
|
||||||
css: ["~/assets/css/main.css"],
|
|
||||||
runtimeConfig: {
|
|
||||||
public: {
|
|
||||||
websocketUrl:
|
|
||||||
process.env.WEBSOCKET_URL || "ws://localhost:8080/api/v1/ws",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="p-4">
|
|
||||||
<h1 class="text-2xl font-bold mb-4">Nuxt 3 WebSocket Client Example</h1>
|
|
||||||
<p>
|
|
||||||
Status:
|
|
||||||
<span :class="isConnected ? 'text-green-600' : 'text-red-600'">{{
|
|
||||||
isConnected ? "Connected" : "Disconnected"
|
|
||||||
}}</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="mt-4">
|
|
||||||
<input
|
|
||||||
v-model="inputMessage"
|
|
||||||
placeholder="Type a message"
|
|
||||||
class="border p-2 rounded w-full"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
@click="send"
|
|
||||||
class="mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Send
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-6">
|
|
||||||
<h2 class="text-xl font-semibold mb-2">Messages</h2>
|
|
||||||
<ul class="list-disc pl-5 max-h-64 overflow-y-auto">
|
|
||||||
<li v-for="(msg, index) in messages" :key="index">
|
|
||||||
<pre>{{ msg }}</pre>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch } from "vue";
|
|
||||||
import { useRuntimeConfig } from "#app";
|
|
||||||
import { useWebSocket } from "~/composables/useWebSocket";
|
|
||||||
|
|
||||||
const config = useRuntimeConfig();
|
|
||||||
const wsUrl = config.public.websocketUrl;
|
|
||||||
|
|
||||||
const { messages, isConnected, sendMessage } = useWebSocket(wsUrl);
|
|
||||||
|
|
||||||
const inputMessage = ref("");
|
|
||||||
|
|
||||||
function send() {
|
|
||||||
if (inputMessage.value.trim() !== "") {
|
|
||||||
sendMessage({ type: "message", data: inputMessage.value });
|
|
||||||
inputMessage.value = "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
pre {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user