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

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">WebSocket测试</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">连接状态</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()">连接</button>
                                        <button type="button" class="btn btn-danger" id="disconnectBtn" onclick="disconnect()" style="display:none;">断开</button>
                                    </div>
                                    <div class="mt-3">
                                        <span class="badge" id="statusBadge">未连接</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">消息发送</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>发送</button>
                                        <button type="button" class="btn btn-secondary" onclick="clearMessages()">清空消息</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">消息日志</h5>
                                </div>
                                <div class="card-body">
                                    <div id="messageLog" style="height: 400px; overflow-y: auto; background-color: #f8f9fa; padding: 10px; border-radius: 5px;">
                                        <div class="text-muted">等待连接...</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 = 'mb-2';
            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 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>
}