TestLogs/LTEMvcApp/Views/Home/ClientMessages.cshtml

@{
    ViewData["Title"] = "客户端消息队列";
    var clientName = ViewBag.ClientName as string ?? "TestClient";
}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">客户端消息队列 - @clientName</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-primary btn-sm" onclick="refreshMessages()">
                            <i class="fas fa-sync-alt"></i> 刷新
                        </button>
                        <a href="@Url.Action("TestClientConfig", "Home")" class="btn btn-info btn-sm">
                            <i class="fas fa-cog"></i> 配置
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-paper-plane text-success"></i> 发送消息
                                        <span class="badge badge-primary" id="sentCount">0</span>
                                    </h5>
                                </div>
                                <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                                    <div id="sentMessages">
                                        <div class="text-muted text-center">
                                            <i class="fas fa-info-circle"></i> 暂无发送消息
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-download text-info"></i> 接收消息
                                        <span class="badge badge-info" id="receivedCount">0</span>
                                    </h5>
                                </div>
                                <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                                    <div id="receivedMessages">
                                        <div class="text-muted text-center">
                                            <i class="fas fa-info-circle"></i> 暂无接收消息
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        var clientName = '@clientName';
        var refreshInterval;

        $(document).ready(function() {
            loadMessages();
            // 每5秒自动刷新一次
            refreshInterval = setInterval(loadMessages, 5000);
        });

        function loadMessages() {
            $.ajax({
                url: '/api/websocket/clients/' + encodeURIComponent(clientName) + '/messages',
                type: 'GET',
                success: function(data) {
                    displayMessages(data);
                },
                error: function(xhr) {
                    if (xhr.status === 404) {
                        $('#sentMessages').html('<div class="text-warning text-center"><i class="fas fa-exclamation-triangle"></i> 客户端未连接</div>');
                        $('#receivedMessages').html('<div class="text-warning text-center"><i class="fas fa-exclamation-triangle"></i> 客户端未连接</div>');
                    } else {
                        $('#sentMessages').html('<div class="text-danger text-center"><i class="fas fa-times-circle"></i> 加载失败</div>');
                        $('#receivedMessages').html('<div class="text-danger text-center"><i class="fas fa-times-circle"></i> 加载失败</div>');
                    }
                }
            });
        }

        function displayMessages(data) {
            // 更新计数
            $('#sentCount').text(data.sentCount || 0);
            $('#receivedCount').text(data.receivedCount || 0);

            // 显示发送消息
            var sentHtml = '';
            if (data.sentMessages && data.sentMessages.length > 0) {
                data.sentMessages.forEach(function(message, index) {
                    sentHtml += createMessageCard(message, index, 'sent');
                });
            } else {
                sentHtml = '<div class="text-muted text-center"><i class="fas fa-info-circle"></i> 暂无发送消息</div>';
            }
            $('#sentMessages').html(sentHtml);

            // 显示接收消息
            var receivedHtml = '';
            if (data.receivedMessages && data.receivedMessages.length > 0) {
                data.receivedMessages.forEach(function(message, index) {
                    receivedHtml += createMessageCard(message, index, 'received');
                });
            } else {
                receivedHtml = '<div class="text-muted text-center"><i class="fas fa-info-circle"></i> 暂无接收消息</div>';
            }
            $('#receivedMessages').html(receivedHtml);

            // 高亮JSON语法
            $('pre code').each(function() {
                if (typeof hljs !== 'undefined') {
                    hljs.highlightElement(this);
                }
            });
        }

        function createMessageCard(message, index, type) {
            var timestamp = new Date().toLocaleTimeString();
            var messageType = type === 'sent' ? '发送' : '接收';
            var bgClass = type === 'sent' ? 'border-success' : 'border-info';
            var iconClass = type === 'sent' ? 'fas fa-paper-plane text-success' : 'fas fa-download text-info';

            return `
                <div class="card mb-2 ${bgClass}">
                    <div class="card-header py-2">
                        <small class="text-muted">
                            <i class="${iconClass}"></i> ${messageType} #${index + 1} - ${timestamp}
                        </small>
                        <button class="btn btn-sm btn-outline-secondary float-right" onclick="toggleMessage('${type}-${index}')">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                    <div class="card-body py-2" id="${type}-${index}" style="display: none;">
                        <pre><code class="json">${formatJson(message)}</code></pre>
                    </div>
                </div>
            `;
        }

        function toggleMessage(id) {
            $('#' + id).slideToggle();
        }

        function formatJson(jsonString) {
            try {
                var obj = JSON.parse(jsonString);
                return JSON.stringify(obj, null, 2);
            } catch (e) {
                return jsonString;
            }
        }

        function refreshMessages() {
            loadMessages();
        }

        // 页面卸载时清除定时器
        $(window).on('beforeunload', function() {
            if (refreshInterval) {
                clearInterval(refreshInterval);
            }
        });
    </script>

    <!-- 添加代码高亮支持 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
}