TestLogs/LTEMvcApp/Views/Home/WebSocketTest.cshtml

@{
    ViewData["Title"] = "WebSocket测试";
}

<style>
    .websocket-test-container {
        max-width: 100%;
    }
    
    /* 页面内容滚动区域 */
    .websocket-scroll-area {
        max-height: calc(100vh - 300px); /* 固定最大高度，避免页面滚动 */
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px; /* 为滚动条留出空间 */
    }
    
    /* 自定义滚动条样式 */
    .websocket-scroll-area::-webkit-scrollbar {
        width: 8px;
    }
    
    .websocket-scroll-area::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    
    .websocket-scroll-area::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }
    
    .websocket-scroll-area::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-group label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    .form-control:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .btn {
        border-radius: 0.375rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .message-log {
        height: 350px; /* 调整高度以适应滚动区域 */
        overflow-y: auto;
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 0.5rem;
        border: 1px solid #dee2e6;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 0.9em;
    }
    
    .message-item {
        margin-bottom: 0.75rem;
        padding: 0.5rem;
        border-radius: 0.25rem;
        background-color: white;
        border-left: 3px solid #dee2e6;
    }
    
    .message-item.system {
        border-left-color: #6c757d;
    }
    
    .message-item.send {
        border-left-color: #007bff;
    }
    
    .message-item.receive {
        border-left-color: #28a745;
    }
    
    .message-item.error {
        border-left-color: #dc3545;
    }
    
    .status-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    
    .connection-panel {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 1px solid #dee2e6;
    }
    
    .message-panel {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 1px solid #dee2e6;
    }
    
    /* 响应式调整 */
    @@media (max-width: 768px) {
        .websocket-scroll-area {
            max-height: calc(100vh - 250px);
        }
        
        .message-log {
            height: 300px;
        }
    }
    
    @@media (max-width: 576px) {
        .websocket-scroll-area {
            max-height: calc(100vh - 200px);
        }
        
        .message-log {
            height: 250px;
        }
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-plug"></i> WebSocket测试
                    </h3>
                </div>
                <div class="card-body p-0">
                    <div class="websocket-scroll-area">
                        <div class="p-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card connection-panel">
                                        <div class="card-header">
                                            <h5 class="card-title">
                                                <i class="fas fa-link"></i> 连接状态
                                            </h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="serverUrl">服务器地址</label>
                                                <input type="text" class="form-control" id="serverUrl" value="ws://192.168.13.12:9001" placeholder="ws://localhost:9001">
                                            </div>
                                            <div class="form-group mt-3">
                                                <button type="button" class="btn btn-success" id="connectBtn" onclick="connect()">
                                                    <i class="fas fa-play"></i> 连接
                                                </button>
                                                <button type="button" class="btn btn-danger" id="disconnectBtn" onclick="disconnect()" style="display:none;">
                                                    <i class="fas fa-stop"></i> 断开
                                                </button>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge status-badge" id="statusBadge">未连接</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card message-panel">
                                        <div class="card-header">
                                            <h5 class="card-title">
                                                <i class="fas fa-paper-plane"></i> 消息发送
                                            </h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="messageInput">消息内容</label>
                                                <textarea class="form-control" id="messageInput" rows="3" placeholder="输入要发送的消息"></textarea>
                                            </div>
                                            <div class="form-group mt-3">
                                                <button type="button" class="btn btn-primary" onclick="sendMessage()" id="sendBtn" disabled>
                                                    <i class="fas fa-send"></i> 发送
                                                </button>
                                                <button type="button" class="btn btn-secondary" onclick="clearMessages()">
                                                    <i class="fas fa-trash"></i> 清空消息
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">
                                                <i class="fas fa-list"></i> 消息日志
                                            </h5>
                                        </div>
                                        <div class="card-body">
                                            <div id="messageLog" class="message-log">
                                                <div class="text-muted">等待连接...</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        var websocket = null;
        var messageLog = document.getElementById('messageLog');
        var statusBadge = document.getElementById('statusBadge');
        var connectBtn = document.getElementById('connectBtn');
        var disconnectBtn = document.getElementById('disconnectBtn');
        var sendBtn = document.getElementById('sendBtn');
        var messageInput = document.getElementById('messageInput');

        function connect() {
            var url = document.getElementById('serverUrl').value;
            if (!url) {
                alert('请输入服务器地址');
                return;
            }

            try {
                websocket = new WebSocket(url);
                
                websocket.onopen = function(event) {
                    updateStatus('已连接', 'success');
                    addMessage('系统', '连接已建立', 'success');
                    connectBtn.style.display = 'none';
                    disconnectBtn.style.display = 'inline-block';
                    sendBtn.disabled = false;
                };

                websocket.onmessage = function(event) {
                    addMessage('接收', event.data, 'info');
                };

                websocket.onclose = function(event) {
                    updateStatus('已断开', 'secondary');
                    addMessage('系统', '连接已断开', 'warning');
                    connectBtn.style.display = 'inline-block';
                    disconnectBtn.style.display = 'none';
                    sendBtn.disabled = true;
                };

                websocket.onerror = function(error) {
                    updateStatus('连接错误', 'danger');
                    addMessage('系统', '连接错误: ' + error, 'danger');
                };

            } catch (error) {
                alert('连接失败: ' + error.message);
            }
        }

        function disconnect() {
            if (websocket) {
                websocket.close();
                websocket = null;
            }
        }

        function sendMessage() {
            var message = messageInput.value.trim();
            if (!message) {
                alert('请输入要发送的消息');
                return;
            }

            if (websocket && websocket.readyState === WebSocket.OPEN) {
                websocket.send(message);
                addMessage('发送', message, 'primary');
                messageInput.value = '';
            } else {
                alert('WebSocket未连接');
            }
        }

        function addMessage(type, content, color) {
            var timestamp = new Date().toLocaleTimeString();
            var messageDiv = document.createElement('div');
            messageDiv.className = 'message-item ' + type.toLowerCase();
            messageDiv.innerHTML = `
                <small class="text-muted">[${timestamp}]</small>
                <span class="badge badge-${color}">${type}</span>
                <span class="ml-2">${escapeHtml(content)}</span>
            `;
            messageLog.appendChild(messageDiv);
            messageLog.scrollTop = messageLog.scrollHeight;
        }

        function updateStatus(status, color) {
            statusBadge.textContent = status;
            statusBadge.className = 'badge status-badge badge-' + color;
        }

        function clearMessages() {
            messageLog.innerHTML = '<div class="text-muted">消息已清空</div>';
        }

        function escapeHtml(text) {
            var div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // 回车键发送消息
        messageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });

        // 页面卸载时断开连接
        window.addEventListener('beforeunload', function() {
            if (websocket) {
                websocket.close();
            }
        });
    </script>
}