前端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连接失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了java简单实现多线程，及java爬虫使用线程池实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了Spring的@ComponentScan注解用法介绍,@ComponentScan注解一般和@Configuration注解一起使用,主要的作用就是定义包扫描的规则,然后根据定义的规则找出哪些需类需要自动装配到spring的bean容器中,然后交由spring进行统一管理,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了启动Spring项目详细过程(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
MinIO集群通过分布式存储和负载均衡机制实现文件上传请求的分发,核心原理包括数据分片和冗余、负载均衡、一致性哈希和并行处理,Java示例展示了如何实现文件上传分发逻辑,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了Java中反射reflect的基础知识讲解,Java中的反射,它算是Java当中非常底层的一个技术,平时我们我们用得不多,实际上它也的确非常复杂同时也难以理解,但是涉及到底层的东西Java都给我们封装好了,我们直接拿来调用即可,需要的朋友可以参考下2023-10-10
Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter)，它主要用于拦截用户请求并作相应的处理。本文就将利用拦截器实现避免重复请求，感兴趣的小伙伴可以了解一下2022-11-11
初识响应式编程的时候，除了从命令式的思维方式转变为函数式的编程方式外，其中有一个很大的不适应的地方就是在面对异常时该怎么处理。本文将通过Project Reactor的文档以及源码来深入解读，在reactor中是如何优雅地实现这异常处理三板斧，希望对大家有所帮助2023-02-02
这篇文章主要介绍了Java多线程读写锁分离设计模式，主要利用Java到吗完成read read 并行化、read write 不允许、write write 不允许几项任务,需要的朋友可以参考一下2021-10-10
Spring Boot启动过程（五）之Springboot内嵌Tomcat对象的start教程详解
这篇文章主要介绍了Spring Boot启动过程（五）之Springboot内嵌Tomcat对象的start的相关资料,需要的朋友可以参考下2017-04-04
SpringBoot+logback默认日志的配置和使用方式
这篇文章主要介绍了SpringBoot+logback默认日志的配置和使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
最新评论