웹소켓으로 전송할 수 있는 데이터 종류

웹소켓 프로토콜은 텍스트와 바이너리 데이터를 지원합니다.

자바스크립트에서 바이너리 데이터는 ArrayBuffer와 Blob 클래스로 표시되고,

텍스트는 문자열로 표시된다.

일반 텍스트와 바이너리 포멧을 사용하면, 거의 모든 유형의 HTML5 미디어를 전송/ 디코딩할 수 있다.

웹소켓은 한 번에 하나의 바이너리 포멧만을 지원하며, 아래와 같이 반드시 명시적으로 선언해야 한다.

socket.binaryType ="arraybuffer";

또는

socket.binaryType = "blob"

문자열

OnMessage 이벤트가 발생할 때 마다 클라이언트가 데이터 타입을 확인하고 동작.

자바스크립트에서 동등 연산자(===)를 사용해 데이터 타입의 문자열인지 여부를 쉽게 판단가능.

socket.OnMessage = function(event) {
    if(typeof event.data === "string") {
        console.log("Reveived string data.");
    }
} 

JSON

JSON^[각주:1] 은 컴퓨터 사이에서 "속성-값^[각주:2] 쌍" 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 사람이 읽을수 있는 형태의 데이터 전송을 위한 경량화된 포멧.

효율성 덕분에 JSON은 서버와 클라이언트 사이의 데이터 전송에 사용되는 포멧중 가장 많이 사용되고 있다.

페이스북과 트위터, 깃허브를 포함 인기있는 RESTful API들은 JSON을 완벽하게 지원

또한 JSON은 자바스크립트의 일부분이기 때문에, 외부 파서없이도 바로 파싱이 가능하다.

그리고 언어 독립형 데이터 포맷으로 프로그래밍 언어나 플랫폼에 독립적이므로, 구문 분석 및 JSON 데이터 생성을 위한 코드는 C, C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 수많은 프로그래밍 언어에서 쉽게 이용할 수 있다.

{
    "name" : "Vangos Prerneas",
    "message" : "Hello world!"
}

위 표기, 두개의 키값 쌍으로 포함.

var jsonObject = JSON.parse(event.data);

// 각각의 키값 추출
var userName = jsonObject.name;
var userMessage = jsonObject.message;

XML

XML(Extensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다.

JSON과 유사하게, 자바스크립트를 사용해 XML로 인코딩된 문자열을 파싱할 수 있다.

XML과 JSON 모두, 서버는 실제 XML/JSON파일(바이너리 형식)이 아닌 문자열을 보낸다.

ArrayBuffer

ArrayBuffer는 구조화된 바이너리 데이터를 담고있다.

구조화 됐다는 것은 비트가 순서로 돼 있어 그들 중 일부를 검색할 수 있음을 의미한다.

특정한 포멧으로 배열버퍼를 조작하기 위해서는 해당 ArrayBufferView 오브젝트를 생성 해야 한다.

배열버퍼는 이미지 파일을 저장하는 데 아주 편리.

채팅 중 상대방이 채팅창에 이미지 파일을 드래그 앤 드롭해 이미지를 교환할 수 있다고 가정, 아래 코드는 자바스크립트가 드롭 이벤트를 처리하는 방법을 보여준다.

document.ondrop = function(event) {
    var file = event.dataTransfer.files[0];
    var reader = new FileReader();

    reader.readAsArrayBuffer(file);

    reader.onload = function()
        socket.send(reader.result);
    }
return false;
}

위 코드에서 먼저 드롭 이벤트를 처리하는 이벤트 핸들러를 생성.

이벤트 핸들러는 드롭된 파일에 액세스를 할 수 있게 해주는 하나의 파라미터를 사용.

하나의 이미지를 드롭하기 때문에 제로 인덱스 파일이 필요.

그런 다음, 파일 데이터를 배열버퍼로 읽는 파일리더를 생성.

파일리더가 파일 처리를 완료하면, 웹 소켓을 사용해 웹서버에 이미지를 보내 onload 이벤트를 처리.

1. JavaScript Object Notation [본문으로]
2. attribute–value pairs and array data types (or any other serializable value) [본문으로]