宝塔中的nginx配置websocket,采用ws/wss方式配置

原创 已于 2022-06-09 18:38:07 修改 · 6.8k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#nginx #websocket #https

于 2022-06-09 18:35:27 首次发布
本文介绍了如何在宝塔面板中通过Nginx配置WebSocket服务，包括自定义路径和反向代理的方法，并提供了配置代码示例。同时，强调了需要在安全设置中放行相关端口以确保正常运行。

项目描述

项目直接用了宝塔家的nginx，做的反向代理，后来有了websocket的配置需求，经过一番探索，得以解决，记录备忘。

Nginx自定义路径的方式

网站——设置——配置文件
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/3d5d89ee1bc84c53b621d84c1712a155.png

server
{
    listen 80;
	listen 443 ssl http2;
	......
	......
    #SSL-END
	##访问域名wss://doc.mate.vip/wss  即可
    location /wss {
　        　proxy_pass http://127.0.0.1:50001; ##代理到上面的ip
　        　proxy_connect_timeout 30s;
　        　proxy_read_timeout 86400s;
　        　proxy_send_timeout  30s;
　        　proxy_http_version 1.1;
　　        proxy_set_header Upgrade $http_upgrade;
　        　proxy_set_header Connection "Upgrade";
	}
	......
	......

访问地址示例：https://doc.mate.vip/wss

Nginx反向代理的方式

在这里插入图片描述
在这里插入图片描述

配置代码

#持久化连接配置
proxy_connect_timeout 30s;
proxy_read_timeout 86400s;
proxy_send_timeout  30s;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

这时候就可以使用websocket愉快地畅游了。

友情提醒

宝塔面板里——安全设置需要把相关端口放行
另外如果阿里云的ecs也需要进行放行操作

微服务项目

https://gitee.com/matevip/matecloud

如何使用宝塔面板配置Nginx反向代理WebSocket（wss）
猿小白的博客
01-24 7919
本章教程，主要介绍一下在宝塔面板中如何配置websocket wss的具体过程。
Nginx配置WS、WSS域名
J_Lee
11-26 5912
Nginx配置WS、WSS域名
宝塔面板配置websocket协议wss
大华的程序人生
02-15 2778
其实很简单，对应站点配置文件添加下面配置，直接上代码。上面端口2029改成自己的。
4.WebSocket 配置与Nginx 的完美结合
最新发布
2509_92429865的博客
10-23 606
若要确保 WebSocket 在生产环境中的稳定性和性能，使用 Nginx 作为反向代理服务器是一个明智的选择。打开 Nginx 配置文件（通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default）并添加以下内容，以支持 WebSocket 连接。：这种情况通常表明 WebSocket 服务器未在指定的地址和端口上运行，或者 Nginx 没有正确地将请求转发到 WebSocket 服务器。检查服务器代码以确保正确接收和处理消息。
宝塔 搭建 swoole 聊天
lzc147258的博客
07-29 1029
lsof -i :9501 这个命令 查看端口 占用进程 然后用 kill 终止查看到的进程id 就可以了。首先开放阿里云9501端口 跟 宝塔的9501端口 才可以 因为刚开始的时候没有开放端口报错了好久蒙蔽了。然后在项目根目录里面随便创建一个swoole.php 我是随便创建了一个大家随意。开两个页面 一个张三 一个李四 就可以通信了 简单方便。然后运行自己的swoole.php 启动起来。全部开放以后就不会出现防火墙等网络类的报错。然后可以写一个html 来写页面。
thinkphp5.0.24+nginx+php7.4+workerman（socket）+wss+小程序部署（腾讯云服务器宝塔）
huafei3539的博客
06-17 3166
详细记录一下跳坑过程，找过无数文章解惑，最后只能说还是自己太年轻，如果你也是上面的配置环境，或许可以帮到大家。我这边用到的环境的程序：腾讯云轻量服务器 + 宝塔Linux面板 + Nginx 1.20.2 + PHP-7.4 + Thinkphp5.0.24一、thinkphp5.0.24只能安装：think-worker1.0，thinkphp5.1以上可以安装：think-worker2.0；composer安装think-worker看官方文档：https://www.kancloud.cn/manu
宝塔/Nginx/WebSocket
k_z_j的博客
05-05 2704
选择网站 ->设置->反向代理->没有就添加一个,有就直接点配置文件。记录下,宝塔配置默认wss无法连接。
宝塔nginx环境如何配置 wss WebSocket 连接
神夜空间
05-20 5068
1、需要一个备案域名，在小程序中配置好wss域名 2、开放端口，宝塔环境新开放一个端口 nginx配置 location /wss { proxy_pass http://127.0.0.1:2022; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwar...
宝塔+WebSocket 搭建简单的swoole聊天服务
gcx18721661208的博客
05-30 2498
接下来是配置客户端网页代码，这里我只粘贴一部分进行解释，完整代码请往上预览，43.139.110.32代表我的ip，你们可切换为自己的，后面的9505使我们刚刚放行的的端口，前后端要想连接就靠这个端口了，如果端口错误将会无法连接到服务器。这个时候我们点击客户端文件，我比较懒省事直接以html结尾的文件放在了桌面，点击运行即可，你们可放在服务器，通过视图进行查看效果，进入以后效果如下。这里的'0.0.0.0'代表开放所有ip，默认即可，后面的9502代表端口，这里需要我们去宝塔的控制面板开放端口。
宝塔中nginx配置websocket的wss协议
reg183的专栏
03-08 4655
配置ws也就是不安全的协议，比较简单，可以参考我之前的文章 在配置wss之前要准备好ssl证书， 配置证书也很简单，只要上传两个证书，就好了，我这里就不再赘述了，我这里证书已经配置好了，配置wss的代码如下 server { listen 80; listen 443 ssl http2; server_name kf.xxx.com; index index.php index.html index.htm default.php default.htm default.html
宝塔Nginx搭建多个WSS协议
凡尘-追梦者
03-11 4502
websocket配置wss协议，步骤如下： 一、宝塔点击：网站->设置->配置文档，在配置文件中 server上部添加以下代码 map $http_upgrade $connection_upgrade { default upgrade; '' close; } upstream wss1 { server 0.0.0.0:12300; } upstream wss2 { server 0.0.0.0:12500; } 注意： 1、如果有多
宝塔面板Nginx配置wss
林挺的博客
11-04 9378
宝塔面板nginx配置wss配置过程注意事项 这次配置确实遇到很多坑，因为第一次配置，很多文档都没有写需要端口放行，所以在这块也是耽误了很长时间！ 配置过程 登录宝塔面板，左侧导航栏点击网站，点击想配置的域名，这时会弹出窗口，找到配置文件（如图） location /wss { proxy_pass http://xxx:xxx; #代理到上面的地址去，格式：http:...
同源策略禁止读取位于 https://bm.kehuoa.com/api/auth/login 的远程资源。
way1001的博客
05-31 3945
chrome报错 Access to XMLHttpRequest at ‘https://bm.kehuoa.com/api/auth/login’ from origin ‘https://www.kehuoa.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access cont...
宝塔环境fastadmin使用swoole创建websocket服务并开启wss支持
C++复习
10-10 2423
宝塔环境fastadmin使用swoole创建websocket服务并开启wss支持
Nginx配置WebSocket 【支持wss与ws连接】
热门推荐
qq_35808136的博客
04-29 18万+
一、对wss与nginx代理wss的理解: 1、wss协议实际是websocket+SSL，就是在websocket协议上加入SSL层，类似https(http+SSL)。 2、利用nginx代理wss【通讯原理及流程】 （1）、客户端发起wss连接连到nginx （2）、nginx将wss协议的数据转换成ws协议数据并转发到Workerman的websocket协议端口 （3）、W...
fastadmin使用宝塔管理面板swoole4创建websocket服务并开启wss支持
aslzw的博客
05-11 2831
我php的版本是7.4， Swoole4.
java websocket ssl_如何让服务端同时支持WebSocket和SSL加密的WebSocket（即同时支持ws和wss）？...
weixin_42543309的博客
02-16 1241
自从HTML5出来以后，使用WebSocket通信就变得火热起来，基于WebSocket开发的手机APP和手机游戏也越来越多。我的一些开发APP的朋友，开始使用WebSocket通信，后来觉得通信不够安全，想要对通信进行加密，于是自然而然地就想从ws升级到wss。在升级的过程中，就会存在旧的ws客户端与新的wss客户端同时连接到同一个服务器的情况。所以，如果同一个服务端，能同时支持ws和wss，那...
宝塔 nginx配置 wss
ypplh0214的博客
05-15 968
server { listen 80; listen 443 ssl http2; server_name hwpt.doov5g.com; index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/hwpt.doov5g.com; #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则 #er...
nginx转发websoket ws到wss
08-13
<think>首先，用户的问题是关于配置Nginx将WebSocket从ws升级到wss。用户指定了使用Nginx配置WebSocket转发，从ws到wss。 从系统级指令中，我需要： - 所有行内数学表达式使用$...$格式。 - 独立公式使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾自然地添加引用标识，例如[^1]。 用户提供的引用是： - [^1]: 关于Django + uwsgi + nginx配置WebSocket的示例。 - [^2]: 关于Nginx配置WebSocket支持wss和ws连接的注意事项。 - [^3]: 关于nginx配置WebSocket参数wss连接的示例。 - [^4]: 宝塔中的nginx配置websocket的示例。 这些引用提供了配置示例和常见错误点。 用户的问题："我想配置nginx将WebSocket从ws升级到wss 请问nginx 配置 WebSocket 转发 ws 到 wss" 关键点： - 用户想要将WebSocket连接从ws（HTTP）升级到wss（HTTPS）。 - 这通常涉及在Nginx中配置代理，将WebSocket请求转发到后端服务器，并处理SSL终止。 在WebSocket中： - ws:// 是未加密的WebSocket。 - wss:// 是加密的WebSocket，通常通过HTTPS。 配置Nginx将ws升级到wss意味着： - Nginx监听HTTPS端口（443），处理SSL。 - 当客户端通过wss://连接到Nginx时，Nginx代理请求到后端的ws://服务。 - Nginx需要设置特定的头部来升级连接。 从引用中提取关键信息： - [^1]：显示了proxy_set_header Upgrade和Connection。 - [^2]：提到了配置中的常见错误，如location路径末尾的斜杠。 - [^3]：提供了完整的配置，包括map块和proxy_set_header。 - [^4]：展示了宝塔面板中的配置示例。 标准配置步骤： 1. 确保Nginx配置了SSL证书，以支持HTTPS。 2. 在server块中，为WebSocket路径添加location。 3. 设置proxy_pass指向后端WebSocket服务器（通常是ws://）。 4. 设置proxy_http_version 1.1。 5. 设置Upgrade和Connection头部。 6. 可能设置超时参数。 常见配置： ```nginx location /ws/ { proxy_pass http://backend:port; 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; } ``` 对于wss，需要在server块中启用SSL。 回答结构： - 由于用户要求结构清晰，逐步解决问题。 - 使用中文。 - 最后生成相关问题。 大纲回答： 1. **介绍**：解释ws和wss的区别，以及Nginx的作用。 2. **前提条件**：确保有SSL证书并配置HTTPS。 3. **配置步骤**： - 添加location块用于WebSocket路径。 - 设置proxy_pass。 - 设置必要的头部。 - 可选：设置超时。 4. **完整示例**：提供一个完整的Nginx配置片段。 5. **常见问题**：基于引用，提到常见错误。 6. **测试**：如何测试配置。 7. **生成相关问题**：在末尾添加相关问题。 数学表达式：用户的问题不涉及数学，所以可能不需要LaTeX。但如果提到公式，确保格式正确。例如，如果有方程，但这里不太可能有。 引用标识：在回答中，当引用提供的引用内容时，添加[^1], [^2]等。 例如： - 如引用[^1]所示，需要设置Upgrade头部。 生成相关问题： - 基于主题，生成3-4个相关问题。 完整回答： - 以用户可见层开始。 - 确保可靠：基于标准Nginx实践和引用。</think>### Nginx 配置 WebSocket 从 ws 升级到 wss 要将 WebSocket 连接从 `ws://`（未加密）升级到 `wss://`（加密），需在 Nginx 中配置 SSL 终止和 WebSocket 代理转发。核心是通过 `proxy_set_header` 设置连接升级头部，并确保 SSL 证书正确配置。以下是详细步骤（基于最佳实践和引用内容整理）： --- #### 前提条件 1. **SSL 证书**：已获取有效的 SSL 证书（如 Let's Encrypt 或商业证书），包含 `.crt` 和 `.key` 文件。 2. **后端服务**：WebSocket 服务（如 Django、Node.js）运行在指定端口（例如 `ws://localhost:8000`）。 3. **Nginx 版本**：建议使用 Nginx 1.14+ 以支持 WebSocket 代理。 --- #### 配置步骤 1. **配置 HTTPS 监听** 在 Nginx 的 `server` 块中启用 SSL，监听 443 端口： ```nginx server { listen 443 ssl http2; # 启用 SSL 和 HTTP/2 server_name your-domain.com; # 替换为你的域名 # SSL 证书路径 ssl_certificate /etc/nginx/ssl/your-domain.crt; # 证书文件 ssl_certificate_key /etc/nginx/ssl/your-domain.key; # 私钥文件 ssl_session_timeout 10m; # SSL 会话超时 # 其他 SSL 优化参数（可选） ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; } ``` 2. **添加 WebSocket 代理配置** 在 `server` 块内添加 `location` 规则，指定 WebSocket 路径（如 `/ws/`）： ```nginx location /ws/ { # 注意：路径末尾必须加斜杠，避免匹配错误[^2] proxy_pass http://localhost:8000; # 后端 WebSocket 服务地址（ws://） proxy_http_version 1.1; # 必须使用 HTTP/1.1 # 关键：设置连接升级头部 proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; # 可选：优化超时和日志 proxy_read_timeout 86400s; # 长连接超时（例如 24 小时） proxy_connect_timeout 30s; access_log /var/log/nginx/websocket.log; # 单独日志文件[^1] # 其他代理头部 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } ``` 3. **HTTP 重定向到 HTTPS（可选）** 强制将所有 `http://` 请求重定向到 `https://`： ```nginx server { listen 80; server_name your-domain.com; return 301 https://$host$request_uri; # 永久重定向 } ``` --- #### 完整配置示例 ```nginx # 定义连接升级映射（推荐） map $http_upgrade $connection_upgrade { default upgrade; '' close; } server { listen 443 ssl http2; server_name your-domain.com; # SSL 配置 ssl_certificate /etc/nginx/ssl/your-domain.crt; ssl_certificate_key /etc/nginx/ssl/your-domain.key; ssl_session_timeout 10m; # WebSocket 代理 location /ws/ { # 客户端通过 wss://your-domain.com/ws/ 连接 proxy_pass http://localhost:8000; # 代理到后端的 ws:// proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; # 使用 map 变量[^3] proxy_set_header Host $host; proxy_read_timeout 86400s; } # 其他配置（如静态文件服务） location / { root /var/www/html; index index.html; } } server { listen 80; server_name your-domain.com; return 301 https://$server_name$request_uri; } ``` --- #### 常见错误与解决 - **路径匹配错误**：`location /ws/` 末尾的斜杠 `/` 不可省略，否则可能匹配失败[^2]。 - **代理地址错误**：`proxy_pass` 的端口必须与后端服务一致（如 `http://localhost:8000`），且结尾不加斜杠[^2]。 - **头部未设置**：缺少 `Upgrade` 或 `Connection` 头部会导致连接无法升级（错误码 426）。 - **SSL 证书问题**：证书路径错误或域名不匹配会中断 HTTPS 连接。 - **超时断开**：调整 `proxy_read_timeout` 避免空闲断开（默认 Nginx 超时为 60 秒）。 --- #### 测试方法 1. **验证配置**：运行 `nginx -t` 检查语法。 2. **重启 Nginx**：`systemctl restart nginx`。 3. **客户端测试**：使用 JavaScript 或工具（如 `wscat`）连接 `wss://your-domain.com/ws/`： ```javascript const socket = new WebSocket("wss://your-domain.com/ws/"); socket.onopen = () => console.log("Connected via wss!"); ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值