HTML5 WebSocket Client 작성하기

웹소켓프로토콜로 웹소켓서버와 웹소켓API로 통신할 수 있다.

 

webSocket = new WebSocket(url, protocols);

url : wss:// 스키마사용을 권장하며 보안을 고려하지 않는다면 ws://스키마를 사용해도 된다.
protocols(옵션) : 하나이상의 프로토콜을 지정할 수 있다. 웹소켓의 서브프로토콜을 지정하며 하나이상의 프로토콜을 지정하여 여러가지 유형의 작업을 할 수 있다.

대상이 접근을 허용하지 않으면 보안에러(SecurityError)가 발생한다. 

연결시 에러가 발생하면 onerror가 먼저 발생하고 이어서 onclose가 발생한다.

 

var exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocol1");
var exampleSocket2 = new WebSocket("wss://www.example.com/socketserver", ["protocol1", "protocol2"]);

exampleSocket.readyState는 CONNECTING상태가 되고 연결이 준비가 되면 OPEN상태로 된다.
연결이 되면 exampleSocket.protocol로 서버에서 선택된 프로토콜을 확인할 수 있다.

전송은 다음과 같이 한다.

exampleSocket.send("서버가 기다리고 있는 메세지")

전송은 문자열과 Blob 또는 ArrayBuffer가 가능하다.

연결은 비동기이고 성공할지 실패할지 알수 없기 때문에 객체 생성후 바로 전송하면 전송을 보장할 수 없다.
따라서 onopen이벤트 핸들러에서 작업해야 한다.

exampleSocket.onopen = function (event) {
    exampleSocket.send("서버가 기다리고 있는 메세지");
}

JSONJSON객체를 전송하고자 한다면 문자열로 치환하여 전송하여야 한다.

 

var msg = {
    type: "message",
    text: "test message"
};

exampleSocket.send(JSON.stringify(msg));

서버로부터의 메세지는 onmessage핸들러에서 가능하다.

exampleSocket.onmessage = function (event) {
  console.log(event.data);
}

웹소켓으로 수신되는 문자셋은 UTF-8포맷이다.

 

웹소켓연결을 종료하려면 close를 호출한다.

exampleSocket.close();

종료하기 전에 bufferedAmount속성을 확인해서 아직 전송하지 않은 데이터가 있는지 확인할 수 있다. 0인경우 아직 남은것으로 판단하면 된다.

 

비보안연결과 보안연결을 혼합하여 사용할 수 없다. 브라우저들이 이런 경우를 허용하지 않는다.