WebSocket使用以及在vue如何使用問題
WebSocket
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
現(xiàn)在，很多網(wǎng)站為了實現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每 1 秒），由瀏覽器對服務(wù)器發(fā)出 HTTP 請求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。
這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而 HTTP 請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實時地進(jìn)行通訊。
瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。
當(dāng)你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務(wù)器發(fā)送數(shù)據(jù)，并通過 onmessage 事件來接收服務(wù)器返回的數(shù)據(jù)。
WebSocket 實例
WebSocket 協(xié)議本質(zhì)上是一個基于 TCP 的協(xié)議。
為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務(wù)器發(fā)起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"表明這是一個申請協(xié)議升級的 HTTP 請求，服務(wù)器端解析這些附加的頭信息然后產(chǎn)生應(yīng)答信息返回給客戶端，客戶端和服務(wù)器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，并且這個連接會持續(xù)存在直到客戶端或者服務(wù)器端的某一方主動的關(guān)閉連接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鳥教程(runoob.com)</title>
<script type="text/javascript">
function WebSocketTest() {
if ("WebSocket" in window) {
alert("您的瀏覽器支持 WebSocket!")
// 打開一個 web socket
var ws = new WebSocket("ws://localhost:9998/echo")
ws.onopen = function () {
// Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
ws.send("發(fā)送數(shù)據(jù)")
alert("數(shù)據(jù)發(fā)送中...")
}
ws.onmessage = function (evt) {
var received_msg = evt.data
alert("數(shù)據(jù)已接收...")
}
ws.onclose = function () {
// 關(guān)閉 websocket
alert("連接已關(guān)閉...")
}
} else {
// 瀏覽器不支持 WebSocket
alert("您的瀏覽器不支持 WebSocket!")
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()" rel="external nofollow" >運行 WebSocket</a>
</div>
</body>
</html>socket.io 簡介
socket.io 是一個類庫，內(nèi)部封裝了 WebSocket，可以在瀏覽器與服務(wù)器之間建立實時通信。
如果某些舊版本的瀏覽器不支持 WebSocket，socket.io 會使用輪詢代替。另外它還具有可發(fā)送二進(jìn)制消息、多路復(fù)用、創(chuàng)建房間等特性，因此相比直接使用原生 WebSocket，socket.io 是更好的選擇。
開發(fā)一個實時應(yīng)用主要分兩部分：服務(wù)端和客戶端，socket.io 分別提供了相應(yīng)的 npm 包供我們方便地調(diào)用。
接下來就通過一個生動形象且有趣的栗子分別介紹這兩大塊。
現(xiàn)在假設(shè)李白張三，李四，王五 3 個人加入了一個叫 棋牌室 的房間，在文章結(jié)束時我們將擁有一個麻雀雖小五臟俱全的峽谷英雄在線聊天室。
客戶端 api
npm i socket.io-client //安裝socket.io 為客戶端提供的npm包
接下來就可以在頁面上建立到服務(wù)器的連接了
import io from "socket.io-client"
const socket = io("http://127.0.0.1:3001") // 建立連接向服務(wù)器發(fā)送消息
const socket = io("http://127.0.0.1:3001")
socket.emit("talk", "打快點啊，天都要黑了")接收服務(wù)器發(fā)來的信息
const socket = io("http://127.0.0.1:3001")
socket.on("talk", (data) => {
console.log(data) //打印data
})李白看到了瑤的消息，強(qiáng)忍住問候?qū)Ψ郊胰说臎_動，像哄那啥似地說道：
const socket = io("http://127.0.0.1:3001")
socket.on("talk", (data) => {
socket.emit("talk", "你這么敢干啥！")
})客戶端的功能到這基本上也開發(fā)完了。
核心 api 就是 on 和 emit 用于收發(fā)消息，既簡單又優(yōu)雅。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue項目中使用vue-i18n報錯的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
webstorm提示?@路徑?Module?is?not?installed的問題
這篇文章主要介紹了webstorm提示?@路徑?Module?is?not?installed的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
使用 vue 實現(xiàn)滅霸打響指英雄消失的效果附demo
這篇文章主要介紹了使用 vue 實現(xiàn)滅霸打響指英雄消失的效果 demo,需要的朋友可以參考下2019-05-05
vue 設(shè)置 input 為不可以編輯的實現(xiàn)方法
今天小編就為大家分享一篇vue 設(shè)置 input 為不可以編輯的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了Vue組件復(fù)用和擴(kuò)展，對vue感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了Vue父組件監(jiān)聽子組件生命周期,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
Vue中使用require.context自動引入組件的操作方法
require.context?是?webpack?提供的一個API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個模塊,并且可以靈活地控制模塊的加載順序和依賴關(guān)系,本文給大家講解Vue中使用require.context自動引入組件的方法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家介紹了Vue3使用Swiper實現(xiàn)輪播圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue獲取當(dāng)前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當(dāng)前時間是一項常見的需求,本文將深入探討Vue獲取當(dāng)前系統(tǒng)日期(年月日),幫助您更好地利用當(dāng)前時間,需要的朋友可以參考下2024-01-01
?用Vue?Demi?構(gòu)建同時兼容Vue2與Vue3組件庫
這篇文章主要介紹了?用Vue?Demi?構(gòu)建同時兼容Vue2與Vue3組件庫，我們通過考慮其功能、工作原理以及如何開始使用它來了解?Vue?Demi，下面我們一起進(jìn)入文章學(xué)起來吧2022-02-02