update clietn
This commit is contained in:
@@ -1,18 +1,50 @@
|
||||
<template>
|
||||
<div class="messaging-tab">
|
||||
<!-- Connection Status -->
|
||||
<div class="connection-status" :class="connectionState.connectionStatus">
|
||||
<div class="status-indicator">
|
||||
<div class="status-dot" :class="connectionState.connectionStatus"></div>
|
||||
<span class="status-text">
|
||||
{{
|
||||
connectionState.connectionStatus === "connected"
|
||||
? "Connected"
|
||||
: connectionState.connectionStatus === "connecting"
|
||||
? "Connecting..."
|
||||
: connectionState.connectionStatus === "error"
|
||||
? "Connection Error"
|
||||
: "Disconnected"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="connection-details" v-if="connectionState.clientId">
|
||||
<span>Client ID: {{ connectionState.clientId }}</span>
|
||||
<span v-if="connectionState.currentRoom"
|
||||
>Room: {{ connectionState.currentRoom }}</span
|
||||
>
|
||||
<span v-if="connectionState.connectionLatency > 0"
|
||||
>Latency: {{ connectionState.connectionLatency }}ms</span
|
||||
>
|
||||
<span v-if="connectionState.connectionHealth"
|
||||
>Health: {{ connectionState.connectionHealth }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<label for="broadcastMessage">Broadcast Message</label>
|
||||
<textarea
|
||||
id="broadcastMessage"
|
||||
v-model="broadcastMessage"
|
||||
v-model="messageText"
|
||||
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>
|
||||
<label for="targetClientId"
|
||||
>Target Client ID (for direct messages)</label
|
||||
>
|
||||
<input
|
||||
id="targetClientId"
|
||||
v-model="targetClientId"
|
||||
@@ -45,16 +77,18 @@
|
||||
<div class="controls">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="!isConnected || !broadcastMessage.trim()"
|
||||
@click="sendBroadcast"
|
||||
:disabled="!isConnected || !messageText.trim()"
|
||||
@click="handleSendBroadcast"
|
||||
>
|
||||
Send Broadcast
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-info"
|
||||
:disabled="!isConnected || !targetClientId.trim() || !broadcastMessage.trim()"
|
||||
@click="sendDirectMessage"
|
||||
:disabled="
|
||||
!isConnected || !targetClientId.trim() || !messageText.trim()
|
||||
"
|
||||
@click="handleSendDirectMessage"
|
||||
>
|
||||
Send Direct Message
|
||||
</button>
|
||||
@@ -62,7 +96,7 @@
|
||||
<button
|
||||
class="btn btn-success"
|
||||
:disabled="!isConnected || !targetRoom.trim() || !roomMessage.trim()"
|
||||
@click="sendRoomMessage"
|
||||
@click="handleSendRoomMessage"
|
||||
>
|
||||
Send Room Message
|
||||
</button>
|
||||
@@ -93,17 +127,11 @@
|
||||
Get Server Info
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
@click="clearMessages"
|
||||
>
|
||||
<button class="btn btn-secondary" @click="clearMessages">
|
||||
Clear Messages
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
@click="clearActivityLog"
|
||||
>
|
||||
<button class="btn btn-secondary" @click="clearActivityLog">
|
||||
Clear Activity Log
|
||||
</button>
|
||||
</div>
|
||||
@@ -116,7 +144,9 @@
|
||||
v-for="user in onlineUsers"
|
||||
:key="user.client_id"
|
||||
class="user-item"
|
||||
:class="{ 'current-user': user.client_id === connectionState.clientId }"
|
||||
:class="{
|
||||
'current-user': user.client_id === connectionState.clientId,
|
||||
}"
|
||||
>
|
||||
<div class="user-info">
|
||||
<div class="user-id">{{ user.client_id }}</div>
|
||||
@@ -160,57 +190,67 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useWebSocket } from '../../composables/useWebSocket'
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useWebSocket } from "../../composables/useWebSocket";
|
||||
|
||||
const {
|
||||
isConnected,
|
||||
connectionState,
|
||||
onlineUsers,
|
||||
activityLog,
|
||||
broadcastMessage: broadcastMessageFn,
|
||||
sendDirectMessage: sendDirectMessageFn,
|
||||
sendRoomMessage: sendRoomMessageFn,
|
||||
broadcastMessage,
|
||||
sendDirectMessage,
|
||||
sendRoomMessage,
|
||||
sendHeartbeat,
|
||||
getOnlineUsers,
|
||||
getServerInfo,
|
||||
clearMessages,
|
||||
clearActivityLog
|
||||
} = useWebSocket()
|
||||
clearActivityLog,
|
||||
connect,
|
||||
} = useWebSocket();
|
||||
|
||||
const broadcastMessage = ref('')
|
||||
const targetClientId = ref('')
|
||||
const roomMessage = ref('')
|
||||
const targetRoom = ref('')
|
||||
const messageText = ref("");
|
||||
const targetClientId = ref("");
|
||||
const roomMessage = ref("");
|
||||
const targetRoom = ref("");
|
||||
|
||||
const sendBroadcast = () => {
|
||||
if (broadcastMessage.value.trim()) {
|
||||
broadcastMessageFn(broadcastMessage.value.trim())
|
||||
broadcastMessage.value = ''
|
||||
const handleSendBroadcast = () => {
|
||||
if (messageText.value.trim()) {
|
||||
broadcastMessage(messageText.value.trim());
|
||||
messageText.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const sendDirectMessage = () => {
|
||||
if (targetClientId.value.trim() && broadcastMessage.value.trim()) {
|
||||
sendDirectMessageFn(targetClientId.value.trim(), broadcastMessage.value.trim())
|
||||
broadcastMessage.value = ''
|
||||
const handleSendDirectMessage = () => {
|
||||
if (targetClientId.value.trim() && messageText.value.trim()) {
|
||||
sendDirectMessage(targetClientId.value.trim(), messageText.value.trim());
|
||||
messageText.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const sendRoomMessage = () => {
|
||||
const handleSendRoomMessage = () => {
|
||||
if (targetRoom.value.trim() && roomMessage.value.trim()) {
|
||||
sendRoomMessageFn(targetRoom.value.trim(), roomMessage.value.trim())
|
||||
roomMessage.value = ''
|
||||
sendRoomMessage(targetRoom.value.trim(), roomMessage.value.trim());
|
||||
roomMessage.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const setTargetClient = (clientId: string) => {
|
||||
targetClientId.value = clientId
|
||||
}
|
||||
targetClientId.value = clientId;
|
||||
};
|
||||
|
||||
const formatTime = (timestamp: number) => {
|
||||
return new Date(timestamp).toLocaleString()
|
||||
}
|
||||
return new Date(timestamp).toLocaleString();
|
||||
};
|
||||
|
||||
// Initialize connection on component mount
|
||||
onMounted(() => {
|
||||
console.log("MessagingTab mounted, initializing WebSocket connection...");
|
||||
if (!isConnected.value) {
|
||||
console.log("Attempting to connect to WebSocket...");
|
||||
connect();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -218,6 +258,98 @@ const formatTime = (timestamp: number) => {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* Connection Status Styles */
|
||||
.connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.connection-status.connected {
|
||||
background: #e8f5e8;
|
||||
border-color: #4caf50;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.connection-status.connecting {
|
||||
background: #fff3e0;
|
||||
border-color: #ff9800;
|
||||
color: #ef6c00;
|
||||
}
|
||||
|
||||
.connection-status.error {
|
||||
background: #ffebee;
|
||||
border-color: #f44336;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.connection-status.disconnected {
|
||||
background: #f5f5f5;
|
||||
border-color: #9e9e9e;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-dot.connected {
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
.status-dot.connecting {
|
||||
background: #ff9800;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.status-dot.error {
|
||||
background: #f44336;
|
||||
animation: pulse 0.5s infinite;
|
||||
}
|
||||
|
||||
.status-dot.disconnected {
|
||||
background: #9e9e9e;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.connection-details {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.connection-details span {
|
||||
padding: 4px 8px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
@@ -302,7 +434,7 @@ const formatTime = (timestamp: number) => {
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #FFC107;
|
||||
background: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user