You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

189 lines
7.8 KiB

@{
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>
}