nginx服务器 部署webSocket 连接中断 前台报错码 1006

本文解决WebSocket连接中常见的1006错误,详细解释了如何通过调整Nginx服务器配置来避免连接超时问题,包括proxy_pass、proxy_set_header、proxy_http_version等关键参数的设置。

前台js打印websocket 关闭连接的错误信息:

console.log('websocket 断开: ' + e.code + 'reason:' + e.reason + '是否刷新' + e.wasClean)

报错码是1006 websocket错误码大全参考:https://www.cnblogs.com/EasyLive2006/p/7878668.html
此处为nginx服务器连接超时,主动断开连接,需要再nginx服务器做如下配置:

location /test{
            root html;
	    proxy_pass  http://test.com;
	    proxy_set_header Upgrade $http_upgrade; # allow websockets
    	proxy_set_header Connection "upgrade";
    	proxy_http_version 1.1;
        proxy_connect_timeout 60s;#l连接超时时间,不能设置太长会浪费系统资源具体参考:https://www.cnblogs.com/qianbixueyuan/p/9575031.html
	    proxy_read_timeout 500s;#读超时时间
	    proxy_send_timeout 500s;#写超时时间
            index  index.html index.htm;
        }
--------------------- 
作者:Phoenix_smf 
来源:优快云 
原文:https://blog.youkuaiyun.com/Phoenix_smf/article/details/89227172 
版权声明:本文为博主原创文章,转载请附上博文链接!
<think>好的,我现在需要帮助用户解决在Vue项目中通过Nginx部署dist文件夹并支持WebSocket的配置问题。首先,我得理解用户的需求。他们可能已经用Vue构建了前端应用,生成了dist目录,现在想用Nginx部署这个静态资源,同时需要支持WebSocket连接,比如使用了Socket.io之类的库。 首先,我应该回顾一下Nginx的基本配置。Nginx作为反向代理,处理静态文件通常是通过location块配置alias或root指向dist目录。比如用户提供的引用[2]中的例子,他们配置了server块监听80端口,server_name是wiki.qingfeng.life,location / 指向/opt/soft/wiki/web/,并处理前端路由的问题,使用try_files确保返回index.html。这部分是基础的前端部署配置,用户可能已经知道这部分,但需要加入WebSocket的支持。 接下来,WebSocket连接通常是通过HTTP升级协议实现的,也就是从HTTP升级到WebSocket的握手过程。Nginx需要正确转发Upgrade和Connection头,这样才能让WebSocket连接成功。在Nginx的配置中,需要添加proxy_set_header指令来处理这些头信息。 用户的问题中提到WebSocket配置,所以需要检查他们现有的Nginx配置是否包含对WebSocket的支持。比如,在引用[2]的配置中,可能没有针对WebSocket的特定设置,所以需要补充这部分。通常,WebSocket连接会使用特定的路径,比如/socket.io/,所以需要在location块中匹配这个路径,并设置相应的代理参数。 另外,用户可能在后端使用了某种WebSocket服务器,比如Node.js的Socket.io,或者其他的实现。这时候,Nginx需要将WebSocket请求代理到后端的服务器。比如,假设后端运行在localhost:3000,那么需要添加一个location /socket.io/的块,使用proxy_pass到后端地址,并设置升级头。 同时,需要注意WebSocket的保持连接问题,可能需要调整proxy_read_timeout等参数,避免连接被过早关闭。 然后,结合用户提供的引用[3],他们安装了socket.io-client、vue-socket.io等依赖,说明前端确实使用了WebSocket库,需要确保Nginx配置正确,否则会出现连接失败的问题。比如,可能出现WebSocket连接时返回403或者握手失败的情况,这时候检查Nginx的代理配置是否正确。 另外,用户可能遇到的常见问题包括:Nginx没有正确传递Upgrade和Connection头,或者WebSocket路径没有被正确代理到后端,导致前端无法建立连接。这时候需要确保location块中的proxy_set_header指令正确设置,并且proxy_pass指向正确的后端地址。 总结步骤应该是:配置Nginx的静态文件服务,处理前端路由;添加WebSocket的代理配置,确保Upgrade头被正确传递;最后,重新加载Nginx配置使更改生效。 此外,可能还需要检查防火墙或安全组设置,确保WebSocket使用的端口(比如80或443)是开放的,以及后端服务是否正常运行。 最后,用户可能需要测试配置是否生效,比如使用浏览器开发者工具查看WebSocket连接是否成功,或者在Nginx日志中查看相关请求是否有错误。</think>以下是在Vue项目中通过Nginx部署dist文件夹并支持WebSocket的配置步骤: ### 一、基础部署配置 1. **Nginx静态资源配置** ```nginx server { listen 80; server_name yourdomain.com; location / { alias /path/to/your/dist/; index index.html; try_files $uri $uri/ /index.html; # 支持Vue路由 } } ``` 此配置将静态资源目录映射到Vue的dist文件夹[^2] ### 二、WebSocket支持配置 2. **添加WebSocket代理规则** ```nginx location /socket.io/ { proxy_pass http://backend_server; # 替换为实际后端地址 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; proxy_read_timeout 86400s; # 长连接保持 } ``` 关键参数说明: - `Upgrade`和`Connection`头实现协议升级到WebSocket[^3] - `/socket.io/`为Socket.io默认路径,需与实际客户端路径一致 ### 三、完整配置示例 ```nginx server { listen 80; server_name yourdomain.com; # 静态资源服务 location / { alias /opt/soft/wiki/web/; index index.html; try_files $uri $uri/ /index.html; } # WebSocket代理 location /socket.io/ { proxy_pass http://localhost:3000; # 后端WebSocket服务地址 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; } # 可选:API代理 location /api/ { proxy_pass http://backend_api; } } ``` ### 四、验证步骤 1. 检查Nginx配置语法 ```bash nginx -t ``` 2. 重载Nginx配置 ```bash nginx -s reload ``` 3. 浏览器控制台检查WebSocket连接状态(应显示101 Switching Protocols)
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Phoenix_smf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值