记一次vue开发WebSocket/wss通讯报错CLOSED => 1006 CLOSE_ABNORMAL解决方案
测试文件先测试:
检查wss伪静态配置没问题
socket文件夹 数据库没问题
命令行 php start.php status
发现从状态输出可以看到几个问题:
测试文件先测试:
<!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>
发现报错:
WebSocket 错误: [object Event]
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
重启 解决问题
php start.php restart -d
打赏
-
支付宝扫一扫
-
微信扫一扫