溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關HTML5中的WebSocket協議有什么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
1、背景
很多網站為了實現推送技術，所用的技術都是Ajax輪詢。輪詢是在特定的的時間間隔由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。HTML5新增的一些新協議WebSocket,可以提供在單個TCP連接上提供全雙工，雙向通信，能夠節省服務器資源和帶寬，并且能夠實時進行通信。
2、WebSocket介紹
傳統的http也是一種協議，WebSocket是一種協議，使用http服務器無法實現WebSocket，
2.1.瀏覽器支持情況
基本主流瀏覽器都支持
2.2.優點
相對于http有如下好處：
1.客戶端與服務器只建立一個TCP連接，可以使用更少的連接。
2.WebSocket服務器端可以主動推送數據到客戶端，更靈活高效。
3.更輕量級的協議頭，減少數據傳送量。
對比輪訓機制
3、WebSocket用法
我們了解WebSocket是什么，有哪些優點后，怎么使用呢？
3.1.WebSocket創建
WebSocket使用了自定義協議，url模式與http略有不同，未加密的連接是ws://，加密的連接是wss://，WebSocket實例使用new WebSocket()方法來創建，
var ws = new WebSocket(url, [protocol] );第一個參數 url, 指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。
3.2.WebSocket屬性
當創建ws對象后，readyState為ws實例狀態，共4種狀態
0 表示連接尚未建立。
1 表示連接已建立，可以進行通信。
2 表示連接正在進行關閉。
3 表示連接已經關閉或者連接不能打開。
Tips：在發送報文之前要判斷狀態，斷開也應該有重連機制。
3.3.WebSocket事件
在創建ws實例對象后，會擁有以下幾個事件，根據不同狀態可在事件回調寫方法。
ws.onopen 連接建立時觸發
ws.onmessage 客戶端接收服務端數據時觸發
ws.onerror 通信發生錯誤時觸發
ws.onclose 連接關閉時觸發
ws.onmessage = (res) => {
console.log(res.data);
};
ws.onopen = () => {
console.log('OPEN...');
};
ws.onclose=()=>{
console.log('CLOSE...');
}3.4.WebSocket方法
ws.send() 使用連接發送數據(只能發送純文本數據)
ws.close() 關閉連接
4、Demo演示
了解WebSocket的一些API之后，趁熱打鐵，做一個小案例跑一下。
4.1.Node服務器端
WebSocket協議與Node一起用非常好，原因有以下兩點：
1.WebSocket客戶端基于事件編程與Node中自定義事件差不多。
2.WebSocket實現客戶端與服務器端長連接，Node基本事件驅動的方式十分適合高并發連接
創建一個webSocket.js如下：
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function (ws) {
console.log('client connected');
ws.on('message', function (message) {
ws.send('我收到了' + message);
});
});打開windows命令窗口運行
4.2.HTML客戶端
新建一個index.html頁面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSocket小Demo</title>
</head>
<body>
<div class="container">
<div>
<input type="text" id="msg">
<button onclick="sendMsg()">發送報文</button>
</div>
</div>
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (res) => {
console.log(res);
};
ws.onopen = () => {
console.log('OPEN...');
};
ws.onclose = () => {
console.log('CLOSE...');
}
function sendMsg() {
let msg = document.getElementById('msg').value;
ws.send(msg);
}
</script>
</body>打開瀏覽器依次輸入字符1,2,3，每次輸入完點擊發送報體，可見在ws.onmessage事件中res.data中返回來我們發的報文。
感謝各位的閱讀！關于“HTML5中的WebSocket協議有什么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
