文章目錄

• 一、WebSocket用來干什么的？
• • 特點：
• 二、WebSocket的屬性
• 三、WebSocket的方法
• 三、WebSocket的事件
• 四、Vue中使用WebSocket的Demo（只有前端發(fā)送）
• 五、后端Demo......

一、WebSocket用來干什么的？

就簡單而言，WebSocket就做一些原來Http無法做的事，以前Http必須請求才有回應(yīng)，現(xiàn)在WebSocket變成了連接后，服務(wù)器就可以主動了，不再被動~

特點：

（1）和 HTTP 一樣屬于應(yīng)用層協(xié)議，也是建立在 TCP 協(xié)議之上，服務(wù)器端的實現(xiàn)比較容易。

（2）與 HTTP 協(xié)議有著良好的兼容性。默認端口也是 80 和 443，并且握手階段（第 1 次建立連接）采用 HTTP 協(xié)議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務(wù)器。

（3）數(shù)據(jù)格式比較輕量，性能開銷小，通信高效。

（4）可以發(fā)送文本，也可以發(fā)送二進制數(shù)據(jù)。

（5）沒有同源跨域限制，客戶端可以與任意服務(wù)器通信。
WebSocket 不是用來代替 HTTP 的，它是用來解決實時通信的業(yè)務(wù)場景。如果業(yè)務(wù)不需要實時性，那就沒必要使用 WebSocket。
WebSocket 也是有資源消耗的，因為它要實時通信，也是需要和服務(wù)端保持一定的通信連接。
WebSocket 也是需要服務(wù)端配合才能使用。

（6）協(xié)議標識符是ws（如果加密，則為wss），服務(wù)器網(wǎng)址就是 URL。

（7）瀏覽器專門為 WebSocket 通信提供了一個請求對象 WebSocket

二、WebSocket的屬性

WebSocket.binaryType
使用二進制的數(shù)據(jù)類型連接。

WebSocket.bufferedAmount 只讀
未發(fā)送至服務(wù)器的字節(jié)數(shù)。

WebSocket.extensions 只讀
服務(wù)器選擇的擴展。

WebSocket.onclose
用于指定連接關(guān)閉后的回調(diào)函數(shù)。

WebSocket.onerror
用于指定連接失敗后的回調(diào)函數(shù)。

WebSocket.onmessage
用于指定當從服務(wù)器接受到信息時的回調(diào)函數(shù)。

WebSocket.onopen
用于指定連接成功后的回調(diào)函數(shù)。

WebSocket.protocol 只讀
服務(wù)器選擇的下屬協(xié)議。

WebSocket.readyState 只讀
當前的鏈接狀態(tài)。

WebSocket.url 只讀
WebSocket 的絕對路徑。

三、WebSocket的方法

WebSocket.close([code[, reason]]) 關(guān)閉當前鏈接。 WebSocket.send(data) 對要傳輸?shù)臄?shù)據(jù)進行排隊。

三、WebSocket的事件

close (en-US)
當一個 WebSocket 連接被關(guān)閉時觸發(fā)。
也可以通過 onclose 屬性來設(shè)置。

error
當一個 WebSocket 連接因錯誤而關(guān)閉時觸發(fā)，例如無法發(fā)送數(shù)據(jù)時。
也可以通過 onerror 屬性來設(shè)置.

message
當通過 WebSocket 收到數(shù)據(jù)時觸發(fā)。
也可以通過 onmessage 屬性來設(shè)置。

open (en-US)
當一個 WebSocket 連接成功時觸發(fā)。
也可以通過 onopen 屬性來設(shè)置。

四、Vue中使用WebSocket的Demo（只有前端發(fā)送）

<template><button @click="closeWs">關(guān)閉連接</button> </template> // WebSocet 通信模型// 1. 撥打電話（建立連接）// 注意：wss://echo.websocket.org 是一個在線的測試接口，僅用于 WebSocket 協(xié)議通信測試使用const ws = new WebSocket('wss://echo.websocket.org');// 當連接建立成功，觸發(fā) open 事件ws.onopen = function(evt) {console.log('建立連接成功 ...');// 連接建立成功以后，就可以使用這個連接對象通信了// send 方法發(fā)送數(shù)據(jù)ws.send('Hello WebSockets!');ws.send('我屮艸芔茻!！！第一次連接');};// 當接收到對方發(fā)送的消息的時候，觸發(fā) message 事件// 我們可以通過回調(diào)函數(shù)的 evt.data 獲取對方發(fā)送的數(shù)據(jù)內(nèi)容ws.onmessage = function(evt) {console.log('接收到消息: ' + evt.data);// 當不需要通信的時候，可以手動的關(guān)閉連接// ws.close();};// 當連接斷開的時候觸發(fā) close 事件ws.onclose = function(evt) {console.log('我屮艸芔茻!！！第一次關(guān)閉');}export default {data () {return {options: [{ label: 'None', value: 'None' },{ label: 'Lower', value: 'Lower' },{ label: 'Upper', value: 'Upper' },{ label: 'Initial', value: 'Initial' }]}},computed: {},created () {},methods: {closeWs() {console.log('closeWs');ws.close()}} }

最后的顯示結(jié)果：

建立連接成功 …
接收到消息: Hello WebSockets!
接收到消息: 我屮艸芔茻!！！第一次連接
closeWs
我屮艸芔茻!！！第一次關(guān)閉

五、后端Demo…

總結(jié)

以上是生活随笔為你收集整理的WebSocket的学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。