vue專案使用websocket技術

2022-02-06 08:27:32 字數 1160 閱讀 6109

一、為什麼需要websocket?

前端和後端的互動模式最常見的就是前端發資料請求,從後端拿到資料後展示到頁面中。如果前端不做操作,後端不能主動向前端推送資料,這也是http協議的缺陷。

因此,一種新的通訊協議應運而生---websocket,他最大的特點就是服務端可以主動向客戶端推送訊息,客戶端也可以主動向服務端傳送訊息,實現了真正的平等。

websocket其他特點如下:

(1)建立在 tcp 協議之上,伺服器端的實現比較容易。

(2)與 http 協議有著良好的相容性。預設埠也是80和443,並且握手階段採用 http 協議,因此握手時不容易遮蔽,能通過各種 http **伺服器。

(3)資料格式比較輕量,效能開銷小,通訊高效。

(4)可以傳送文字,也可以傳送二進位制資料。

(5)沒有同源限制,客戶端可以與任意伺服器通訊。

(6)協議識別符號是ws(如果加密,則為wss),伺服器**就是 url。

二、vue專案如何引用websocket?

vue使用websocket需要注意以下幾點:

(1)首先需要判斷瀏覽器是否支援websocket,關於如何解決相容性問題可以參考這裡這裡

(2)在元件載入的時候連線websocket,在元件銷毀的時候斷開websocket

(3)後端介面需要引入socket模組,否則不能實現連線

不廢話了,直接附上完整**:

發訊息

歡迎關注我的開源專案,react-admin-plus,歡迎star

我的個人主頁,位址

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...