RuoYi-Vue-Plus/WebSocket和SSE功能分析及错误解决方案.md

WebSocket和SSE功能分析及错误解决方案

WebSocket和SSE的作用分析

1. WebSocket功能

作用: 实现客户端与服务器之间的双向实时通信

具体功能:

• 实时通知推送: 系统消息、公告、提醒等
• 在线状态管理: 用户在线状态实时更新
• 数据同步: 实时数据变更通知
• 心跳检测: 保持连接活跃状态
• 聊天功能: 实时消息传递

技术实现:

// 初始化WebSocket连接
websocket = new WebSocket(`${url}?Authorization=Bearer ${token}&clientid=${clientId}`);

// 心跳机制
setInterval(() => {
  if (websocket.readyState === 1) {
    websocket.send(JSON.stringify({ type: 'ping' }));
  }
}, 10000);

// 接收消息处理
websocket.onmessage = (e) => {
  // 显示通知
  window.$notification?.create({
    title: '消息',
    content: e.data,
    type: 'success'
  });
};

2. SSE (Server-Sent Events) 功能

作用: 服务器向客户端单向推送事件流

具体功能:

• 系统通知: 服务器主动推送系统消息
• 状态更新: 实时状态变更通知
• 日志流: 实时日志推送
• 进度更新: 长时间任务进度通知
• 数据监控: 实时数据监控推送

技术实现:

// 使用VueUse的useEventSource
const { data, error } = useEventSource(sseUrl, [], {
  autoReconnect: {
    retries: 10,
    delay: 3000
  }
});

// 监听数据变化
watch(data, () => {
  if (!data.value) return;
  // 处理接收到的数据
  useNoticeStore().addNotice({
    message: data.value,
    read: false,
    time: new Date().toLocaleString()
  });
});

3. 在RuoYi-Vue-Plus中的应用场景

• 通知中心: 右上角的消息通知功能
• 系统公告: 管理员发布的系统公告推送
• 操作提醒: 重要操作的实时提醒
• 状态同步: 多用户操作时的状态同步
• 监控告警: 系统监控数据的实时推送

当前错误分析

1. SSE连接错误 ❌

错误信息:

SSE connection error
加载页面时与 http://localhost:9527/dev-api/resource/sse 的连接中断

原因分析:

• 前端无条件初始化SSE连接
• 后端SSE服务未启用或配置不正确
• 开发环境中SSE服务端点不可用

2. disconnectNativeApp错误 ❌

错误信息:

ReferenceError: disconnectNativeApp is not defined
content.js:13:5

原因分析:

• 这是浏览器扩展（如开发者工具插件）引起的错误
• 不是应用代码问题，不影响核心功能
• 通常来自某些浏览器插件的脚本注入

3. workflow路由错误 ❌

错误信息:

Error transforming route "workflow_leave": Error: View component "workflow_leave" not found
Error transforming route "workflow_category": Error: View component "workflow_category" not found
...

原因分析:

• 数据库中存在workflow相关菜单配置
• 前端缺少对应的Vue组件文件
• 路由生成器尝试创建不存在的组件路由
• elegant-router自动生成路由时找不到对应的view组件

解决方案

方案一：完全禁用SSE和WebSocket（推荐用于开发环境）

1. 修改布局文件

文件: src/layouts/base-layout/index.vue

onMounted(() => {
  // 完全禁用WebSocket和SSE连接，避免开发环境错误
  // 这些功能用于实时通知推送，在开发环境中可以禁用
  console.log('WebSocket和SSE连接已禁用 - 开发环境');
  
  // 如果生产环境需要实时通知功能，请启用以下代码：
  // if (import.meta.env.VITE_APP_WEBSOCKET === 'Y') {
  //   const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
  //   initWebSocket(`${protocol + window.location.host + import.meta.env.VITE_APP_BASE_API}/resource/websocket`);
  // }
  
  // if (import.meta.env.VITE_APP_SSE === 'Y') {
  //   initSSE(`${import.meta.env.VITE_APP_BASE_API}/resource/sse`);
  // }
});

