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