html5 websocket_html5 チュートリアルスキルを使用して WebSocket チャットルームを実装する-H5 チュートリアル-php.cn

html5 websocket_html5 チュートリアルスキルを使用して WebSocket チャットルームを実装する

WBOY

リリース： 2016-05-16 15:48:34

オリジナル

1880 人が閲覧しました

WebSocket とは

WebSocket プロトコルは、HTML5 で導入された新しいプロトコルで、ブラウザとサーバー間の全二重通信を実現することを目的としています。上記のリンクを読んだ学生は、WebSocket API でこれを効率が低く消費量が多い方法で行う方法 (ポーリングまたは Comet) をすでに理解しているはずです。ブラウザとサーバーはハンドシェイクアクションを実行するだけで済みます。ブラウザとサーバーの間に高速チャネルが形成されます。データは両者間で直接送信できます。これを同時に行うと 2 つの利点があります

1. 通信送信バイト数の削減: 以前に http を使用してデータを送信した場合と比較して、WebSocket が送信する追加情報はわずか 2k
です。 >
2. クライアントがクエリを実行しなくても、サーバーはアクティブにメッセージをクライアントにプッシュできます。

概念と利点はインターネット上のいたるところにあるため、簡単には説明しません。原則を確認してから、チャットルームの Web バージョンを作成してください

握手

WebSocket プロトコルでは、TCP 接続の 3 ウェイハンドシェイクに加えて、クライアントとサーバーは接続を確立するために追加のハンドシェイクを必要とします。プロトコルの最新バージョンでは、次のようになります。

クライアントがサーバーにリクエストを送信しますリクエストを送信

コードをコピー

コードは次のとおりです。

GET / HTTP/1.1
アップグレード: websocket
接続: アップグレード
ホスト: 127.0.0.1:8080
オリジン: < a href="http://test.com">http://test.com
プラグマ: no-cache
Cache-Control: no-cache
Sec-WebSocket-キー: 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 (Gecko のような KHTML) Chrome/31.0.1650.57 Safari/537.36

サーバーが応答します

コードをコピーします

コードは次のとおりです:

HTTP/ 1.1 101 スイッチングプロトコル
アップグレード: websocket
接続: アップグレード
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=

リクエスト内の「Sec-WebSocket-Key」がランダムである場合、サーバーはこれらのデータを使用して SHA-1 情報ダイジェストを構築します。マジック文字列「258EAFA5-E914-47DA-95CA-C5AB0DC85B11」を「Sec-WebSocket-Key」に追加します。 SHA-1 暗号化を使用し、次に BASE-64 エンコードを使用し、結果を「Sec-WebSocket-Accept」ヘッダーの値としてクライアントに返します (Wikipedia より)。

ウェブソケット API

ハンドシェイクの後、ブラウザとサーバーは接続を確立し、両者は相互に通信できるようになります。 WebSocket の API は非常にシンプルです。W3C の定義を見てください。

コードをコピーします。

enum BinaryType { "blob", "arraybuffer" };

[Constructor(DOMString url, オプション (DOMString または DOMString[]) プロトコル)]

interface WebSocket : EventTarget {
readonlyattribute DOMString url;

// 準備完了状態
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2 ;
const unsigned short CLOSED = 3;
読み取り専用属性 unsigned short readyState;
読み取り専用属性 unsigned longbufferedAmount;

// ネットワーク
属性 EventHandler onopen;
属性 EventHandler onerror;
属性 EventHandler onclose;
読み取り専用属性 DOMString 拡張機能;
読み取り専用属性 DOMString プロトコル;
void close([クランプ] オプションの符号なしショートコード、オプションの DOMString 理由);

// メッセージング
属性 EventHandler onmessage;
属性 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

Closeソケット

である必要があることに注意してください。コードをコピーします

コードは次のとおりです:

ws.close();

呼叫webservice實例的close()方法就可以關閉webservice，當然也可以傳入一個code和string說明為什麼關了

幾個回呼函數句柄

由於其非同步執行，回呼函數自然少不了，有四個重要的

onopen：連接創建後調用
onmessage：接收到伺服器訊息後調用
onerror：出錯時調用
onclose：關閉連線的時候呼叫

看名字就知道是做什麼的了，每個回調函數都會傳入一個Event對象，可以透過event.data存取訊息

使用API

我們可以在創建socket成功後來為其回呼函數賦值

複製程式碼

代碼如下: ws.onopen=function(e){

var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server > connection open.";
msgContainer.appendChild(msg);
ws.send('{}') ;

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

複製程式碼

複製程式碼

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

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