WebSocket编程.自动维护连接.明确各方法参数含义_调整websocket协议参数-优快云博客

本文链接：https://blog.youkuaiyun.com/xRouter/article/details/137450097

本文介绍如何使用WebSocket进行实时数据传输，包括连接打开、消息接收、错误处理以及重连机制。同时提到了跨域问题和页面刷新注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Data Display</title>
</head>
<body>
    <h1>Data from WebSocket</h1>
    <ul id="dataList"></ul>

    <script>
        // WebSocket连接地址，替换成你的后端服务地址
        const websocketUrl = 'ws://your-backend-service-url';

        let socket;

        function connectWebSocket() {
            socket = new WebSocket(websocketUrl);

            socket.onopen = function(event) {
                console.log('WebSocket connected');
            };

            socket.onmessage = function(event) {
                const newData = JSON.parse(event.data);
                updateDataList(newData);
            };

            socket.onerror = function(event) {
                console.error('WebSocket error:', event);
                // 重连 可以根据错误类型自行判断是否重连
                setTimeout(connectWebSocket, 2000); // 2秒后尝试重连
            };

            socket.onclose = function(event) {
                console.log('WebSocket closed');
                // 重连
                setTimeout(connectWebSocket, 2000); // 2秒后尝试重连
            };
        }

        function updateDataList(newData) {
            const dataList = document.getElementById('dataList');
            const newItem = document.createElement('li');
            newItem.textContent = JSON.stringify(newData);
            dataList.appendChild(newItem);
        }

        connectWebSocket();
    </script>
</body>
</html>

方法参数

参数说明
方法名	参数名	参数解构
onopen	event	事件对象，与 WebSocket 连接相关的信息 event.target : 触发事件的 WebSocket 对象 event.type : 事件类型 event.timeStamp ：事件发生的时间戳
onmessage	event	事件对象，包含从服务器接收到的消息 event.data ：接收到的消息内容可以是字符串、Blob 对象或 ArrayBuffer 对象，具体取决于发送消息时使用的数据格式
onerror	event	事件对象，包含有关发生错误的信息 event.type：表示事件类型，通常为 "error" event.target：触发事件的 WebSocket 对象其他可能的属性取决于具体的错误类型和浏览器实现
onclose	event	事件对象， WebSocket 连接关闭相关的信息 event.target：触发事件的 WebSocket 对象 event.code：表示连接关闭的状态码，如 1000 表示正常关闭 event.reason：表示连接关闭的原因，通常是一个字符串 event.wasClean：表示连接是否是正常关闭的，布尔值

注意事项

通常情况下，当 onerror 事件发生时，WebSocket 连接会被关闭，但为了确保连接的稳定性，代码中可能会进行重连操作，以尝试重新建立连接。因此，onerror 事件的处理通常会包含一些重连逻辑，以确保连接的持续性
页面上自行维护websocet实例，页面不要轻易reload，因为数据状态已在页面中
注意调试阶段，使用代理方式，或者后端服务接口配置跨域支持，避免跨域问题