【Websokect】服务器https协议下ws连接失败问题及解决办法

在服务器使用HTTPS协议下连接WebSocket时，通常会出现一些常见的问题导致连接失败。以下是一些可能的原因和解决办法：

SSL证书配置问题： 确保您的服务器上已正确配置SSL证书，并且证书有效。如果证书配置不正确或者过期，客户端可能无法建立安全连接。请检查服务器的SSL证书配置，并确保证书链完整、证书有效。
未配置WebSocket容器支持TLS： WebSocket服务需要在HTTPS协议下运行时，需要WebSocket容器（如Tomcat、Jetty等）支持TLS。确保您的WebSocket容器已正确配置，以支持WebSocket over TLS（wss协议）。您可能需要在容器配置中启用TLS支持，并且将WebSocket协议升级到TLS。
防火墙或网络配置问题： 某些防火墙或网络设备可能会阻止WebSocket连接，特别是在使用非标准端口时。确保您的网络配置允许WebSocket流量通过，并且端口没有被防火墙或其他安全设备所阻止。
跨域资源共享（CORS）问题： 如果WebSocket服务与您的HTTPS网站位于不同的域名下，可能会遇到跨域问题。在服务器端配置合适的CORS规则以允许WebSocket连接跨域访问。
客户端证书验证问题： 如果您的服务器配置了客户端证书验证，确保客户端证书已正确配置，并且客户端可以提供有效的证书以建立连接。
日志调试： 在服务器和客户端启用详细的日志记录，以便排查连接失败的原因。查看服务器和客户端的日志文件，查找与WebSocket连接相关的错误或异常信息，以确定具体的问题。

问题场景：

前端地址：ws://127.0.0.1:19004/webSocket

当放在https协议下的情况下，ws会报异常

DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

解决办法：

1、把ws协议换成wss协议

2、nginx配置反向代理

复制代码

    location /websocket  {   
    # 指向部署websocket的项目
     proxy_pass http://127.0.0.1:19004/websocket;        
     proxy_http_version 1.1;    
     proxy_set_header Upgrade $http_upgrade;    
     proxy_set_header Connection "Upgrade";    
     proxy_set_header X-real-ip $remote_addr;
     proxy_set_header X-Forwarded-For $remote_addr;
     }

3、最后前端访问地址：wss://example.com/websocket

4、测试连接成功！