html 连接 websocket 示例

最新推荐文章于 2024-06-08 15:31:20 发布

洪宏鸿

最新推荐文章于 2024-06-08 15:31:20 发布

阅读量1.7k

点赞数 2

文章标签： html websocket 示例

本文链接：https://blog.csdn.net/HongZeng_CSDN/article/details/130206162

版权

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 服务器。

洪宏鸿

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html 连接 websocket 示例

这个示例使用了一个名为 “ws://example.com/ws” 的 WebSocket 服务器，您需要将其替换为您实际使用的 WebSocket 服务器地址。以下是一个简单的 HTML 页面示例，它连接到 WebSocket 服务器并包含一个文本框、一个发送按钮以及 WebSocket 连接、读取和关闭事件的监听。// 2. 监听 WebSocket 连接事件。// 4. 监听 WebSocket 关闭事件。// 5. 监听 WebSocket 出错事件。
复制链接

扫一扫