欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)WebSocket 連接的示例代碼

 更新時(shí)間：2024年05月06日 11:48:35   作者：金包銀是喵桑  
本文主要介紹了js實(shí)現(xiàn)WebSocket 連接的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一.WebSocket 簡(jiǎn)單介紹

1.HTTP和WebSocket的區(qū)別

http：通信只能由客戶端發(fā)起；
WebSocket：服務(wù)器可以主動(dòng)向客戶端推送信息，客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息，是真正的雙向平等對(duì)話，屬于服務(wù)器推送技術(shù)的一種；在webSocket協(xié)議下客服端和瀏覽器可以同時(shí)發(fā)送信息。

2.WebSocket應(yīng)用場(chǎng)景

數(shù)據(jù)推送：webSocket可以代替ajax輪詢（即客戶端通過(guò)一定的時(shí)間間隔不斷向服務(wù)器發(fā)起請(qǐng)求獲得數(shù)據(jù)，因此會(huì)占用許多帶寬和服務(wù)器資源），但是webSocket不一樣，當(dāng)建立TCP連接后，服務(wù)器可以主動(dòng)給客戶端傳遞數(shù)據(jù)，能夠更好的節(jié)省服務(wù)器資源和帶寬，實(shí)現(xiàn)更實(shí)時(shí)的數(shù)據(jù)通訊。

在這里插入圖片描述

二.js使用WebSocket

Web Sockets能夠在客戶端和服務(wù)端之間發(fā)送非常少量的數(shù)據(jù)，而不必?fù)?dān)心HTTP那樣字節(jié)級(jí)的開(kāi)銷(xiāo)，由于傳遞的數(shù)據(jù)包很小，因此WebSockets非常適合移動(dòng)應(yīng)用。
缺點(diǎn)：制定協(xié)議的時(shí)間比制定JavaScript API的時(shí)間還要長(zhǎng)。

1.創(chuàng)建WebSocket實(shí)例

url：url之前需添加ws://（未加密）或wss://（已加密），類(lèi)似http://、https://
protocol：與服務(wù)端定義的協(xié)議名稱相同，協(xié)議的參數(shù)例如XMPP（Extensible Messaging and Presence Protocol）、SOAP（Simple Object Access Protocol）或者自定義協(xié)議。

var ws = new WebSocket('ws://url');
var ws1 = new WebSocket('ws://url', 'myprotocol');
var ws2 = new WebSocket('ws://url', ['protocol_1','protovol_2']));

2.屬性

①readyState屬性：WebSocket當(dāng)前連接狀態(tài)

屬性值屬性常量描述
0CONNECTING正在與服務(wù)端建立WebSocket連接，還沒(méi)有連接成功
1OPEN連接成功并打開(kāi)，可以發(fā)送消息
2CLOSING進(jìn)行關(guān)閉連接的操作，且尚未關(guān)閉
3CLOSE連接已關(guān)閉或不能打開(kāi)

通過(guò) ws.readyState屬性查看當(dāng)前連接狀態(tài)，例

alert('ws連接狀態(tài)：' + ws.readyState);

②bufferedAmount：檢查傳輸數(shù)據(jù)的大小，當(dāng)客戶端傳輸大量數(shù)據(jù)時(shí)使用避免網(wǎng)絡(luò)飽和
③protocol：在構(gòu)造函數(shù)中使用，protocol參數(shù)讓服務(wù)端知道客戶端使用的WebSocket協(xié)議。而WebSocket對(duì)象的這個(gè)屬性就是指的最終服務(wù)端確定下來(lái)的協(xié)議名稱，可以為空

3.方法

①發(fā)送數(shù)據(jù)：send()

var message = {
	id: 1,
	title: '發(fā)送ws數(shù)據(jù)'
}
ws.send(JSON.stringify(message));    // 復(fù)雜的數(shù)據(jù)結(jié)構(gòu)要先進(jìn)行序列化

②關(guān)閉連接：closed()

ws.close()

4.事件

WebSocket API是純事件驅(qū)動(dòng)，建立連接之后，可自動(dòng)發(fā)送狀態(tài)改變的數(shù)據(jù)和通知

事件描述
onopen當(dāng)建立websocket連接時(shí)觸發(fā)，只觸發(fā)一次
onerror當(dāng)連接出現(xiàn)錯(cuò)誤時(shí)觸發(fā)-因?yàn)楫?dāng)觸發(fā)了onerror之后連接就會(huì)觸發(fā)關(guān)閉事件
onmessage當(dāng)服務(wù)端發(fā)送數(shù)據(jù)時(shí)觸發(fā)，可多次觸發(fā)，頁(yè)面數(shù)據(jù)展示處理模塊–實(shí)現(xiàn)輪詢
onclose當(dāng)websocket連接關(guān)閉時(shí)觸發(fā)，只觸發(fā)一次

5.使用示例

var ws = new WebSocket('ws://url');
// 獲取連接狀態(tài)
console.log('ws連接狀態(tài)：' + ws.readyState);
//監(jiān)聽(tīng)是否連接成功
ws.onopen = function () {
    console.log('ws連接狀態(tài)：' + ws.readyState);
    //連接成功則發(fā)送一個(gè)數(shù)據(jù)
    ws.send('test1');
}
// 接聽(tīng)服務(wù)器發(fā)回的信息并處理展示
ws.onmessage = function (data) {
    console.log('接收到來(lái)自服務(wù)器的消息：');
    console.log(data);
    //完成通信后關(guān)閉WebSocket連接
    ws.close();
}
// 監(jiān)聽(tīng)連接關(guān)閉事件
ws.onclose = function () {
    // 監(jiān)聽(tīng)整個(gè)過(guò)程中websocket的狀態(tài)
    console.log('ws連接狀態(tài)：' + ws.readyState);
}
// 監(jiān)聽(tīng)并處理error事件
ws.onerror = function (error) {
    console.log(error);
}

到此這篇關(guān)于js實(shí)現(xiàn)WebSocket 連接的示例代碼的文章就介紹到這了,更多相關(guān)js WebSocket 連接內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論