前端WebSocket連接失敗問(wèn)題的排查過(guò)程及解決
一、WebSocket介紹
WebSocket 是一種在單個(gè) TCP 連接上進(jìn)行全雙工通信的協(xié)議。它使客戶(hù)端（如瀏覽器）和服務(wù)器之間能夠建立持久的連接，并進(jìn)行實(shí)時(shí)、低延遲的數(shù)據(jù)交互。與傳統(tǒng)的 HTTP 請(qǐng)求-響應(yīng)模式不同，WebSocket 允許服務(wù)器主動(dòng)向客戶(hù)端推送數(shù)據(jù)，非常適合需要即時(shí)通訊的應(yīng)用場(chǎng)景，如在線聊天、實(shí)時(shí)通知、協(xié)同編輯等。
二、環(huán)境介紹
機(jī)器和相關(guān)服務(wù)情況如下圖所示：
三、遇到的問(wèn)題
遇到一個(gè)問(wèn)題，就是在客戶(hù)端(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è)放在客戶(hù)端(192.168.0.103)上運(yùn)行，看是否能成功連接上 WebSocket（使用的 url 為 ws://192.168.0.100:33080/ws/），結(jié)果也是可以的，如下圖所示
之后在網(wǎng)上找了下解決方案，有提到打包后的前端代碼中 WebSocket 的連接路徑寫(xiě)死了，在當(dāng)前客戶(hù)端機(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è)面的客戶(hù)端能夠直連到的地址，而不是以前端項(xiàng)目部署的位置（如 Nginx 容器或 WSL 內(nèi)部地址）為準(zhǔn)。如果寫(xiě)成內(nèi)部地址或 localhost，只有后端服務(wù)器本機(jī)能連，外部客戶(hù)端會(huì)連接失敗。應(yīng)根據(jù)客戶(hù)端實(shí)際訪問(wèn)的 IP 和端口（如 ws://192.168.0.100:33080/ws/）來(lái)設(shè)置 WebSocket 地址，確?？蛻?hù)端能直接訪問(wèn)并建立連接。
到此這篇關(guān)于前端WebSocket連接失敗問(wèn)題的排查過(guò)程及解決的文章就介紹到這了,更多相關(guān)前端WebSocket連接失敗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Feign調(diào)用中的兩種Header傳參方式小結(jié)
這篇文章主要介紹了Feign調(diào)用中的兩種Header傳參方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
springboot 整合 freemarker代碼實(shí)例
這篇文章主要介紹了springboot 整合 freemarker代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
運(yùn)行在服務(wù)器端的小程序，Servlet就是一個(gè)接口，定義了Java類(lèi)被瀏覽器訪問(wèn)到(tomcat識(shí)別)的規(guī)則，將來(lái)我們自定義一個(gè)類(lèi)，實(shí)現(xiàn)Servlet接口，復(fù)寫(xiě)方法2021-09-09
基于SpringBoot實(shí)現(xiàn)七天免登錄的完整流程
作為一名Java后端高級(jí)開(kāi)發(fā),我敢說(shuō)七天免登錄是業(yè)務(wù)系統(tǒng)里最常見(jiàn)的需求之一,這個(gè)需求看似簡(jiǎn)單,但實(shí)現(xiàn)不好很容易踩坑：要么免登錄失效影響用戶(hù)體驗(yàn),要么出現(xiàn)安全漏洞導(dǎo)致賬號(hào)被盜,今天這篇文章,我就結(jié)合實(shí)際工作經(jīng)驗(yàn),講透七天免登錄的標(biāo)準(zhǔn)實(shí)現(xiàn)方案2026-01-01
本文主要介紹了SpringBoot集成Auth0 JWT的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
詳解Java豆瓣電影爬蟲(chóng)——小爬蟲(chóng)成長(zhǎng)記（附源碼）
這篇文章主要介紹了詳解Java豆瓣電影爬蟲(chóng)——小爬蟲(chóng)成長(zhǎng)記（附源碼） ，具有一定的參考價(jià)值，有需要的可以了解一下。2016-12-12
Spring cloud oauth2如何搭建認(rèn)證資源中心
這篇文章主要介紹了Spring cloud oauth2如何搭建認(rèn)證資源中心,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
Java使用FST實(shí)現(xiàn)地址逆向解析到區(qū)劃信息
本文介紹了如何使用FST（有限狀態(tài)轉(zhuǎn)換器）實(shí)現(xiàn)地址逆向查詢(xún)區(qū)劃信息,首先定義了FST節(jié)點(diǎn)和FST類(lèi),然后實(shí)現(xiàn)地址逆向查詢(xún)功能,通過(guò)遍歷地址字符串查找區(qū)劃名稱(chēng),最后,討論了進(jìn)一步優(yōu)化的方案,需要的朋友可以參考下2025-12-12
下面小編就為大家?guī)?lái)一篇基于Maven的pom.xml文件詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
在Springboot中處理log4j2日志文件過(guò)程
日志切割、分離和清理是日志管理的重要環(huán)節(jié),本文介紹了在SpringBoot項(xiàng)目中配置日志切割、分離和清理的步驟,并詳細(xì)解釋了實(shí)現(xiàn)原理2026-01-01