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