起因：專案首頁左右兩欄布局，左側布局是乙個列表始終固定，右側布局路由跳轉，左側列表定時重新整理（http輪訓），右側路由跳轉時會有一些頁面初始化的請求和使用者點選互動的請求。
目前很多定時重新整理，都是http輪訓，方便且快捷。但我這種情況有乙個問題，定時器1s重新整理請求介面，如果此時再操作右側面板，會導致有請求失敗的情況，
因為1s定時重新整理占用頻寬，會導致其它的請求阻斷。（ps：曾經對於定時重新整理做過乙個優化，即在發下乙個請求前，取消上次的http請求，但感覺還是很蹩腳，感興趣的可以去研究下）
基於上述情況，最後採用websocket實時推送，在介紹使用前，有一些關於websocket特性在此說明下
websocket特性：
一、主要有ws（不加密）和wss（加密）；ws是基於http請求建立握手，wss是基於https請求建立握手
二、ws的握手基於http的get方式，協議應不小於1.1
二、ws和wss的請求頭會比單純的http的請求頭多很多特殊的header
三、ws請求在建立連線後，通訊雙方都可以在任何時刻向另一方傳送資料（http只能客戶端傳送請求給服務端）
w3c對websocket的介紹：
阮一峰大師的帖子：
專案環境：vue nginx webpack
本地跑專案(http://localhost:8080/)，專案位址是http，可以傳送ws請求，本地使用webpack**
//本地開發到這裡一切都很順利，接下來需要線上測試環境**websocket，線上環境使用nginx**，如下修改nginx配置修改vue.config.js檔案
devserver:
},'/socket':
}}}
配置的屬性引數：map指令：根據變數$http_upgrade的值建立新的變數$connection_upgrade，建立規則就是{}裡面的東西，若規則沒有做匹配，則$connection_upgrade為預設值upgrade，若$http_upgrade為空字串的話，則$connection_upgrade值會是 close。proxy_pass：要**到的url
roxy_http_version：**時使用的 http版本
proxy_set_header host：http請求的主機網域名稱
proxy_set_header x-real-ip：給**設定原http請求的ip,填寫$remote_addr即可
proxy_set_header upgrade：把**時http請求頭的upgrade設定為原來http請求的請求頭,wss協議的請求頭為websocket
proxy_set_header connection：因為**的wss協議,所以http請求頭的connection設定為upgrade
nginx**設定好後，線上訪問控制台報錯：
上圖的意思是在https的專案裡需要發起wss請求，故如下修改：
到這裡，客戶端和伺服器已能通訊。
在此需要特別注意：https是加密請求，需要ssl加密，nginx配置https的**（wss的握手階段是https請求）
本文暫不介紹如何配置ssl，因為本專案的線上環境，閘道器做了攔截，會把https請求替換為http，wss請求替換為ws，這一點就省去申請ca證書和配置nginx支援https的麻煩
經過上面的配置，我們的websocket在nginx上跑起來了，萬分歡喜的我們，發現一分鐘不發訊息就自動**了。
造成原因：預設情況下，如果**伺服器nginx在60s內沒有傳輸任何資料，則連線將被關閉。
解決方案：nginx給出兩種解決方案：
2.客戶端瀏覽器定時傳送心跳包（時間要短於proxy_read_timeout）。
第一種簡單粗暴（我試了還沒有成功，還請各位大神賜教），但是時間再長也是乙個值，還是會有超時的可能，基於此我使用第二種方案，在60s內定時傳送心跳包來重置保持連線的時間。
vue單頁面**如下：
export defaultps：當客戶端網路不好，或者斷網，伺服器並不知情，還是會給客戶端推送訊息，造成資源浪費，故後端伺服器要做異常處理，在訊息推送不成功，主動關閉websocket連線。},created () ,
methods: ://
$/socket`
this.socket = new websocket(`$/meeting/wsserver/pc-$`)
this.socket.onmessage = (evt) =>
}//監聽視窗事件，當視窗關閉時，主動斷開websocket連線
window.onbeforeunload = () =>
},/**
* 定時傳送心跳包
* 59s傳送一次心跳，比nginx設定的最大連線時間短一點，以達到在臨界點重置連線時間
*/heartcheck ()
else
}}, 59 * 1000)}}}
在此遇到乙個問題，所有問題都解決了，但是始終建立握手沒成功，後經排查是後端對ws的請求也做了登入攔截，檢測沒有使用者token，給拒絕了
然後把ws的介面去除登入攔截，就調通了。
vue專案使用websocket技術
一 為什麼需要websocket？前端和後端的互動模式最常見的就是前端發資料請求，從後端拿到資料後展示到頁面中。如果前端不做操作，後端不能主動向前端推送資料，這也是http協議的缺陷。因此，一種新的通訊協議應運而生 websocket，他最大的特點就是服務端可以主動向客戶端推送訊息，客戶端也可以主動...
十八 vue全域性使用WebSocket
首先就是網上的寫法有很多但是 都是需要建立乙個物件進行相關的狀態 有的是需要建立乙個初始化方法進行相關的狀態 然後看的我就一句話 都挺好的，反正就是需要你去建立物件接收傳送訊息，然後我就在這寫乙個全域性的使用的，因為我覺得大部分就是作為訊息推送來用所以全域性來用蠻好的。websocket是什麼 首先...
vue使用 封裝websocket心跳包
這套 可以拿過去直接用 一些注意我會在下面 中加上注釋 謝謝支援 直接上 核心 這裡需要引入vuex import store from store let wsconnection 開啟websocket wsopen function e wsclose function e wsmsg fun...