html5 websocket

作者：一小我的小情歌发布日期:2025-09-23 浏览:121

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 WebSocket Example</title>
    <script type="text/javascript">
        // 创建 WebSocket 对象，指定要连接的服务器 URL
        var ws = new WebSocket("ws://example.com/socket");

        // 连接成功时触发
        ws.onopen = function() {
            console.log("WebSocket connection established.");
            // 发送消息到服务器
            ws.send("Hello Server!");
        };

        // 接收到消息时触发
        ws.onmessage = function(event) {
            console.log("Message from server: " + event.data);
        };

        // 连接关闭时触发
        ws.onclose = function() {
            console.log("WebSocket connection closed.");
        };

        // 发生错误时触发
        ws.onerror = function(error) {
            console.log("WebSocket error: " + error);
        };
    </script>
</head>
<body>
    <h1>HTML5 WebSocket Example</h1>
    <p>Check the console for WebSocket communication logs.</p>
</body>
</html>

解释说明：

创建 WebSocket 对象：通过 new WebSocket("ws://example.com/socket") 创建一个新的 WebSocket 连接。URL 是 WebSocket 服务器的地址。
事件处理函数：
- onopen：当连接成功建立时触发，可以在这里发送初始消息给服务器。
- onmessage：当从服务器接收到消息时触发，可以通过 event.data 获取消息内容。
- onclose：当连接关闭时触发。
- onerror：当发生错误时触发，可以通过 error 参数获取错误信息。
发送消息：使用 ws.send("Hello Server!") 向服务器发送消息。
日志输出：通过 console.log 输出连接状态和消息内容，方便调试。

这个示例展示了如何使用 HTML5 WebSocket 实现客户端与服务器之间的实时通信。

上一篇：网页代码html

下一篇：html5+