ホームページ > 記事 > ウェブフロントエンド > HTML5でのWebSocket通信
HTML5でのWebSocket通信
- 黄舟オリジナル
- 2017-02-16 14:29:403290ブラウズ
1. WebSocket通信の基礎知識
WebSocketとは、HTML5が提供し始めたブラウザとサーバー間の全二重通信のためのネットワーク技術です。 wsまたはwssプロトコルを使用した、次世代のクライアント・サーバー非同期通信方式です。
WebSocket API では、ブラウザとサーバーはハンドシェイク アクションを実行するだけで、ブラウザとサーバーの間に高速チャネルが形成されます。データは両者間で直接送信できます。
さて、インスタント メッセージング (リアルタイム) を実現するために、多くの Web サイトで使用されているテクノロジーは ポーリング (ポーリング) です。ポーリングとは、ブラウザーが特定の時間間隔 (1 秒ごとなど) でサーバーに HTTP リクエストを送信し、サーバーが最新のデータをクライアントのブラウザーに返すことです。この従来の HTTP リクエスト モデルには明らかな欠点があります。ただし、ブラウザはリクエストをサーバーに継続的に送信する必要があり、HTTP リクエストのヘッダーに含まれるデータは小さい値しか受け取らない可能性があります。帯域幅が大幅に向上します。
ポーリング効果を実現する最新のテクノロジーは、AJAX を使用した Comet です。ただし、この技術は全二重通信を実現できるものの、リクエスト（reuqest）を発行する必要があります。
WebSocket API では、ブラウザとサーバーはハンドシェイク アクションを実行するだけで、ブラウザとサーバーの間に高速チャネルが形成されます。データは両者間で直接送信できます。この WebSocket プロトコルでは、インスタント サービスを実現するための 2 つの大きな利点があります:
1. ヘッダー
相互に通信するヘッダーは非常に小さく、わずか 2 バイトです
2. サーバー プッシュ
サーバーは、クライアントによって開かれたソケットがサーバーとの接続を確立している限り、パッシブからアクティブに変化してソケットにデータをプッシュできます。
WebSocket は Ajax (または XHR) での通信に限定されません。Ajax テクノロジではクライアントがリクエストを開始する必要があり、WebSocket サーバーとクライアントは相互に情報をプッシュできますが、WebSocket では相互通信が可能です。ドメイン通信。
Ajax テクノロジーの賢い点は、それを使用するための設計された方法がないことです。 WebSocket は指定されたターゲットに対して作成され、両方向にメッセージをプッシュするために使用されます。
2. HTML5 WebSocket API
WebSocket オブジェクト
WebSocket は、DOM 内の window オブジェクトのサブオブジェクトです:
WebSocket (url) コンストラクター。
準備完了状態。読み取り専用属性。その値は CONNECTING (0)、OPEN (1)、CLOSED (3) です。
boolean send(in DOMString data)
void close() 2 つのメソッド、それぞれメッセージを送信し、WebSocket 接続を閉じるために使用されます
onopen、onmessage、onclosee の 3 つのイベント属性がそれぞれありますWebSocket イベント: オープン、メッセージ、クローズ。
1. ブラウザー サポートの検出
ブラウザー サポートの検出
function loadDemo() {
if (window.WebSocket) {
//supported
} else {
// not supported
}
}2. WebSocket オブジェクトとサーバー接続の作成
通信エンドポイントに接続するには、新しい WebSocket インスタンスを作成し、必要な接続ピア URL を指定するだけです。 。 ws:// および wss:// プレフィックスは、それぞれ WebSocket 接続と安全な WebSocket 接続を表します。
url = "ws://localhost:8080/echo"; w = new WebSocket(url);
WebSocket 接続を確立するときに、Web アプリケーションが使用できるプロトコルをリストできます。 WebSocket コンストラクターの 2 番目のパラメーターには、文字列または文字列のグループを指定できます。
w = new WebSocket(url, ["proto1", "proto2"]);
proto1 と proto2 は明確に定義されており、おそらく登録されており、クライアントとサーバーの両方が理解できる標準化されたプロトコル名であると仮定します。サーバーはリストから優先プロトコルを選択します。
onopen = function(e) {
//确定服务器选择的协议
log(e.target.protocol);
}3. イベント リスナーの追加
WebSocket プログラミングは非同期プログラミング モデルに従います。ソケットを開いた後は、サーバーをアクティブにポーリングせずにイベントが発生するのを待つだけでよいため、WebSocket にコールバック関数を追加する必要があります。イベントをリッスンするオブジェクト。
WebSocket オブジェクトには、open、close、message の 3 つのイベントがあります。 接続ライフサイクルの各段階を処理するために、onopen、onmessage、onclose という 3 つの対応するイベント リスナーがあります。もちろん、onerror を使用してエラーをリッスンすることもできます。次の例に示されています。
w.onopen = function() {
log("open");
w.send("send message");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
w.onerror = function(e) {
log("error");
}4. メッセージを送信する
ソケットが開いているとき (つまり、onopen の後、onclose の前)、send メソッドを使用してメッセージを送信できます。メッセージの送信後、close メソッドを呼び出して接続を終了することも、これを実行せずに接続を開いたままにすることもできません。
w.send();
Send() 関数を呼び出す前に、送信バッファにバックアップされているデータの量を測定するとよいでしょう。 bufferAmount プロパティは、WebSocket 上で送信されたがまだネットワークに書き込まれていないバイト数を表します。送信レートを調整する場合に便利です。
document.getElementById("sendButton").onclick = function() {
if (w.bufferedAmount < bufferThreshold) {
w.send(document.getElementById("inputMessage").value);
}
}WebSocket API は、バイナリ データの形式での Blob および ArrayBuffer インスタンスの送信をサポートします
var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]); w.send(a.buffer);
Constant-readyState 属性
これらの定数は、readyState 属性の値であり、 WebSocket接続。
| 定数 | 値 | 説明 |
|---|---|---|
| CONNECTING | 0 | 接続はまだ開かれていません。 |
| OPEN | 1 | 接続がオープンしており、通信の準備ができています。 |
| CLOSING | 2 | 接続は終了中です。 |
| CLOSED | 3 | 接続が閉じられているか、接続を確立できません。 |
3.实例
<!DOCTYPE html><html><head>
<title>webSocket实例</title></head><body>
<h2>webSocket实例</h2>
<input type="text" id="text">
<button type="" id="connect" onclick="connect()">建立连接</button>
<button type="" id="send" onclick="send()">发送数据</button>
<button type="" id="disconnect" onclick="disconnect()">断开连接</button>
<p id="message"></p>
<script type="text/javascript">
var socket; var readyState = ["正在连接","已经连接","正在断开","已经断开"]; var message = document.getElementById('message'); function connect(){
try{ var url = 'ws:localhost/test';
socket = new webSocket(url);
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
socket.onopen = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
socket.onmessage = function(msg){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+'<br>'+ "接收数据" + msg.data +"</p>";
}
socket.onclose = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
}catch(exception){ // socket.onerror = function(){
message.innerHTML += "<p>发生错误！"+"</p>"; // }
}
} function send(){
var text = document.getElementById('text').value; try{
socket.send(text);
message.innerHTML += "<p>发送数据：" + text +"</p>";
}catch(exception){
message.innerHTML += "<p>发送数据出错</p>";
}
} function disconnect(){
socket.close();
} </script></body></html>1.WebSocket通信基础知识
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 使用ws或wss协议，是下一代客户端-服务器的异步通信方法。
在WebSocket API中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。
而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。
在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端，只要客户端打开的socket与服务器建立连接后，就可以把数据推送到这个socket上，从被动转为主动。
WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。
Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。
2、HTML5 WebSockets API
WebSocket对象
WebSocket在DOM中是window对象的子对象，它具有：
WebSocket(url)构造函数。
readyState。只读属性，其值可以是CONNECTING（0），OPEN（1），CLOSED（3）。
boolean send(in DOMString data)
void close()两个方法，分别用于发送消息和关闭WebSocket连接
onopen, onmessage, 和onclosee三个事件属性，分别对open, message和close三个WebSocket事件。
1、浏览器支持情况检测
检测浏览器支持情况
function loadDemo() {
if (window.WebSocket) {
//supported
} else {
// not supported
}
}2、WebSocket对象的创建和服务器连接
要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
url = "ws://localhost:8080/echo"; w = new WebSocket(url);
建立WebSocket连接时，可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串，也可以是字符串组。
w = new WebSocket(url, ["proto1", "proto2"]);
假设proto1和proto2是定义明确、可能已注册且标准化的协议名称，它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。
onopen = function(e) {
//确定服务器选择的协议
log(e.target.protocol);
}3、添加事件监听器
WebSocket编程遵循异步编程模型；打开socket后，只需等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件：open、close和message对应有三个事件监听器onopen,onmessage,onclose来处理连接的生命周期的每个阶段,当然还可以是onerror来监听错误，如以下示例所示。
w.onopen = function() {
log("open");
w.send("send message");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
w.onerror = function(e) {
log("error");
}4、发送消息
当socket处于打开状态（即onopen之后，onclose之前），可以用send方法来发送消息。消息发送完，可以调用close方法来终止连接，也可以不这么做，让其保持打开状态。
w.send();
你可能想测算在调用Send()函数之前，有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
document.getElementById("sendButton").onclick = function() {
if (w.bufferedAmount < bufferThreshold) {
w.send(document.getElementById("inputMessage").value);
}
}WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例
var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]); w.send(a.buffer);
常量-readyState属性
这些常量是readyState属性的取值，可以用来描述WebSocket连接的状态。
| 定数 | 値 | 説明 |
|---|---|---|
| CONNECTING | 0 | 接続はまだ開かれていません。 |
| OPEN | 1 | 接続がオープンしており、通信の準備ができています。 |
| CLOSING | 2 | 接続は終了中です。 |
| CLOSED | 3 | 接続が閉じられているか、接続を確立できません。 |
3.实例
<!DOCTYPE html><html><head>
<title>webSocket实例</title></head><body>
<h2>webSocket实例</h2>
<input type="text" id="text">
<button type="" id="connect" onclick="connect()">建立连接</button>
<button type="" id="send" onclick="send()">发送数据</button>
<button type="" id="disconnect" onclick="disconnect()">断开连接</button>
<p id="message"></p>
<script type="text/javascript">
var socket; var readyState = ["正在连接","已经连接","正在断开","已经断开"]; var message = document.getElementById('message'); function connect(){
try{ var url = 'ws:localhost/test';
socket = new webSocket(url);
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
socket.onopen = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
socket.onmessage = function(msg){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+'<br>'+ "接收数据" + msg.data +"</p>";
}
socket.onclose = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
}catch(exception){ // socket.onerror = function(){
message.innerHTML += "<p>发生错误！"+"</p>"; // }
}
} function send(){
var text = document.getElementById('text').value; try{
socket.send(text);
message.innerHTML += "<p>发送数据：" + text +"</p>";
}catch(exception){
message.innerHTML += "<p>发送数据出错</p>";
}
} function disconnect(){
socket.close();
} </script></body></html> 以上就是Html5 中的 WebSocket通信的内容，更多相关内容请关注PHP中文网（www.php.cn）！