WebSocket API 詳解
WebSocket API 是 HTML5 標(biāo)準(zhǔn)化之后的一項(xiàng) API，它可用于建立客戶端和服務(wù)器之間的雙向通信連接。
WebSocket 構(gòu)造函數(shù)
用于創(chuàng)建并返回一個(gè) WebSocket 對象。
示例：
//創(chuàng)建WebSocket對象，并指定服務(wù)端地址
var ws = new WebSocket("ws://localhost:8080");
WebSocket.readyState
表示 WebSocket 連接的狀態(tài)。
示例：
if (ws.readyState === WebSocket.OPEN) {
//connection is open
}
WebSocket.bufferedAmount
用于獲取 WebSocket 對象在發(fā)送緩沖區(qū)中的字節(jié)數(shù)。
示例：
var bufferedAmount = ws.bufferedAmount;
WebSocket.extensions
用于獲取 WebSocket 對象所用的擴(kuò)展。
示例：
var extensions = ws.extensions;
WebSocket.protocol
用于獲取 WebSocket 對象使用的協(xié)議。
示例：
var protocol = ws.protocol;
WebSocket.url
用于獲取 WebSocket 連接的 URL。
示例：
var url = ws.url;
WebSocket.send()
用于向服務(wù)器發(fā)送數(shù)據(jù)。
示例：
ws.send("Hello, server!");
WebSocket.close()
用于關(guān)閉 WebSocket 連接。
示例：
ws.close();
WebSocket.onerror
用于指定一個(gè)函數(shù)在 WebSocket 連接發(fā)生錯(cuò)誤時(shí)被調(diào)用。
示例：
ws.onerror = function(error) {
console.log(error);
};
WebSocket.onopen
用于指定一個(gè)函數(shù)在WebSocket連接成功建立時(shí)被調(diào)用
示例：
ws.onopen = function() {
console.log("Connection open!");
};
WebSocket.onclose
用于指定一個(gè)函數(shù)在 WebSocket 連接關(guān)閉時(shí)被調(diào)用。
示例：
ws.onclose = function() {
console.log("Connection closed!");
};
WebSocket.onmessage
用于指定一個(gè)函數(shù)在 WebSocket 接收到服務(wù)器發(fā)送的數(shù)據(jù)時(shí)被調(diào)用。
示例：
ws.onmessage = function(event) {
console.log("Data received: " + event.data);
};
以上就是WebSocket對象的所有API以及相應(yīng)的示例。
前端實(shí)踐 WebSocket
Nodejs 起一個(gè) WebSocket 服務(wù)
我們需要使用 Nodejs 去起一個(gè) WebSocket 服務(wù)，具體代碼如下：
// 引入nodejs-websocket
const ws = require('nodejs-websocket');
// 定義監(jiān)聽的host地址跟port端口
const HOST = '127.0.0.1'
const PORT = 3001;
// 創(chuàng)建ws服務(wù)
const service = ws.createServer((conn) => {
conn.on('text', (message) => {
// 當(dāng)收到消息的時(shí)候就開始定時(shí)推送
console.log('message', message);
setInterval(() => {
// 隨機(jī)推送message里的內(nèi)容
conn.sendText(`Now is ${new Date().getTime()}`);
}, 1 * 1000);
});
}).listen(PORT, HOST, () => {
console.log('service---success');
});
頁面編寫
我們需要?jiǎng)?chuàng)建一個(gè) index.html，并寫入以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = () => {
if ('WebSocket' in window) {
// 創(chuàng)建websocket連接
let ws = new WebSocket('ws://127.0.0.1:3001/websocket');
// 成功連接的時(shí)候推送一條消息，此時(shí)服務(wù)端就可以開始推送數(shù)據(jù)了
ws.onopen = () => {
console.log('websocket success---');
ws.send('success');
}
ws.onmessage = (message) => {
let data = message.data;
console.log('get websocket message---', data);
}
ws.onerror = () => {
console.error('websocket fail');
}
} else {
console.error('dont support websocket');
};
};
</script>
</head>
<body>
</body>
</html>
啟動(dòng)頁面
在 index.html 右鍵，并打開此文件：
查看效果
可以看到后端先接收到前端的信息，open 建立成功：
然后建立連接后，后端一直在為前端輸出信息：
調(diào)試 WebSocket 服務(wù)
如果你正在編寫 WebSocket 服務(wù)并需要進(jìn)行調(diào)試，可以使用 Apifox 來調(diào)試 WebSocket 服務(wù)~
谷歌插件
Apifox 有 Web端 和 客戶端，如果你使用的是 Web端，想要調(diào)試本地服務(wù)，需要安裝 Apifox 的 谷歌插件。
下載地址：Apifox 谷歌瀏覽器插件。
新建 WebSocket 請求
WebSocket 是客戶端和服務(wù)端之間的長鏈接，因此你需要在 Apifox 中創(chuàng)建一個(gè) WebSocket 請求，以便跳轉(zhuǎn)到 Apifox 界面并填寫相應(yīng)的請求信息
- 點(diǎn)擊創(chuàng)建按鈕
- 填入 WebSocket 服務(wù)的地址
- 可以選擇填寫 Message 和 Params
Message 和 Params
Message
在 Message 中，你可以填寫要傳遞到服務(wù)端的信息。服務(wù)端將接收你發(fā)送的信息。
Params
在傳輸過程中，你也可以攜帶參數(shù)，可以通過在地址上添加查詢參數(shù)完成，可以攜帶的數(shù)據(jù)類型包括：
- string
- integer
- number
- array
保存請求
寫完所需信息之后，可以點(diǎn)擊 保存按鈕，進(jìn)行保存，方便下次可繼續(xù)調(diào)用。
連接、發(fā)送 WebSocket 請求
連接 WebSocket 服務(wù)
我們想要跟服務(wù)端進(jìn)行 WebSocket 通信，就需要先建立一個(gè) WebSocket 連接，我們只需要點(diǎn)擊 連接 按鈕。
連接成功之后，Apifox 有成功的提示：
服務(wù)端那邊也會(huì)因?yàn)檫B接成功，而做出響應(yīng)。
發(fā)送 WebSocket 請求
接著我們就可以跟服務(wù)端進(jìn)行 WebSocket 通信了。
我們可以使用 Apifox 點(diǎn)擊發(fā)送按鈕向服務(wù)端進(jìn)行發(fā)送 Message、Params。
與 WebSocket 服務(wù)通信
發(fā)送之后，服務(wù)端也可以向客戶端發(fā)送信息，例如我這里，我設(shè)置服務(wù)端每秒向客戶端發(fā)送當(dāng)時(shí)的時(shí)間戳~
這就是 Apifox 的 WebSocket 功能，非常方便。
最后感謝每一個(gè)認(rèn)真閱讀我文章的人，禮尚往來總是要有的，雖然不是什么很值錢的東西，如果你用得到的話可以直接拿走：
這些資料，對于【軟件測試】的朋友來說應(yīng)該是最全面最完整的備戰(zhàn)倉庫，這個(gè)倉庫也陪伴上萬個(gè)測試工程師們走過最艱難的路程，希望也能幫助到你！文章來源：http://www.zghlxwxcb.cn/news/detail-781410.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-781410.html
到了這里，關(guān)于輕松掌握 WebSocket API 的使用方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
