返回

如何解决 Laravel WebSockets WSS 连接问题？

php

修复 Laravel WebSockets WSS 问题：Nginx 配置指南

在使用 Laravel WebSockets、Pusher 和 Laravel-Echo 时，使用自签名 SSL 证书并通过 Nginx 进行配置时，建立 WebSocket 安全连接（WSS）可能会遇到困难。对于这种情况，我们提供了一个循序渐进的指南，指导你解决此问题，并确保稳定的 WSS 连接。

Nginx 配置

为了通过 Nginx 启用 WSS，需要修改配置文件（例如 /etc/nginx/sites-enabled/default）并添加以下配置块：

location  /ws {
    proxy_pass             http://127.0.0.1:6001;
    proxy_set_header Host  $host;
    proxy_read_timeout     60;
    proxy_connect_timeout  60;
    proxy_redirect         off;

    # 允许使用 Websocket
    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_pass 更改为 WebSocket 服务器的实际 IP 地址和端口。

Laravel 配置

在 Laravel 项目的 .env 文件中，请确保以下配置正确：

PUSHER_SCHEME=https
PUSHER_HOST=你的_域名_或_IP_地址
PUSHER_PORT=443

客户端配置

在 resources/js/bootstrap.js 中，将 wsPort 和 wssPort 配置更新为以下内容：

wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80, 
wssPort:  import.meta.env.VITE_PUSHER_PORT ?? 443,

其他考虑因素

  • 确保已正确配置 SSL 证书，并且 Nginx 已正确加载。
  • 检查防火墙或其他安全措施是否阻止了 WebSocket 连接。
  • 如果问题仍然存在，请尝试禁用 Nginx 的 HTTP/2 支持。

结论

通过遵循这些步骤，你应该能够在 Laravel WebSockets 中成功配置 WSS 连接。这将使你能够在本地计算机和应用程序之间建立安全且稳定的 WebSocket 连接。

常见问题解答

  1. 为什么使用自签名 SSL 证书会遇到 WSS 问题？

自签名 SSL 证书不具备来自受信任证书颁发机构的签名，这可能会导致浏览器和客户端出现连接问题。

  1. 如何测试 WSS 连接？

可以在浏览器的开发人员工具（通常通过按 F12 打开）中检查 WebSocket 连接。在“网络”选项卡中，你可以监控连接的状态和数据传输。

  1. 如何解决 Nginx 中的 HTTP/2 支持问题？

要禁用 HTTP/2，请在 Nginx 配置中将 http2 协议从 http 块中删除：

http {
    ...
    # 删除此行
    # http2;
    ...
}
  1. 为什么必须更新客户端配置？

更新客户端配置对于使用正确的主机、端口和协议建立 WebSocket 连接至关重要。

  1. 如果仍然遇到问题，该怎么办？

如果经过上述步骤后仍然无法建立 WSS 连接，建议检查服务器日志以获取错误信息，并仔细检查配置的各个方面是否有错误。