怎么利用html5的websocket實現websocket聊天室

小編給大家分享一下怎么利用html5的websocket實現websocket聊天室，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

    什么是websocket

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

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

    復制代碼

    代碼如下：

    GET/HTTP/1.1升級：websocket連接：升級主機：127.0.0.1:8080來源：http://test.com語法：無緩存緩存控制：無緩存Sec-WebSocket-密鑰：OtZtd55qBhJF2XLNDRgUMg==Sec-WebSocket-版本：13Sec-WebSocket擴展：x-webkit-deflate-frame用戶代理：Mozilla/5.0（Macintosh;IntelMacOSX10_9_0）AppleWebKit/537.36（KHTML，例如Gecko）Chrome/31.0.1650.57Safari/537.36

    服務器定義響應

    復制代碼

    代碼如下：

    HTTP/1.1101交換協議升級：websocket連接：升級Sec-WebSocket-接受：xsOSgr30aKL2GNZKNHKmeT1qYjA=

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

    通過web瀏覽器的API真心很簡單，看看W3C的定義

    復制代碼

    代碼如下：

    枚舉BinaryType{“blob”，“arraybuffer”};[Constructor（DOMStringurl，可選（DOMString或DOMString[]）協議））接口WebSocket：EventTarget{只讀屬性DOMStringurl;//就緒狀態constunsignedshortCONNECTING=0;constunsignedshortOPEN=1;constunsignedshortCLOSING=2;constunsignedshortCLOSED=3;只讀屬性unsignedshortreadyState;readonly屬性unsignedlongbufferedAmount;//聯網屬性EventHandleronopen;屬性EventHandleronerror;屬性EventHandleronclose;只讀屬性DOMString擴展；

    只讀屬性DOMString協議；voidclose（[Clamp]可選的無符號短代碼，可選的DOMString原因）；//消息傳遞屬性EventHandleronmessage;屬性BinaryTypebinaryType;無效send（DOMStringdata）;無效send（Blob數據）;無效send（ArrayBufferdata）;無效send（ArrayBufferViewdata）;};

    創建websocket

    復制代碼

    代碼如下：

    ws=newWebSocket（address）;//ws://127.0.0.1:8080

    調用其構造函數，預期地址，就可以創建一個websocket了，稱為的是地址協議得是ws/wss關閉socket

    復制代碼

    代碼如下：

    ws.close（）;

    調用webservice實例的close（）方法就可以關閉webservice，當然也可以引發一個代碼和字符串說明為什么關了幾個變量函數句柄而引起其初始化執行，從而函數自然少不了，有四個重要的onopen：連接創建后調用消息：接收到服務器消息后調用錯誤：錯誤時調用onclose：關閉連接的時候調用

    看名字就知道是干什么的了，每個其他函數都會預定一個事件對象，可以通過event.data訪問消息使用API我們可以在創建套接字成功后為其設置函數賦值

    復制代碼

    代碼如下：

    ws=newWebSocket（address）;ws.onopen=function（e）{varmsg=document.createElement（'div'）;msg.style.color='＃0f0';msg.innerHTML=“服務器>連接打開。”;msgContainer.appendChild（msg）;ws.send（'{<'+document.getElementById（'name'）。value+'>}'）;

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

    復制代碼

    代碼如下：

    ws=newWebSocket（address）;ws.addEventListener（'open'，function（e）{varmsg=document.createElement（'div'）;msg.style.color='＃0f0';msg.innerHTML=“Server>connectionopen。”;msgContainer。appendChild（msg）;ws.send（'{<'+document.getElementById（'name'）。value+'>}'）;

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

看完了這篇文章，相信你對“怎么利用html5的websocket實現websocket聊天室”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！