WebSockets-메시지 보내기 및 받기
그만큼 Message이벤트는 일반적으로 서버가 일부 데이터를 보낼 때 발생합니다. 서버에서 클라이언트로 보내는 메시지에는 일반 텍스트 메시지, 이진 데이터 또는 이미지가 포함될 수 있습니다. 데이터가 전송 될 때마다onmessage 함수가 시작됩니다.
이 이벤트는 서버에 대한 클라이언트의 귀 역할을합니다. 서버가 데이터를 보낼 때마다onmessage 이벤트가 시작됩니다.
다음 코드 스 니펫은 웹 소켓 프로토콜의 연결 열기를 설명합니다.
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}웹 소켓의 도움으로 어떤 종류의 데이터를 전송할 수 있는지도 고려해야합니다. 웹 소켓 프로토콜은 텍스트 및 이진 데이터를 지원합니다. 자바 스크립트 측면에서text 이진 데이터는 다음과 같이 표현되는 반면 문자열을 나타냅니다. ArrayBuffer.
웹 소켓은 한 번에 하나의 이진 형식 만 지원합니다. 이진 데이터의 선언은 다음과 같이 명시 적으로 수행됩니다.
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 Object Notation)
컴퓨터간에 사람이 읽을 수있는 데이터를 전송하기위한 경량 형식입니다. 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
구조화 된 이진 데이터로 구성됩니다. 동봉 된 비트는 위치를 쉽게 추적 할 수 있도록 순서대로 제공됩니다. ArrayBuffer는 이미지 파일을 저장하는 데 편리합니다.
ArrayBuffers를 사용하여 데이터를 수신하는 것은 매우 간단합니다. 운영자instanceOf 등호 연산자 대신 사용됩니다.
다음 코드는 ArrayBuffer 객체를 처리하고받는 방법을 보여줍니다.
socket.onmessage = function(event) {
if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}데모 애플리케이션
다음 프로그램 코드는 웹 소켓을 사용하여 메시지를 보내고받는 방법을 보여줍니다.
<!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>출력은 아래와 같습니다.
