Vue项目请求时间过长导致断开连接的问题

博客主要讨论了在Vue项目中,上传大文件到阿里云OSS时遇到的4.1分钟断开连接和重复上传问题。经过排查,排除了Laravel后端框架的问题,确定问题出在Vue前端。通过调整Vue的请求超时设置成功解决了问题。

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

       对于laravel,已经无力吐槽,不能支持多线程是个永远的痛,如果这个问题在java中,直接另辟一个线程就可以搞定,分分钟就可以返回数据!

    问题:上传视频至阿里云oss,大文件莫名的会上传两次,而且前端每次大约在4.1min的时候断开连接

    思路:因为在阿里云的控制台可以看到同一个视频被上传了两次,猜测是前端框架或者后端框架做了一次链接retry

   解决方案:

1.后端框架(laravel)验证:

public function testTimeOut(){

        sleep(400);
        return 'sleep await';  


}

可以看出后台在400s之后可以返回数据,基本可以排除是后台laravel框架的问题

2.前端框架(Vue)验证 

原先配置文件默认超时时长为2min(这里也是猜测)

然后开始上传视频,控制台发送upload请求,刷新阿里云控制台会看到文件正在上传,奇妙的事情发生了控制报错net err_empty_response,然后在刷新阿里云控制台会发现刚才上传的视频已经完成,但是还有同样的一个视频正在上传,所以猜测在前端没有得到response后,又尝试了请求了一次,导致视频会被上传两次!所以可以断定问题出在前端框

### Vue3 中 Socket 连接断开的解决方案 在 Vue3 项目中,如果遇到 Socket 连接断开的问题,可以通过监听 `disconnect` 和 `disconnecting` 事件来处理用户的离线状态并执行相应的逻辑[^2]。以下是具体的实现方法: #### 1. 配置 Socket.IO 客户端 确保客户端正确初始化了 Socket.IO 的实例,并将其挂载到全局或者组件内部。推荐的方式是在 Vue3 的组合式 API (`setup`) 或者 Pinia/Vuex 状态管理工具中进行配置。 ```javascript import { onMounted, onUnmounted } from 'vue'; import io from 'socket.io-client'; export default { setup() { const socket = io('http://your-server-url', { transports: ['websocket'], // 强制使用 WebSocket 而非轮询 autoConnect: true, }); onMounted(() => { socket.connect(); }); onUnmounted(() => { socket.disconnect(); // 组件销毁时主动断开连接 }); return { socket }; }, }; ``` 通过设置 `transports` 参数为仅支持 `'websocket'` 可以避免因默认启用轮询而导致重复请求问题[^1]。 --- #### 2. 处理断开连接的回调函数 当用户离开页面或关闭浏览器窗口时,可能会触发 `disconnect` 或 `disconnecting` 事件。可以在这些事件中清理资源或将当前用户的状态同步给其他在线成员。 ```javascript socket.on('disconnect', () => { console.log('Socket 已断开'); }); socket.on('disconnecting', (reason) => { console.log(`Socket 正在断开,原因:${reason}`); }); ``` 此外,还可以向服务端发送消息通知其移除该用户的相关记录。 --- #### 3. 使用 Redis 支持跨节点通信 如果你的服务部署在多个节点上,则需要引入 Redis 来共享会话信息。安装 `@socket.io/redis-adapter` 并配置如下[^3]: ```javascript const { createAdapter } = require('@socket.io/redis-adapter'); const pubClient = require('redis').createClient({ host: 'localhost', port: 6379 }); const subClient = pubClient.duplicate(); io.adapter(createAdapter(pubClient, subClient)); ``` 这样即使某个节点上的用户掉线,也能及时广播至整个集群中的所有设备。 --- #### 4. 减少网络抖动引起的频繁重连 为了防止由于短暂的网络波动造成不必要的重新建立连接操作,可以调整心跳检测间隔时间及相关参数: ```javascript const options = { reconnectionAttempts: Infinity, // 自动尝试无限次重连 timeout: 5000, // 单次超时时长设为 5 秒钟 forceNew: false // 不强制创建新的套接字对象 }; const socket = io('ws://example.com', options); ``` 以上措施有助于提升用户体验的同时也降低了服务器负载压力[^4]。 --- ### 总结 综上所述,针对 Vue3 中 Socket 连接断开的情况可以从以下几个方面入手解决问题:优化客户端初始加载过程;合理利用生命周期钩子释放无用链接;借助第三方中间件增强分布式环境下的协作能力以及微调底层协议特性适应实际需求变化。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值