vue項目中接入websocket時需要ip端口動態(tài)部署問題
更新時間：2023年09月26日 10:32:31 作者：haohao_ding
這篇文章主要介紹了vue項目中接入websocket時需要ip端口動態(tài)部署問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項目中接入websocket時需要ip端口動態(tài)部署
最近項目上到測試環(huán)境的時發(fā)現(xiàn)websocket總是連接失敗，本地啟動都沒有問題。
查了一下問題發(fā)現(xiàn)前端項目接入websocket時ip和端口寫死了。這樣當然是不行的。
接下來直接上解決方案吧。
websocket的連接url為：ws://ip:port/websocket/test 為例。
為了方便部署時不需要修改代碼，項目中接入的時候肯定是不能寫入具體ip和端口的，這個時候我們可以像處理接口一樣讓每個環(huán)境的ip:port與瀏覽器訪問的ip:port一致，然后通過nginx動態(tài)代理到我們指定的ip端口上去。
1.前端代碼修改
var generateEndpoint = function (socketURI) {
if (socketURI.includes("ws")) {
return socketURI;
} else {
return `${location.protocol === 'https' ? 'wss' : 'ws'}://${location.host}` + socketURI;
}
};2.nginx 動態(tài)代理
# WebSocket 服務
location /websocket {
proxy_pass http://真實websocket服務的ip:端口;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}即可。這樣每次部署時都根據nginx代理到正確url了。
Tomcat部署Websocket后連接失敗
應用如果啟動websocket server后，Tomcat和Apache都需要相應的配置支持
1.首先Apache需要配置代理服務
在Httpd.conf中加入下面一行
ProxyPass /mwd/webSocketByMwd ws://127.0.0.1:8080/mwd/webSocketByMwd
其中
1）mwd 為應用名稱，因為不同應用都可以啟動websocket server，因為需要指定路徑
2）webSocketByMwd, 為啟動的服務名稱，這個名稱是程序啟動時候設置的服務接口名稱
2.Tomcat中打開端口 server.xml
Tomcat的版本默認是支持websocket的，所以只需將對應的端口打開即可
<Connector port="8080" URIEncoding="UTF-8" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"/>
我這邊遇到的問題是，開始配置的代理后，websocket連接還是失敗，后來發(fā)現(xiàn)是因為8080端口并沒有打開，
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
文章主要內容是關于如何在項目中引入依賴項以及編寫組件代碼的步驟和總結,作者分享了個人經驗,旨在為讀者提供參考,并鼓勵大家支持腳本之家2024-12-12
Vue3使用pinia進行數(shù)據添加、修改和刪除的操作代碼
Pinia?是?Vue?3?的官方狀態(tài)管理庫,旨在提供一種簡單、靈活且類型安全的狀態(tài)管理解決方案,Pinia?的設計理念與?Vuex?類似,但更加輕量且易于使用,文旨在全面解析?Vue?3?中如何使用?Pinia?進行數(shù)據的添加、修改和刪除,需要的朋友可以參考下2025-03-03
vue?filters和directives訪問this的問題詳解
這篇文章主要介紹了vue?filters和directives訪問this的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要為大家介紹了vue開發(fā)設計分支切換與cleanup實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家詳細介紹了Vue中webpack的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
Vue實現(xiàn)拖拽功能的基本原理是監(jiān)聽鼠標事件,實時更新拖拽元素的位置,最后在合適的時機停止拖拽并更新元素位置,在Vue中,我們可以通過綁定相關事件來實現(xiàn)這一功能2025-02-02
vue3+ts+vant移動端H5項目搭建的實現(xiàn)步驟
本文主要介紹了vue3+ts+vant移動端H5項目搭建，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
下面小編就為大家分享一篇vue獲取當前點擊的元素并傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
今天小編就為大家分享一篇vue-cli監(jiān)聽組件加載完成的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了vue事件修飾符和按鍵修飾符用法總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07