前端WebSocket連接失敗問(wèn)題的排查過(guò)程及解決
一、WebSocket介紹
WebSocket 是一種在單個(gè) TCP 連接上進(jìn)行全雙工通信的協(xié)議。它使客戶端（如瀏覽器）和服務(wù)器之間能夠建立持久的連接，并進(jìn)行實(shí)時(shí)、低延遲的數(shù)據(jù)交互。與傳統(tǒng)的 HTTP 請(qǐng)求-響應(yīng)模式不同，WebSocket 允許服務(wù)器主動(dòng)向客戶端推送數(shù)據(jù)，非常適合需要即時(shí)通訊的應(yīng)用場(chǎng)景，如在線聊天、實(shí)時(shí)通知、協(xié)同編輯等。
二、環(huán)境介紹
機(jī)器和相關(guān)服務(wù)情況如下圖所示：
三、遇到的問(wèn)題
遇到一個(gè)問(wèn)題，就是在客戶端(192.168.0.103)上訪問(wèn) WSL 的 web 頁(yè)面時(shí)，出現(xiàn)了和 Springboot 中打開(kāi)的 WebSocket 服務(wù)連接不上的 bug（但是其它服務(wù)可以正確使用）如下圖所示：
四、問(wèn)題排查
然后我先在 WSL 中使用 websocat工具來(lái)測(cè)試 Springboot 的 WebSocket 服務(wù)是否成功開(kāi)啟，結(jié)果是已成功開(kāi)啟，如下圖所示
之后在寫(xiě)了個(gè)簡(jiǎn)單的 html 網(wǎng)頁(yè)放在客戶端(192.168.0.103)上運(yùn)行，看是否能成功連接上 WebSocket（使用的 url 為 ws://192.168.0.100:33080/ws/），結(jié)果也是可以的，如下圖所示
之后在網(wǎng)上找了下解決方案，有提到打包后的前端代碼中 WebSocket 的連接路徑寫(xiě)死了，在當(dāng)前客戶端機(jī)器上無(wú)法直接通過(guò)該訪問(wèn)路徑連接上 WebSocket。然后檢查前端代碼，找到了建立 WebSocket 連接使用的 URL ，如下圖所示
嘗試著修改 URL 為 ws://192.168.0.100:33080/ws/ , 然后重新編譯并重新加載nginx重啟nginx、刪除瀏覽器緩存、重啟瀏覽器，重新打開(kāi)網(wǎng)頁(yè)時(shí)發(fā)現(xiàn)已經(jīng)成功建立 WebSocket 連接了，如下圖所示
五、總結(jié)
前端 WebSocket 的連接地址（ws://…）必須是瀏覽器實(shí)際運(yùn)行頁(yè)面的客戶端能夠直連到的地址，而不是以前端項(xiàng)目部署的位置（如 Nginx 容器或 WSL 內(nèi)部地址）為準(zhǔn)。如果寫(xiě)成內(nèi)部地址或 localhost，只有后端服務(wù)器本機(jī)能連，外部客戶端會(huì)連接失敗。應(yīng)根據(jù)客戶端實(shí)際訪問(wèn)的 IP 和端口（如 ws://192.168.0.100:33080/ws/）來(lái)設(shè)置 WebSocket 地址，確?？蛻舳四苤苯釉L問(wèn)并建立連接。
到此這篇關(guān)于前端WebSocket連接失敗問(wèn)題的排查過(guò)程及解決的文章就介紹到這了,更多相關(guān)前端WebSocket連接失敗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了java簡(jiǎn)單實(shí)現(xiàn)多線程，及java爬蟲(chóng)使用線程池實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了Spring的@ComponentScan注解用法介紹,@ComponentScan注解一般和@Configuration注解一起使用,主要的作用就是定義包掃描的規(guī)則,然后根據(jù)定義的規(guī)則找出哪些需類需要自動(dòng)裝配到spring的bean容器中,然后交由spring進(jìn)行統(tǒng)一管理,需要的朋友可以參考下2023-11-11
啟動(dòng)Spring項(xiàng)目詳細(xì)過(guò)程(小結(jié))
這篇文章主要介紹了啟動(dòng)Spring項(xiàng)目詳細(xì)過(guò)程(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
MinIO集群通過(guò)分布式存儲(chǔ)和負(fù)載均衡機(jī)制實(shí)現(xiàn)文件上傳請(qǐng)求的分發(fā),核心原理包括數(shù)據(jù)分片和冗余、負(fù)載均衡、一致性哈希和并行處理,Java示例展示了如何實(shí)現(xiàn)文件上傳分發(fā)邏輯,感興趣的朋友一起看看吧2025-03-03
Java中反射reflect的基礎(chǔ)知識(shí)講解
這篇文章主要介紹了Java中反射reflect的基礎(chǔ)知識(shí)講解,Java中的反射,它算是Java當(dāng)中非常底層的一個(gè)技術(shù),平時(shí)我們我們用得不多,實(shí)際上它也的確非常復(fù)雜同時(shí)也難以理解,但是涉及到底層的東西Java都給我們封裝好了,我們直接拿來(lái)調(diào)用即可,需要的朋友可以參考下2023-10-10
SpringBoot利用攔截器實(shí)現(xiàn)避免重復(fù)請(qǐng)求
Spring MVC中的攔截器(Interceptor)類似于Servlet中的過(guò)濾器(Filter)，它主要用于攔截用戶請(qǐng)求并作相應(yīng)的處理。本文就將利用攔截器實(shí)現(xiàn)避免重復(fù)請(qǐng)求，感興趣的小伙伴可以了解一下2022-11-11
詳解Reactor如何優(yōu)雅Exception異常處理
初識(shí)響應(yīng)式編程的時(shí)候，除了從命令式的思維方式轉(zhuǎn)變?yōu)楹瘮?shù)式的編程方式外，其中有一個(gè)很大的不適應(yīng)的地方就是在面對(duì)異常時(shí)該怎么處理。本文將通過(guò)Project?Reactor的文檔以及源碼來(lái)深入解讀，在reactor中是如何優(yōu)雅地實(shí)現(xiàn)這異常處理三板斧，希望對(duì)大家有所幫助2023-02-02
Java多線程之讀寫(xiě)鎖分離設(shè)計(jì)模式
這篇文章主要介紹了Java多線程讀寫(xiě)鎖分離設(shè)計(jì)模式，主要利用Java到嗎完成read read 并行化、read write 不允許、write write 不允許幾項(xiàng)任務(wù),需要的朋友可以參考一下2021-10-10
Spring Boot啟動(dòng)過(guò)程（五）之Springboot內(nèi)嵌Tomcat對(duì)象的start教程詳解
這篇文章主要介紹了Spring Boot啟動(dòng)過(guò)程（五）之Springboot內(nèi)嵌Tomcat對(duì)象的start的相關(guān)資料,需要的朋友可以參考下2017-04-04
SpringBoot+logback默認(rèn)日志的配置和使用方式
這篇文章主要介紹了SpringBoot+logback默認(rèn)日志的配置和使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05