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

什麼是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('{ }');

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

コピー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('{ }');

クライアント側の実装

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