Nuxt cliet service
This commit is contained in:
@@ -821,7 +821,7 @@
|
||||
);
|
||||
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
|
||||
)}&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",
|
||||
"version": "1.0.0",
|
||||
"description": "Nuxt 3 WebSocket client example for Go WebSocket server",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
@@ -12,9 +11,17 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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": {
|
||||
"@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