WebSocket-メッセージの送受信
ザ・ Messageイベントは通常、サーバーがデータを送信するときに発生します。サーバーからクライアントに送信されるメッセージには、プレーンテキストメッセージ、バイナリデータ、または画像を含めることができます。データが送信されるたびに、onmessage 関数が起動されます。
このイベントは、サーバーに対するクライアントの耳として機能します。サーバーがデータを送信するときはいつでも、onmessage イベントが発生します。
次のコードスニペットは、WebSocketプロトコルの接続を開くことを説明しています。
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}また、WebSocketを使用して転送できるデータの種類を考慮する必要があります。Webソケットプロトコルは、テキストおよびバイナリデータをサポートします。Javascriptに関しては、text は文字列と呼ばれ、バイナリデータは次のように表されます。 ArrayBuffer。
Webソケットは、一度に1つのバイナリ形式のみをサポートします。バイナリデータの宣言は、次のように明示的に行われます。
socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;文字列
文字列は、XMLやJSONなどの人間が読める形式を処理するのに役立つと考えられています。いつでもonmessage イベントが発生した場合、クライアントはデータ型を確認し、それに応じて行動する必要があります。
文字列としてデータ型を決定するためのコードスニペットを以下に示します-
socket.onmessage = function(event){
if(typeOf event.data === String ) {
console.log(“Received data string”);
}
}JSON（JavaScriptオブジェクト表記）
これは、コンピュータ間で人間が読めるデータを転送するための軽量フォーマットです。JSONの構造は、キーと値のペアで構成されています。
例
{
name: “James Devilson”,
message: “Hello World!”
}次のコードは、JSONオブジェクトを処理してそのプロパティを抽出する方法を示しています-
socket.onmessage = function(event) {
if(typeOf event.data === String ){
//create a JSON object
var jsonObject = JSON.parse(event.data);
var username = jsonObject.name;
var message = jsonObject.message;
console.log(“Received data string”);
}
}XML
XMLでの解析は難しくありませんが、テクニックはブラウザーごとに異なります。最良の方法は、jQueryなどのサードパーティライブラリを使用して解析することです。
XMLとJSONの両方で、サーバーは文字列として応答し、クライアント側で解析されます。
ArrayBuffer
構造化されたバイナリデータで構成されています。同封のビットは、位置を簡単に追跡できるように順番に並べられています。ArrayBuffersは、画像ファイルを保存するのに便利です。
ArrayBuffersを使用してデータを受信するのは非常に簡単です。オペレーターinstanceOf 等しい演算子の代わりに使用されます。
次のコードは、ArrayBufferオブジェクトを処理および受信する方法を示しています-
socket.onmessage = function(event) {
if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}デモアプリケーション
次のプログラムコードは、WebSocketを使用してメッセージを送受信する方法を示しています。
<!DOCTYPE html>
<html>
<meta charset = "utf-8" />
<title>WebSocket Test</title>
<script language = "javascript" type = "text/javascript">
var wsUri = "ws://echo.websocket.org/";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onMessage(evt) {
writeToScreen('<span style = "color: blue;">RESPONSE: ' +
evt.data+'</span>'); websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message); websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message; output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id = "output"></div>
</html>出力を以下に示します。
