文章目錄

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

一、WebSocket用來干什么的？

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

特點：

（1）和 HTTP 一樣屬于應用層協議，也是建立在 TCP 協議之上，服務器端的實現比較容易。

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

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

（4）可以發送文本，也可以發送二進制數據。

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

（6）協議標識符是ws（如果加密，則為wss），服務器網址就是 URL。

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

二、WebSocket的屬性

WebSocket.binaryType
使用二進制的數據類型連接。

WebSocket.bufferedAmount 只讀
未發送至服務器的字節數。

WebSocket.extensions 只讀
服務器選擇的擴展。

WebSocket.onclose
用于指定連接關閉后的回調函數。

WebSocket.onerror
用于指定連接失敗后的回調函數。

WebSocket.onmessage
用于指定當從服務器接受到信息時的回調函數。

WebSocket.onopen
用于指定連接成功后的回調函數。

WebSocket.protocol 只讀
服務器選擇的下屬協議。

WebSocket.readyState 只讀
當前的鏈接狀態。

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

三、WebSocket的方法

WebSocket.close([code[, reason]]) 關閉當前鏈接。 WebSocket.send(data) 對要傳輸的數據進行排隊。

三、WebSocket的事件

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

error
當一個 WebSocket 連接因錯誤而關閉時觸發，例如無法發送數據時。
也可以通過 onerror 屬性來設置.

message
當通過 WebSocket 收到數據時觸發。
也可以通過 onmessage 屬性來設置。

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

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

<template><button @click="closeWs">關閉連接</button> </template> // WebSocet 通信模型// 1. 撥打電話（建立連接）// 注意：wss://echo.websocket.org 是一個在線的測試接口，僅用于 WebSocket 協議通信測試使用const ws = new WebSocket('wss://echo.websocket.org');// 當連接建立成功，觸發 open 事件ws.onopen = function(evt) {console.log('建立連接成功 ...');// 連接建立成功以后，就可以使用這個連接對象通信了// send 方法發送數據ws.send('Hello WebSockets!');ws.send('我屮艸芔茻!！！第一次連接');};// 當接收到對方發送的消息的時候，觸發 message 事件// 我們可以通過回調函數的 evt.data 獲取對方發送的數據內容ws.onmessage = function(evt) {console.log('接收到消息: ' + evt.data);// 當不需要通信的時候，可以手動的關閉連接// ws.close();};// 當連接斷開的時候觸發 close 事件ws.onclose = function(evt) {console.log('我屮艸芔茻!！！第一次關閉');}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()}} }

最后的顯示結果：

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

五、后端Demo…

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。