websocket和SSE通信示例（無需安裝任何插件）

源碼示例（兩種方案任意切換）

data(){return {heartBeatInterval:5000,// 心跳間隔時間，單位為毫秒webSocket:null,heartBeatTimer:null,}
},
mounted() {// this.initWebSocket();//方案1，全雙工通信websocket，部署線上后要使用wss，要求線上是域名且為httpsthis.createSseConnect();//方案2，sse，單工通信（http長連接）},methods:{// sse建立連接createSseConnect(){let self = this;if(window.EventSource){const eventSource = new EventSource(`${this.$sseUrl}/sse/createConnect?clientId=${this.$store.state.user.name}`);eventSource.onmessage = (e) =>{console.log("msg info:", e.data);self.handleMessage(JSON.parse(e.data))};eventSource.onopen = (e) =>{console.log("已建立連接~")};eventSource.onerror = (e) =>{if (e.readyState == EventSource.CLOSED) {console.log("連接關閉");} else if (eventSource.readyState == EventSource.CONNECTING) {console.log("正在重連");} else {console.log('error', e);}};eventSource.close = (e) =>{console.log("連接關閉");};}else{console.log("你的瀏覽器不支持消息通信~")}console.log(" 測試 打印")},handleMessage(data) {this.msgContent = data.messageTitle;this.messageId = data.messageId;this.newMsgCount = data.newInfoCount;if(this.msgContent){this.showMessagePop = true;}},initWebSocket() {this.webSocket = new WebSocket(`${this.$websocketUrl}/websocket/${this.$store.state.user.name}`);this.webSocket.onopen = () => {// 建立連接后開始發送心跳包this.startHeartBeat();};this.webSocket.onmessage = (event) => {// 處理服務器發送的消息this.handleMessage(JSON.parse(event.data))};this.webSocket.onclose = () => {console.log('WebSocket連接已關閉');// 連接關閉后停止心跳包this.stopHeartBeat();   // 可根據需要重新連接// reconnect();};},startHeartBeat() {// 每隔一段時間發送心跳包this.heartBeatTimer = setInterval(() => {if (this.webSocket.readyState === this.webSocket.OPEN) {this.webSocket.send('hello,這是一個心跳包'); // 發送心跳包}}, this.heartBeatInterval);},stopHeartBeat() {// 停止心跳包發送clearInterval(this.heartBeatTimer);},}

注意事項

使用websocket要注意

1. websocket一段時間后會自動關閉鏈接，所以要定時發送心跳包請求檢測心跳以保證鏈接持續有效
2. 在vue項目中配置代理時要注意target地址是ws協議的target: 'ws://x.x.x.x:8080',
3. websocket打包部署線上必須走wss，這就要求線上域名為https請求

使用SSE要注意

1.當確認請求地址無誤，postman也可以請求通，但是唯獨在項目中請求一直pending時，前端可以在devServer中配置compress:false,參數來解決。
2.當本地請求正常，部署到線上之后就一直請求超時，statuscode欄顯示已屏蔽mixed-content，讓后端在nginx配置中加上buffer相關的配置即可