<!DOCTYPE html>
<html>
<head>
<title>WebSocket 示例</title>
<script type="text/javascript">
function init() {
output.innerHTML = '正在连接服务器...';
ws = new WebSocket("ws://localhost:8181"); // 注意替换为你的WebSocket服务器地址
ws.onopen = function(evt) {
output.innerHTML = '连接已打开';
};
ws.onmessage = function(evt) {
output.innerHTML += '<br>收到消息: ' + evt.data;
};
ws.onclose = function(evt) {
output.innerHTML += '<br>连接已关闭';
};
ws.onerror = function(evt) {
output.innerHTML += '<br>发生错误';
};
}
function sendMessage() {
if (ws.readyState == WebSocket.OPEN) {
ws.send(input.value);
} else {
output.innerHTML += '<br>错误: 无法发送消息, 连接没有打开';
}
}
</script>
</head>
<body>
<h2>WebSocket 客户端示例</h2>
<form onsubmit="sendMessage(); return false;">
<input type="text" id="input" value="Hello, Server!">
<input type="button" value="Send" onclick="sendMessage()">
<div id="output"></div>
</form>
<input type="button" value="初始化连接" onclick="init()">
</body>
</html>这个简单的HTML页面展示了如何使用JavaScript创建一个WebSocket客户端，并实现了连接初始化、发送消息、接收消息和错误处理的基本功能。用户可以通过输入框输入消息并点击"Send"按钮发送消息，同时接收服务器返回的数据。页面还提供了一个"初始化连接"按钮，用于开始与WebSocket服务器的通信。