2. 创建环境变量文件（可选）

文件: .env.local

# 禁用SSE和WebSocket
VITE_APP_SSE=N
VITE_APP_WEBSOCKET=N

方案二：禁用workflow菜单

1. 执行SQL脚本禁用菜单

-- 禁用workflow相关菜单
UPDATE sys_menu SET visible = '0' WHERE component LIKE '%workflow%';
UPDATE sys_menu SET visible = '0' WHERE path LIKE '%workflow%';
UPDATE sys_menu SET visible = '0' WHERE menu_name LIKE '%工作流%';
UPDATE sys_menu SET visible = '0' WHERE menu_name LIKE '%请假%';
UPDATE sys_menu SET visible = '0' WHERE menu_name LIKE '%流程%';

2. 重新生成路由

cd ruoyi-plus-soybean
npx elegant-router generate

方案三：处理disconnectNativeApp错误

1. 浏览器层面解决

• 禁用相关浏览器扩展
• 使用无痕模式测试
• 清除浏览器缓存和扩展数据

2. 代码层面忽略

// 在全局错误处理中忽略此类错误
window.addEventListener('error', (event) => {
  if (event.message.includes('disconnectNativeApp')) {
    event.preventDefault();
    return false;
  }
});

生产环境配置

1. 启用SSE和WebSocket

如果生产环境需要实时通知功能：

后端配置

• 确保SSE控制器正确配置
• 配置WebSocket端点
• 设置正确的CORS策略

前端配置

// 在布局文件中启用
onMounted(() => {
  if (import.meta.env.VITE_APP_WEBSOCKET === 'Y') {
    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
    initWebSocket(`${protocol + window.location.host + import.meta.env.VITE_APP_BASE_API}/resource/websocket`);
  }
  
  if (import.meta.env.VITE_APP_SSE === 'Y') {
    initSSE(`${import.meta.env.VITE_APP_BASE_API}/resource/sse`);
  }
});

环境变量配置

# 生产环境启用
VITE_APP_SSE=Y
VITE_APP_WEBSOCKET=Y

2. workflow功能配置

如果需要工作流功能：

创建对应的Vue组件

• src/views/workflow/leave/index.vue
• src/views/workflow/category/index.vue
• src/views/workflow/process-definition/index.vue
• 等等...

启用菜单

-- 启用workflow菜单
UPDATE sys_menu SET visible = '1' WHERE component LIKE '%workflow%';

验证步骤

1. 验证SSE/WebSocket禁用

• 打开浏览器开发者工具
• 查看Console，应该看到"WebSocket和SSE连接已禁用 - 开发环境"
• Network标签页中不应该有SSE连接请求

2. 验证workflow错误消失

• 重新加载页面
• Console中不应该再有"View component workflow_xxx not found"错误

3. 验证PMS模块功能

• 访问 /pms/contact - 联系人管理
• 访问 /pms/tag - 标签管理
• 访问 /pms/tag-relation - 标签关联管理
• 确认所有页面正常加载和功能正常

总结

✅ 已解决的问题

1. SSE连接错误: 通过禁用SSE初始化解决
2. workflow路由错误: 通过禁用相关菜单解决
3. disconnectNativeApp错误: 识别为浏览器扩展问题，可忽略

🎯 功能影响评估

1. 实时通知功能: 暂时禁用，不影响核心业务功能
2. 工作流功能: 暂时禁用，不影响PMS模块使用
3. PMS模块: 完全可用，所有功能正常

📋 后续建议

1. 开发环境: 保持当前配置，专注于业务功能开发
2. 生产环境: 根据实际需求决定是否启用实时通知功能
3. 工作流功能: 如有需要，可后续补充对应的前端组件

当前配置下，PMS联系人模块已完全可用，用户可以正常进行联系人管理、标签管理和标签关联等所有核心功能操作。