如何利用html5的websocket實現websocket聊天室

這篇文章主要講解了“如何利用html5的websocket實現websocket聊天室”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何利用html5的websocket實現websocket聊天室”吧！

什么是websocket

 WebSocket 協議是html5引入的一種新的協議，其目的在于實現了瀏覽器與服務器全雙工通信。看了上面鏈接的同學肯定對過去怎么低效率高消耗（輪詢或comet）的做此事已經有所了解了，而在websocket API，瀏覽器和服務器只需要要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。同時這么做有兩個好處
 
1.通信傳輸字節減少：比起以前使用http傳輸數據，websocket傳輸的額外信息很少，據百度說只有2k
 
2.服務器可以主動向客戶端推送消息，而不用客戶端去查詢
 
關于概念和好處，網上到處都是，不再贅述，簡單看看其原理，然后動手寫一個web版聊天室吧
 
握手

除了TCP連接的三次握手，websocket協議中客戶端與服務器想建立連接需要一次額外的握手動作，在最新版的協議中是這個樣子的
 
客戶端向服務器發送請求
 

代碼如下:

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:8080
Origin: <a href="http://test.com">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

服務器給出響應
 

代碼如下:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=

在請求中的“Sec-WebSocket-Key”是隨機的，服務器端會用這些數據來構造出一個SHA-1的信息摘要。把“Sec-WebSocket-Key”加上一個魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用 SHA-1 加密，之后進行 BASE-64編碼，將結果做為 “Sec-WebSocket-Accept” 頭的值，返回給客戶端（來自維基百科）。
 
websocket API

經過握手之后瀏覽器與服務器建立連接，兩者就可以互相通信了。websocket的API真心很簡單，看看W3C的定義
 

代碼如下:

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);
};

創建websocket
 

代碼如下:

ws=new WebSocket(address); //ws://127.0.0.1:8080

 
調用其構造函數，傳入地址，就可以創建一個websocket了，值得注意的是地址協議得是ws/wss
 
關閉socket

代碼如下:

ws.close();

 
調用webservice實例的close()方法就可以關閉webservice，當然也可以傳入一個code和string說明為什么關了
 
幾個回調函數句柄
 
由于其異步執行，回調函數自然少不了，有四個重要的
 
onopen：連接創建后調用
onmessage：接收到服務器消息后調用
onerror：出錯時調用
onclose：關閉連接的時候調用

看名字就知道是干什么的了，每個回調函數都會傳入一個Event對象，可以通過event.data訪問消息
 
使用API
 
我們可以在創建socket成功后為其回調函數賦值
 

代碼如下:

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+'>}');

 也可以通過事件綁定的方式

代碼如下:

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+'>}');

客戶端實現
其實客戶端的實現比較簡單，除了websocket相關的幾句就是一些自動focus、回車鍵事件處理、消息框自動定位到底部等簡單功能，不一一說明了

感謝各位的閱讀，以上就是“如何利用html5的websocket實現websocket聊天室”的內容了，經過本文的學習后，相信大家對如何利用html5的websocket實現websocket聊天室這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！