您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)h5中的Websocket怎么用,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
WebSocket
的服務(wù)端和客戶端可以雙向進(jìn)行通訊,并且允許跨域通訊。由HTTP/1.1
的Upgrade
機(jī)制支持,通過ws
(非加密)或wss
(加密)協(xié)議進(jìn)行通訊
WebSocket WebSocket( in DOMString url, in optional DOMString protocols ); WebSocket WebSocket( in DOMString url, in optional DOMString[] protocols );
HTML5
只專注于客戶端的API
, 而服務(wù)器端是各個(gè)語(yǔ)言自己去實(shí)現(xiàn)
// 創(chuàng)建一個(gè)Socket實(shí)例 var socket = new WebSocket('ws://localhost:8080'); // 打開Socket socket.onopen = function(event){ // 發(fā)送一個(gè)初始化消息 socket.send('I am the client and I\'m listening!'); // 監(jiān)聽消息 socket.onmessage = function(event){ console.log('Client received a message',event); }; // 監(jiān)聽Socket的關(guān)閉 socket.onclose = function(event){ console.log('Client notified socket has closed',event); }; // 關(guān)閉Socket.... //socket.close() };
事件onclose
onerror
onmessage
onopen
屬性
readyState
: CONNECTING 0
OPEN 1
CLOSING 2
CLOSED 3
binaryType
: String
Blob
ArrayBuffer
方法1:
如果客戶端不支持WebSocket
, 那么可以使用幾個(gè)候選選項(xiàng) Flash Socket
AJAX long-polling
AJAX multipart streaming
IFrame
JSONP polling
方法2
使用Socket.io
來(lái)抹平差異,該庫(kù)可以在瀏覽器不支持WebSocket
的時(shí)候, 自動(dòng)用瀏覽器支持的消息推送方式進(jìn)行連接, 該庫(kù)還會(huì)檢測(cè)連接是否掉線,并在掉線時(shí)自動(dòng)為你重新連接。
// 創(chuàng)建Socket.IO實(shí)例,建立連接 var socket= new io.Socket('localhost',{ port: 8080, }); socket.connect(); // 添加一個(gè)連接監(jiān)聽器 socket.on('connect',function(){ console.log('Client has connected to the server!'); }); // 添加一個(gè)連接監(jiān)聽器 socket.on('message',function(data){ console.log('Received a message from the server!',data); }); // 添加一個(gè)關(guān)閉連接的監(jiān)聽器 socket.on('disconnect',function(){ console.log('The client has disconnected!'); }); // 通過Socket發(fā)送一條消息到服務(wù)器 function sendMessageToServer(message){ socket.send(message); }
實(shí)時(shí)雙向通信
瀏覽器本地支持良好(兼容性可以用第三方庫(kù)很好解決)
支持自定義協(xié)議
聊天室
服務(wù)器消息推送
前后端實(shí)時(shí)系統(tǒng)
關(guān)于“h5中的Websocket怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。