前端WebSocket连接失败问题的排查过程及解决

一、WebSocket介绍

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使客户端（如浏览器）和服务器之间能够建立持久的连接，并进行实时、低延迟的数据交互。与传统的 HTTP 请求-响应模式不同，WebSocket 允许服务器主动向客户端推送数据，非常适合需要即时通讯的应用场景，如在线聊天、实时通知、协同编辑等。

二、环境介绍

机器和相关服务情况如下图所示：

三、遇到的问题

遇到一个问题，就是在客户端(192.168.0.103)上访问 WSL 的 web 页面时，出现了和 Springboot 中打开的 WebSocket 服务连接不上的 bug（但是其它服务可以正确使用）如下图所示：

四、问题排查

然后我先在 WSL 中使用 websocat工具来测试 Springboot 的 WebSocket 服务是否成功开启，结果是已成功开启，如下图所示

之后在写了个简单的 html 网页放在客户端(192.168.0.103)上运行，看是否能成功连接上 WebSocket（使用的 url 为 ws://192.168.0.100:33080/ws/），结果也是可以的，如下图所示

之后在网上找了下解决方案，有提到打包后的前端代码中 WebSocket 的连接路径写死了，在当前客户端机器上无法直接通过该访问路径连接上 WebSocket。然后检查前端代码，找到了建立 WebSocket 连接使用的 URL ，如下图所示

尝试着修改 URL 为 ws://192.168.0.100:33080/ws/ , 然后重新编译并重新加载nginx重启nginx、删除浏览器缓存、重启浏览器，重新打开网页时发现已经成功建立 WebSocket 连接了，如下图所示

五、总结

前端 WebSocket 的连接地址（ws://…）必须是浏览器实际运行页面的客户端能够直连到的地址，而不是以前端项目部署的位置（如 Nginx 容器或 WSL 内部地址）为准。如果写成内部地址或 localhost，只有后端服务器本机能连，外部客户端会连接失败。应根据客户端实际访问的 IP 和端口（如 ws://192.168.0.100:33080/ws/）来设置 WebSocket 地址，确保客户端能直接访问并建立连接。

到此这篇关于前端WebSocket连接失败问题的排查过程及解决的文章就介绍到这了,更多相关前端WebSocket连接失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论