html 连接 websocket 示例

女爷i 2023-10-10 17:12 5阅读 0赞

### html 连接 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 Example</title>  
        <script>        // 1. 创建一个 WebSocket 对象  
            let socket = new WebSocket("ws://example.com/ws");  
            // 2. 监听 WebSocket 连接事件  
            socket.addEventListener("open", function (event) {
                      console.log("WebSocket connected:", event);        });  
            // 3. 监听 WebSocket 收到消息事件  
            socket.addEventListener("message", function (event) {
                      console.log("WebSocket message received:", event.data);        });  
            // 4. 监听 WebSocket 关闭事件  
            socket.addEventListener("close", function (event) {
                      console.log("WebSocket closed:", event);        });  
            // 5. 监听 WebSocket 出错事件  
            socket.addEventListener("error", function (event) {
                      console.error("WebSocket error:", event);        });  
            function sendMessage() {
                      let message = document.getElementById("messageInput").value;            if (message) {
                          socket.send(message);            }        }    </script>  
    </head>  
    <body>  
        <h1>WebSocket Example</h1>  
        <input type="text" id="messageInput" placeholder="Type your message here...">  
        <button onclick="sendMessage()">Send</button>  
    </body>  
    </html>

这个示例使用了一个名为 “ws://example.com/ws” 的 WebSocket 服务器，您需要将其替换为您实际使用的 WebSocket 服务器地址。页面初始化时将自动连接 WebSocket，并在事件触发时输出事件日志。发送按钮用于将文本框中的内容发送到 WebSocket 服务器。