首頁 > web前端 > H5教程 > 利用html5的websocket實作websocket聊天室_html5教學技巧

利用html5的websocket實作websocket聊天室_html5教學技巧

WBOY
發布: 2016-05-16 15:48:34
原創
1872 人瀏覽過

什麼是websocket

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

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

複製代碼
代碼如下:

代碼如下:Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:8080
Origin: http://test .com
Pragma: no-cache
Cache-Control: no-cache
Sec-WebSocket-Key: OtZtd55qBhJF2XLNDRgUMg==
Sec-WebSocket-VersionBhJF2XLNDRgUMg==
Sec-WebSocket-Version: 13 -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.57676. >
伺服器給予回應

 

複製程式碼程式碼如下:

程式碼如下:Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=
Key 
websocket API

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




複製程式碼複製程式碼

複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製碼

enum BinaryType { "blob", "arraybuffer" };
[Constructor(DOMString url, optional (DOMString or DOMString[]) protocols)]
interface WebSocket or DOMString[]) protocols)]
interface WebSocket : EventTarget read attribute DOMString url;

// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2 readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
// networking attribarad attribute; EventHandler onclose;
readonly attribute DOMString extensions;
readonly attribute DOMString protocol;
void close([Clamp] optional unsigned short code, optional DOMString reason EventHandler onmessage;
attribute BinaryType binaryType;
void send(DOMString data); void send(Blob data); void send(ArrayBuffer send(Blob data); void send(ArrayBuffer send(Blob data); void send(ArrayBuffer data);};

創建websocket
 




複製代碼

代碼如下:
ws=new WebSocket(address); //ws://127.0.0.1:8080
 
呼叫其建構函數,傳入位址,就可以建立一個websocket了,值得注意的是地址協議得是ws/wss
 
關閉socket
複製代碼代碼如下:ws.close();

Web サービス インスタンスの close() メソッドを呼び出して、Web サービスを終了する理由を説明するコードと文字列を渡すこともできます。

いくつかのコールバック関数ハンドル

非同期実行には、当然ながらコールバック関数が不可欠です。

onopen: 接続の作成後に呼び出されます。
onmessage: サーバー メッセージの受信後に呼び出されます。 .
onerror: エラーが発生したときに呼び出されます。
onclose: 接続を閉じるときに呼び出されます。 名前を見れば、その機能がわかります。各コールバック関数は Event オブジェクトを渡し、メッセージには、event.data を通じてアクセスできます。


API の使用

ソケットを正常に作成できました。次に、そのコールバック関数に値を割り当てます



コードをコピーしますコードは次のとおりです次のように:
ws=new WebSocket(address);
ws.onopen=function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="サーバー > 接続がオープンしました。";
msgContainer.appendChild(msg);
ws.send('{<' document .getElementById('name').value '> }');

イベント バインドも使用できます


コピーcode コードは次のとおりです:
ws=new WebSocket(address);
ws.addEventListener('open',function(e){
var msg=document.createElement('div') ;
msg.style.color='#0f0';
msg.innerHTML="サーバー > 接続がオープンしました。";
msgContainer.appendChild (msg);
ws.send('{ <' document.getElementById('name').value '>}');

クライアント側の実装

実際、クライアント側の実装は、WebSocket に関連するいくつかの文を除いて比較的単純で、自動フォーカス、Enter キー イベント処理、自動配置などのいくつかの単純な機能があります。メッセージボックスを一番下まで押してください。一つ一つ説明しません

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板