记一次vue开发WebSocket/wss通讯报错CLOSED => 1006 CLOSE_ABNORMAL解决方案

测试文件先测试:
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket 测试页面</title>
    <meta charset="utf-8">
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .status { padding: 10px; margin: 10px 0; border-radius: 4px; }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .info { background: #cce5ff; color: #004085; }
        .log-container { 
            height: 300px; 
            overflow-y: auto; 
            border: 1px solid #ddd; 
            padding: 10px;
            margin: 10px 0;
        }
        .control-panel {
            margin: 20px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        button {
            padding: 5px 10px;
            margin: 5px;
        }
        .timestamp {
            color: #666;
            font-size: 0.8em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>WebSocket 测试页面</h1>
        
        <div class="control-panel">
            <h3>连接控制</h3>
            <button onclick="connectWS('wss://127.0.01:8880')">连接 WSS</button>
            <button onclick="connectWS('wss://127.0.01/wsss')">连接 WSSS</button>
            <button onclick="connectWS('wss://127.0.01/wssss')">连接 WSSSS</button>
            <button onclick="disconnectWS()" id="disconnectBtn" disabled>断开连接</button>
            <button onclick="clearLogs()">清除日志</button>
        </div>
 
        <div class="control-panel">
            <h3>发送消息</h3>
            <input type="text" id="messageInput" placeholder="输入要发送的消息">
            <button onclick="sendMessage()">发送</button>
        </div>
 
        <div>
            <h3>连接信息</h3>
            <div id="connectionStatus" class="status info">未连接</div>
        </div>
 
        <div>
            <h3>日志记录</h3>
            <div id="logContainer" class="log-container"></div>
        </div>
    </div>
 
    <script>
        let ws = null;
        const logContainer = document.getElementById('logContainer');
        const connectionStatus = document.getElementById('connectionStatus');
        const disconnectBtn = document.getElementById('disconnectBtn');
 
        function getTimestamp() {
            return new Date().toLocaleTimeString();
        }
 
        function log(message, type = 'info') {
            const timestamp = getTimestamp();
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `<span class="timestamp">[${timestamp}]</span> ${message}`;
            logEntry.className = type;
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
        }
 
        function updateConnectionStatus(message, type) {
            connectionStatus.textContent = message;
            connectionStatus.className = `status ${type}`;
        }
 
        function connectWS(url) {
            if (ws) {
                log('关闭现有连接...', 'info');
                ws.close();
            }
 
            try {
                log(`尝试连接到 ${url}...`, 'info');
                ws = new WebSocket(url);
 
                ws.onopen = function() {
                    log('WebSocket 连接成功!', 'success');
                    updateConnectionStatus('已连接', 'success');
                    disconnectBtn.disabled = false;
                };
 
                ws.onclose = function(event) {
                    let reason = '未知原因';
                    switch (event.code) {
                        case 1000:
                            reason = '正常关闭';
                            break;
                        case 1001:
                            reason = '服务器正在关闭或客户端离开页面';
                            break;
                        case 1002:
                            reason = '协议错误';
                            break;
                        case 1003:
                            reason = '不支持的数据类型';
                            break;
                        case 1006:
                            reason = '无法连接到服务器(可能是网络问题或服务器未响应)';
                            break;
                        case 1007:
                            reason = '接收到的数据格式不一致';
                            break;
                        case 1008:
                            reason = '违反策略';
                            break;
                        case 1009:
                            reason = '消息太大';
                            break;
                        case 1011:
                            reason = '服务器遇到意外错误';
                            break;
                        default:
                            reason = `未知错误 (Code: ${event.code})`;
                    }
 
                    log(`WebSocket 连接关闭. Code: ${event.code}, Reason: ${reason}`, 'error');
                    updateConnectionStatus('未连接', 'info');
                    disconnectBtn.disabled = true;
                    ws = null;
 
                    // 提示用户可能的解决方案
                    if (event.code === 1006) {
                        log('提示: 请检查服务器是否运行,或网络连接是否正常。', 'info');
                    }
                };
 
                ws.onerror = function(error) {
                    log(`WebSocket 错误: ${error.message || error}`, 'error');
                    console.error('WebSocket 错误:', error);
                    updateConnectionStatus('连接错误', 'error');
                };
 
                ws.onmessage = function(event) {
                    log(`收到消息: ${event.data}`, 'info');
                };
 
            } catch (error) {
                log(`连接错误: ${error.message}`, 'error');
                updateConnectionStatus('连接错误', 'error');
            }
        }
 
        function disconnectWS() {
            if (ws) {
                ws.close();
                log('主动断开连接', 'info');
            }
        }
 
        function sendMessage() {
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value;
 
            if (!ws) {
                log('未连接到WebSocket服务器', 'error');
                return;
            }
 
            try {
                ws.send(message);
                log(`发送消息: ${message}`, 'info');
                messageInput.value = '';
            } catch (error) {
                log(`发送消息失败: ${error.message}`, 'error');
            }
        }
 
        function clearLogs() {
            logContainer.innerHTML = '';
            log('日志已清除', 'info');
        }
 
        // 监听页面关闭事件
        window.onbeforeunload = function() {
            if (ws) {
                ws.close();
            }
        };
 
        // 支持按回车发送消息
        document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
 
        // 页面加载完成后的初始化日志
        log('页面加载完成,等待连接...', 'info');
    </script>
</body>
</html>



发现报错:
[23:29:37] WebSocket 错误: [object Event]
[23:29:37] WebSocket 连接关闭. Code: 1006, Reason: 无法连接到服务器(可能是网络问题或服务器未响应)

检查wss伪静态配置没问题

socket文件夹 数据库没问题

命令行 php start.php status  

发现从状态输出可以看到几个问题:
 
BusinessWorker 进程异常退出:
exit_status: 64000
exit_count: 1468 (退出次数很高)
状态显示为 [busy]
这通常是因为数据库连接问题导致的



那就主要招数据库问题


数据库添加:
 
<?php
namespace Config;
 
class Db
{
    // 静态属性,存储数据库配置
    public static $user = array(
        'host' => '127.0.0.1',
        'port' => 3306,
        'user' => 'root',
        'password' => 'root',
        'dbname' => 'root',
        'charset' => 'utf8',
    );
 
    // WorkerMan 框架会调用这个方法获取配置
    public static function init()
    {
        return self::$user;  // 返回配置数组
    }
}



重启 解决问题
php start.php restart -d