利用html5的websocket實(shí)現(xiàn)websocket聊天室

2020-03-24 16:16:29

字體：大中小

供稿：網(wǎng)友

什么是websocketWebSocket 協(xié)議是html5引入的一種新的協(xié)議，其目的在于實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信。看了上面鏈接的同學(xué)肯定對(duì)過(guò)去怎么低效率高消耗（輪詢或comet）的做此事已經(jīng)有所了解了，而在websocket API，瀏覽器和服務(wù)器只需要要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。同時(shí)這么做有兩個(gè)好處

1.通信傳輸字節(jié)減少：比起以前使用http傳輸數(shù)據(jù)，websocket傳輸?shù)念~外信息很少，據(jù)百度說(shuō)只有2k

2.服務(wù)器可以主動(dòng)向客戶端推送消息，而不用客戶端去查詢

關(guān)于概念和好處，網(wǎng)上到處都是，不再贅述，簡(jiǎn)單看看其原理，然后動(dòng)手寫一個(gè)web版聊天室吧

握手除了TCP連接的三次握手，websocket協(xié)議中客戶端與服務(wù)器想建立連接需要一次額外的握手動(dòng)作，在最新版的協(xié)議中是這個(gè)樣子的

客戶端向服務(wù)器發(fā)送請(qǐng)求

復(fù)制代碼代碼如下:
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:8080
Origin: a http://test.com /a
Pragma: no-cache
Cache-Control: no-cache
Sec-WebSocket-Key: OtZtd55qBhJF2XLNDRgUMg==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36
服務(wù)器給出響應(yīng)

復(fù)制代碼代碼如下:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=

在請(qǐng)求中的 Sec-WebSocket-Key 是隨機(jī)的，服務(wù)器端會(huì)用這些數(shù)據(jù)來(lái)構(gòu)造出一個(gè)SHA-1的信息摘要。把 Sec-WebSocket-Key 加上一個(gè)魔幻字符串 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 。使用 SHA-1 加密，之后進(jìn)行 BASE-64編碼，將結(jié)果做為 Sec-WebSocket-Accept 頭的值，返回給客戶端（來(lái)自維基百科）。

websocket API經(jīng)過(guò)握手之后瀏覽器與服務(wù)器建立連接，兩者就可以互相通信了。websocket的API真心很簡(jiǎn)單，看看W3C的定義

復(fù)制代碼代碼如下:
enum BinaryType { "blob", "arraybuffer" };
[Constructor(DOMString url, optional (DOMString or DOMString[]) protocols)]
interface WebSocket : EventTarget {
readonly attribute DOMString url;

// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2;
const unsigned short CLOSED = 3;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;

// networking
attribute EventHandler onopen;
attribute EventHandler onerror;
attribute EventHandler onclose;
readonly attribute DOMString extensions;
readonly attribute DOMString protocol;
void close([Clamp] optional unsigned short code, optional DOMString reason);

// messaging
attribute EventHandler onmessage;
attribute BinaryType binaryType;
void send(DOMString data);
void send(Blob data);
void send(ArrayBuffer data);
void send(ArrayBufferView data);
};

創(chuàng)建websocket

復(fù)制代碼代碼如下:
ws=new WebSocket(address); //ws://127.0.0.1:8080

調(diào)用其構(gòu)造函數(shù)，傳入地址，就可以創(chuàng)建一個(gè)websocket了，值得注意的是地址協(xié)議得是ws/wss

關(guān)閉socket

復(fù)制代碼代碼如下:
ws.close();

調(diào)用webservice實(shí)例的close()方法就可以關(guān)閉webservice，當(dāng)然也可以傳入一個(gè)code和string說(shuō)明為什么關(guān)了

幾個(gè)回調(diào)函數(shù)句柄

由于其異步執(zhí)行，回調(diào)函數(shù)自然少不了，有四個(gè)重要的

onopen：連接創(chuàng)建后調(diào)用
onmessage：接收到服務(wù)器消息后調(diào)用
onerror：出錯(cuò)時(shí)調(diào)用
onclose：關(guān)閉連接的時(shí)候調(diào)用看名字就知道是干什么的了，每個(gè)回調(diào)函數(shù)都會(huì)傳入一個(gè)Event對(duì)象，可以通過(guò)event.data訪問(wèn)消息

使用API

我們可以在創(chuàng)建socket成功后為其回調(diào)函數(shù)賦值

復(fù)制代碼代碼如下:
ws=new WebSocket(address);
ws.onopen=function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server connection open.";
msgContainer.appendChild(msg);
ws.send('{ '+document.getElementById('name').value+'

也可以通過(guò)事件綁定的方式

復(fù)制代碼代碼如下:
ws=new WebSocket(address);
ws.addEventListener('open',function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server connection open.";
msgContainer.appendChild(msg);
ws.send('{ '+document.getElementById('name').value+'
客戶端實(shí)現(xiàn)
其實(shí)客戶端的實(shí)現(xiàn)比較簡(jiǎn)單，除了websocket相關(guān)的幾句就是一些自動(dòng)focus、回車鍵事件處理、消息框自動(dòng)定位到底部等簡(jiǎn)單功能，不一一說(shuō)明了html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html中的checkbox和radio事件選擇用法詳解

下一篇：有關(guān)html的正確描述