编写简易 WebSocket 测试页面

发表于 分类于 Valine：

以下是一个简单的 WebSocket 测试 HTML 示例，它包含一个消息输入框和一个按钮，用于向 WebSocket 服务器发送消息。此外，还会显示来自服务器的响应。

您可以根据实际的 WebSocket 服务器地址进行修改。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #messages {
            border: 1px solid #ccc;
            padding: 10px;
            width: 300px;
            height: 200px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<h2>WebSocket Test Client</h2>

<div id="messages"></div>

<input type="text" id="messageInput" placeholder="Enter your message..." />
<button id="sendButton">Send</button>

<script>
    const serverUrl = 'wss://your_websocket_server_address'; // 替换为您的 WebSocket 服务器地址
    const websocket = new WebSocket(serverUrl);

    const messagesDiv = document.getElementById('messages');
    const messageInput = document.getElementById('messageInput');
    const sendButton = document.getElementById('sendButton');

    websocket.onopen = function(event) {
        messagesDiv.innerHTML += '<div>Connected to WebSocket server.</div>';
    };

    websocket.onmessage = function(event) {
        messagesDiv.innerHTML += '<div>Received: ' + event.data + '</div>';
        messagesDiv.scrollTop = messagesDiv.scrollHeight; // 滚动到最新消息
    };

    websocket.onerror = function(event) {
        messagesDiv.innerHTML += '<div style="color: red;">Error: ' + event.message + '</div>';
    };

    websocket.onclose = function(event) {
        messagesDiv.innerHTML += '<div>Disconnected from WebSocket server.</div>';
    };

    sendButton.onclick = function() {
        const message = messageInput.value;
        if (message) {
            websocket.send(message);
            messagesDiv.innerHTML += '<div>Sent: ' + message + '</div>';
            messageInput.value = ''; // 清空输入框
        }
    };
</script>

</body>
</html>

使用说明

  1. 替换 WebSocket 服务器地址：

    • 在代码中，找到 const serverUrl = 'wss://your_websocket_server_address'; 这一行，并将 your_websocket_server_address 替换为您实际的 WebSocket 服务器地址。

  2. 打开 HTML 文件：

    • 将上述代码复制到一个新的 .html 文件中，保存后用浏览器打开。

  3. 测试 WebSocket：

    • 输入消息并点击 “Send” 按钮，可以将消息发送到服务器。您将在消息框中看到发送的消息和接收到的服务器响应。

注意事项

  • 确保您的 WebSocket 服务器正在运行，并且可以接受连接。
  • 如果使用的是 wss://，请确保您的服务器支持安全的 WebSocket 连接。
  • 如果遇到连接问题，请检查浏览器的开发者工具中的控制台和网络选项卡，以获取更多错误信息。
相关文章