vue項(xiàng)目中接入websocket時(shí)需要ip端口動(dòng)態(tài)部署問題
vue項(xiàng)目中接入websocket時(shí)需要ip端口動(dòng)態(tài)部署
最近項(xiàng)目上到測(cè)試環(huán)境的時(shí)發(fā)現(xiàn)websocket總是連接失敗，本地啟動(dòng)都沒有問題。
查了一下問題發(fā)現(xiàn)前端項(xiàng)目接入websocket時(shí)ip和端口寫死了。這樣當(dāng)然是不行的。
接下來直接上解決方案吧。
websocket的連接url為：ws://ip:port/websocket/test 為例。
為了方便部署時(shí)不需要修改代碼，項(xiàng)目中接入的時(shí)候肯定是不能寫入具體ip和端口的，這個(gè)時(shí)候我們可以像處理接口一樣讓每個(gè)環(huán)境的ip:port與瀏覽器訪問的ip:port一致，然后通過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中打開端口 server.xml
Tomcat的版本默認(rèn)是支持websocket的，所以只需將對(duì)應(yīng)的端口打開即可
<Connector port="8080" URIEncoding="UTF-8" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"/>
我這邊遇到的問題是，開始配置的代理后，websocket連接還是失敗，后來發(fā)現(xiàn)是因?yàn)?080端口并沒有打開，
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vuex給state中的對(duì)象新添加屬性遇到的問題及解決
這篇文章主要介紹了Vuex給state中的對(duì)象新添加屬性遇到的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue?Router(v3.x)?路由傳參的三種方式場(chǎng)景分析
vue?路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí)，攜帶參數(shù)跳轉(zhuǎn)，傳參方式可劃分為?params?傳參和?query?傳參，而?params?傳參又可分為在?url?中顯示參數(shù)和不顯示參數(shù)兩種方式，這就是vue路由傳參的三種方式，感興趣的朋友跟隨小編一起看看吧2023-07-07
vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue實(shí)現(xiàn)hash模式網(wǎng)址方式(就是那種帶#的網(wǎng)址、井號(hào)url)
這篇文章主要介紹了Vue實(shí)現(xiàn)hash模式網(wǎng)址方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題
這篇文章主要介紹了Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
關(guān)于Vue的 watch、computed和methods的區(qū)別匯總
這篇文章主要介紹關(guān)于Vue的 watch、computed和methods的區(qū)別，下面文章將圍繞Vue的 watch、computed和methods的續(xù)航管資料展開全文它們之間區(qū)別的內(nèi)容,需要的朋友可以參考一下，希望能幫助到大家2021-11-11
這篇文章主要介紹了Vue.js $refs用法案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue項(xiàng)目中有一些方法需要在多個(gè)頁(yè)面調(diào)用,但為了避免在每個(gè)頁(yè)面都import進(jìn)來,可以把方法加到原型上去,這樣在每個(gè)組件中都能使用了,下面這篇文章主要給大家介紹了關(guān)于配置vue全局方法的兩種方式,需要的朋友可以參考下2021-09-09
這篇文章主要為大家介紹了vue的生命周期，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01