228 lines
8.3 KiB
Go
228 lines
8.3 KiB
Go
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<title>WebSocket 广播测试</title>
|
||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
|
||
<style>
|
||
body {
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.container {
|
||
background-color: white;
|
||
padding: 30px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
h2 {
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
}
|
||
#divShow {
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
margin-bottom: 20px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
background-color: #fafafa;
|
||
}
|
||
.client-info {
|
||
background-color: #e8f4f8;
|
||
padding: 8px;
|
||
margin-bottom: 10px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
.message-item {
|
||
margin-bottom: 8px;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
word-wrap: break-word;
|
||
}
|
||
.timestamp {
|
||
font-size: 11px;
|
||
color: #999;
|
||
margin-right: 10px;
|
||
}
|
||
.user-input {
|
||
margin-top: 15px;
|
||
}
|
||
.status-badge {
|
||
display: inline-block;
|
||
padding: 4px 8px;
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
margin-left: 10px;
|
||
}
|
||
.status-connected {
|
||
background-color: #5cb85c;
|
||
color: white;
|
||
}
|
||
.status-disconnected {
|
||
background-color: #d9534f;
|
||
color: white;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h2>
|
||
WebSocket 广播测试
|
||
<span id="statusBadge" class="status-badge status-disconnected">未连接</span>
|
||
</h2>
|
||
<div class="client-info" id="clientInfo">
|
||
客户端ID: <span id="clientId"></span> | 连接状态: <span id="connectionStatus">等待连接...</span>
|
||
</div>
|
||
<div class="list-group" id="divShow"></div>
|
||
<div class="user-input">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" id="txtContent" autofocus placeholder="输入要广播的消息...">
|
||
<span class="input-group-btn">
|
||
<button class="btn btn-primary" id="btnSend">发送广播</button>
|
||
</span>
|
||
</div>
|
||
<small class="text-muted" style="display: block; margin-top: 10px;">
|
||
提示：打开多个浏览器窗口或标签页，在一个窗口中发送消息，所有窗口都会收到广播消息
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
|
||
<script type="application/javascript">
|
||
// 生成客户端ID
|
||
const clientId = 'Client-' + Math.random().toString(36).substr(2, 9);
|
||
document.getElementById('clientId').textContent = clientId;
|
||
|
||
function showInfo(content) {
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const html = '<div class="list-group-item list-group-item-info message-item">' +
|
||
'<span class="timestamp">[' + timestamp + ']</span>' + content + '</div>';
|
||
$(html).appendTo("#divShow");
|
||
$("#divShow").scrollTop($("#divShow")[0].scrollHeight);
|
||
}
|
||
|
||
function showWarning(content) {
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const html = '<div class="list-group-item list-group-item-warning message-item">' +
|
||
'<span class="timestamp">[' + timestamp + ']</span>' + content + '</div>';
|
||
$(html).appendTo("#divShow");
|
||
$("#divShow").scrollTop($("#divShow")[0].scrollHeight);
|
||
}
|
||
|
||
function showSuccess(content) {
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const html = '<div class="list-group-item list-group-item-success message-item">' +
|
||
'<span class="timestamp">[' + timestamp + ']</span>' + content + '</div>';
|
||
$(html).appendTo("#divShow");
|
||
$("#divShow").scrollTop($("#divShow")[0].scrollHeight);
|
||
}
|
||
|
||
function showError(content) {
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const html = '<div class="list-group-item list-group-item-danger message-item">' +
|
||
'<span class="timestamp">[' + timestamp + ']</span>' + content + '</div>';
|
||
$(html).appendTo("#divShow");
|
||
$("#divShow").scrollTop($("#divShow")[0].scrollHeight);
|
||
}
|
||
|
||
function updateStatus(connected) {
|
||
const badge = $('#statusBadge');
|
||
const status = $('#connectionStatus');
|
||
if (connected) {
|
||
badge.removeClass('status-disconnected').addClass('status-connected').text('已连接');
|
||
status.text('已连接');
|
||
} else {
|
||
badge.removeClass('status-connected').addClass('status-disconnected').text('未连接');
|
||
status.text('未连接');
|
||
}
|
||
}
|
||
|
||
$(function () {
|
||
// 获取当前页面的协议和主机
|
||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
const host = window.location.host;
|
||
const url = protocol + "//" + host + "/ws";
|
||
let ws = new WebSocket(url);
|
||
|
||
try {
|
||
// WebSocket 连接成功
|
||
ws.onopen = function () {
|
||
updateStatus(true);
|
||
showInfo("✅ WebSocket 服务器 [" + url + "] 连接成功！客户端ID: " + clientId);
|
||
};
|
||
|
||
// WebSocket 连接关闭
|
||
ws.onclose = function () {
|
||
updateStatus(false);
|
||
if (ws) {
|
||
ws.close();
|
||
ws = null;
|
||
}
|
||
showError("❌ WebSocket 服务器 [" + url + "] 连接已关闭！");
|
||
};
|
||
|
||
// WebSocket 连接错误
|
||
ws.onerror = function () {
|
||
updateStatus(false);
|
||
if (ws) {
|
||
ws.close();
|
||
ws = null;
|
||
}
|
||
showError("❌ WebSocket 服务器 [" + url + "] 连接错误！");
|
||
};
|
||
|
||
// WebSocket 响应消息（接收广播）
|
||
ws.onmessage = function (event) {
|
||
try {
|
||
// 服务端使用 WriteJSON 发送，所以消息是 JSON 字符串
|
||
let message = event.data;
|
||
// 如果是 JSON 字符串，尝试解析
|
||
if (typeof message === 'string' && message.startsWith('"')) {
|
||
message = JSON.parse(message);
|
||
}
|
||
showWarning("📢 收到广播: " + message);
|
||
} catch (e) {
|
||
showWarning("📢 收到广播: " + event.data);
|
||
}
|
||
};
|
||
} catch (e) {
|
||
alert("连接错误: " + e.message);
|
||
}
|
||
|
||
// 点击发送消息
|
||
$("#btnSend").on("click", function () {
|
||
if (ws == null || ws.readyState !== WebSocket.OPEN) {
|
||
showError("WebSocket 服务器连接失败，请刷新页面！");
|
||
return;
|
||
}
|
||
const content = $.trim($("#txtContent").val());
|
||
if (content.length <= 0) {
|
||
alert("请输入要发送的内容！");
|
||
return;
|
||
}
|
||
|
||
// 发送 JSON 格式的消息（服务端使用 ReadJSON 读取）
|
||
try {
|
||
ws.send(JSON.stringify(content));
|
||
$("#txtContent").val("");
|
||
showSuccess("📤 发送广播: " + content);
|
||
} catch (e) {
|
||
showError("发送失败: " + e.message);
|
||
}
|
||
});
|
||
|
||
// 回车发送消息
|
||
$("#txtContent").on("keydown", function (event) {
|
||
if (event.keyCode === 13) {
|
||
$("#btnSend").trigger("click");
|
||
}
|
||
});
|
||
})
|
||
</script>
|
||
|