vue專案使用websocket實現資料實時推送

2022-07-24 07:12:10 字數 986 閱讀 4479

寫了乙個關於工程的專案,關於工地資料的實時監控 

1.後端要先寫好資料,將資料傳遞給前端

2.在前端頁面:

$(function

()else

//連線發生錯誤的**方法

websocket.onerror = function

() ;

//連線成功建立的**方法

websocket.onopen = function

()

//接收到訊息的**方法

websocket.onmessage = function

(event)

//連線關閉的**方法

websocket.onclose = function

()

//監聽視窗關閉事件,當視窗關閉時,主動去關閉websocket連線,防止連線還沒斷開就關閉視窗,server端會拋異常。

window.onbeforeunload = function

()

//將訊息顯示在網頁上

function

setmessageinnerhtml(innerhtml)

//關閉websocket連線

function

closewebsocket()

//傳送訊息

function

send()

}

注意:有寫要求是一進去就要請求websocket返回資料的,或者是檢視時再請求介面返回資料的。其實如果頁面只有乙個請求還好,你離開頁面或者關閉時websocket介面並沒有斷開,這樣是使頁面載入資料變慢,造成不好的體驗

//

關閉websocket連線

function

closewebsocket()

這樣寫就可以拿到資料,當然要看後台多少時間給你推送資料,這樣頁面上的資料就可以實時更新了。

大概的內容就是這些,如有不足歡迎補充!

vue專案使用tinymce

首先直接 npm install tinymce s 把node modules tinymce下的skins資料夾和中文語言包解壓後的資料夾放到專案根目錄下 話不多說直接上 建立元件editor.vue 如下 class editor value content setting editorset...

vue專案svg使用

檔案 const path require path 傳遞乙個相對路徑,會處理得到乙個相對路徑 function resolve dir module.exports end 此時其實已經可以使用了 template中 icon qq use svg 在script中 import icons sv...

使用vue建立專案

在桌面建立乙個vue資料夾用來放置專案 終端輸入 cd desktop vue vue init webpack vuetest vuetest是專案名字 然後一路回車 進入專案 cd vuetest cnpm install 第一次建立時需要 以後開啟就不需要 cnpm run dev 如果dev...