이 책이 제시하는 핵심 내용
웹 개발자나 아키텍트가 웹소켓에 관하여 알아야 할 모든 내용을 담았다. XMPP와 STOMP 등의 프로토콜 통신과 웹소켓을 연결하는 실무 코드를 제시하고 기술적인 해설과 프로그래밍 팁으로 풀어낸다.

이 책의 특징과 장점
-. 웹소켓만 주제로 다룬 최초의 책.
-. 짧고 간결한 예제 코드를 담고 있어 브라우저에서 바로 바로 실행해 볼 수 있다.

어떤 독자를 위한 책인가?
-. HTML5 기반의 웹 애플리케이션 개발 프로젝트를 수행하는 웹 기획자, 프로젝트 매니저
-.사용하기 쉬운 API가 필요한 웹 개발자

옮긴이의 말
웹의 부흥과 맞물려 웹 산업은 빠른 성장과 발전을 무기로 부가가치를 높이고 있습니다. 또 웹 프로그램이나 서비스 등의 개발을 용이하게 하고 더욱 효율성을 높여줄 다양한 웹 기술도 파생되고 있습니다. 어떠한 웹 기술이든 용도와 목적이 있으므로 중요도가 덜하다고 말할 수 없지만, 개인적으로는 그 중에서도 웹소켓이 매우 혁신적인 기술이 아닐까 싶습니다. 가장 큰 이유는 바로 웹소켓을 이용해 간편하게 구현할 수 있는 전이중 양방향 통신 때문입니다. 물론 이 책의 본문에서도 언급한 코멧같은, 양방향 통신을 구현할 수 있는 기술은 이미 있었지만 구현이 복잡하고 난해한 문제가 있었습니다. 그러나 웹소켓을 이용하면 클라이언트가 서버에 요청하지 않더라도 서버가 클라이언트로 필요한 데이터를 보낼 수 있어서 실시간 통신의 구현이 가능합니다.
HTML5 웹소켓을 개발한 카징기업은 한국 시장에 진출하기 위해 지난 2012년에 미래웹기술연구소와 협력하기로 협약을 맺고 새로운 기술을 연구해 나가겠다고 밝힌 바 있습니다. 아직 미흡한 부분도 있는 기술이라 이런 생각은 시기상조일 수 있겠지만, 개인적으론 웹소켓 기술이 꾸준히 성장하고 보안이 강화된다면 아직까지 Active-X가 난무하는 국내 웹 환경에 한 획을 긋지 않을까 하는 기대감마저 듭니다.

이 책에서 다루는 예제 코드는 생각보다 간결합니다. 기존 기술로 구현했다면 길고 복잡했을 기능을 짧은 코드만으로 작성하고 브라우저에서 즉시 확인할 수 있습니다. 설명에 약간의 새로운 개념이 들어있을 수 있지만 수록 예제를 따라 해보면 자신만의 개발 활용 아이디어를 얻을 수 있습니다. 또 꾸준히 실습하고, 기존에 만들어보고 싶던 것들에 적용해 나간다면 웹소켓을 통한 개발에 재미를 붙일 수 있을 것입니다.
예제는 두 가지 형태로 제공됩니다. 하나는 Oracle VM VirtualBox에서 불러올 수 있는 우분투 가상 머신 이미지이고, 또 하나는 소스코드만 압축한 파일입니다. 예제의 결과 화면 그림은 우분투 가상 머신에서 직접 실행해서 캡처한 것입니다. 이미지의 우분투는 영문판이어서 코드 안에 한글 문자열을 직접 입력할 수 없었기에, 윈도우의 텍스트 파일에 한글로 문자열을 타이핑한 후 그것을 우분투 가상 머신 안으로 붙여 넣어 실행해야 했습니다. 가상 머신에 들어있는 코드 주석 등을 한글로 수정한 후, 번역된 가상 머신을 제공하기 위해 새 이름의 가상 머신으로 내보낼 때 계속 에러가 나서 실패했고 결국은 원인을 밝히지 못했습니다. 그래서 할 수 없이 원서에 제공된 가상 머신(소스 파일의 내용이 영문)은 그대로 제공하고, 필요한 부분을 번역한 소스코드의 압축파일을 따로 제공하기로 했습니다. 영문 가상 머신의 파일 크기는 약 1기가 가량 되지만, 그 안에는 소스코드 외에도 결과를 보는 데 필요한 각종 애플리케이션, 메신저 등이 설치돼 있고 다양한 서버 설정도 적용돼 있습니다. 따라서 용량이 크더라도 반드시 가상 머신을 받아서 책의 설명에 따라 실행해 보는 것이 도움이 될 것입니다. 별도의 소스코드 압축 파일은 번역된 주석이 필요할 때 참고하면 됩니다.

끝으로, 이 책을 작업하면서 번역 원고의 수많은 부분을 정성스레 다듬어 주시고 저의 미숙한 지식을 보완해주신 한동훈 과장님과 박민아 편집자님께 감사드립니다. 그리고 늘 번역에 집중할 수 있게끔 여건 마련에 신경을 써주시는 송성근 팀장님과 최현우 과장님께도 감사드립니다. 지난 20년간 독자와 함께 발전하고자 좋은 책을 만드는 데 힘쓰신 한빛미디어의 모든 임직원께도 항상 감사드리며, 더 좋은 책을 더 많이 만들 수 있도록, 올해 20주년을 맞은 한빛미디어가 앞으로도 더욱 크게 발전하고 성장하길 기원합니다.

옮긴이_김지원

브라우저는 오늘날 가장 편리하고 대중적이며 우리가 어디서든 사용할 수 있는 배포 플랫폼이다. 실제로 모든 컴퓨터, 스마트폰, 태블릿을 비롯하여 인간이 상상할 수 있는 모든 폼 팩터는 현재 자바스크립트를 실행하고 웹 페이지를 렌더링하며 HTTP 통신을 한다. 이것은 그 자체로서 획기적인 일이다. 특히 이 단계에 이르기까지 10년이 조금 넘는 시간이 걸렸다는 점을 감안하면 더욱 놀라운 일이다. 그러나 이것은 단지 시작에 불과하다. 과거의 브라우저에서는 우리가 현재 HTML5의 혁신 덕택에 누리고 있는 편의성을 상상도 할 수 없었다.
HTML5 웹소켓을 이용해 구현 가능한 일의 중요성은 이루 말할 수 없다. 지금까지는 브라우저가 한 언어(HTTP)만을 구사할 수 있었으며 그 언어는 원래 현대적인 실시간 웹의 필요에 맞게 설계된 것이 아니다. 물론 그동안 롱 폴링이나 플래시 소켓같은 각종 임시적 솔루션을 이용해 처리해왔지만 그런 솔루션은 비용도 많이 들고 복잡했기에 개발자는 구현할 수 있는 기능에 제약을 받아야 했다. 그런데 웹소켓은 그 모든 것을 바꿔놓았다. 웹소켓은 설계 단계부터 2진 데이터와 텍스트 데이터를 모두 수용하는 데이터 중립성, 양방향성, 그리고 바이트와 지연에서 오버헤드 최소화를 위한 최적성을 기반으로 설계됐다.
웹소켓은 웹 브라우저를 위한 TCP와도 같지만, TCP에 비해 더욱 견고하며 API 사용법이 훨씬 쉽다. 또 클라이언트는 어느 네트워크 프로토콜이든 브라우저에 직접 구현할 수 있게 됐고, 이로써 개발자에게는 이제까지와는 전혀 다른 기회의 문이 열렸다. XMPP 채팅 클라이언트를 만들어야 하는가? 그건 껌이다. 클라이언트 애플리케이션을 기존 네트워크에 배포돼있는 사용자 정의 2진 프로토콜에 연결해야 하는가? 어렵지 않다. 심지어 이 클라이언트 애플리케이션에 선호하는 웹 저작 도구를 이용해 스크립트를 추가한 후 스타일을 정의하고, 브라우저 내부에 직접 배포할 수도 있다. 과거의 브라우저는 HTTP 서버와 통신했다. 이제 웹소켓을 이용하면 브라우저는 어떤 대상과도 통신할 수 있으며 어떤 프로토콜이든지 구현할 수 있다. HTTP 핸드셰이크를 완료하고 연결을 업그레이드해서 빠르고 성공적으로 원하는 작업을 해낼 수도 있다. 미미하게 개선된 대화식 페이지나 제작한다는 얘기가 아니다. 웹소켓을 이용하면 사용자에게 제공할 수 있는, 전혀 다른 종류의 애플리케이션과 사용자 경험을 브라우저 안에 직접 구현할 수 있다.

이 책은 웹소켓의 정의와 웹소켓으로 손쉽게 해결할 수 있는 문제들에 대해 기초부터 시작해 모든 내용을 다루고 있으며, 당장 실행해볼 수 있는 다양한 실습 예제를 수록하고 있다. 이 책을 읽고 나면 웹소켓을 이용한 개발이 굉장히 쉽다는 점과 아주 짧은 코드만으로 놀라운 결과를 얻을 수 있다는 점에 큰 충격을 받을 것이다. 웹소켓을 이용한 개발은 아주 흥미진진하다. 바네사, 프랭크, 피터가 완성한 이 책을 통해 웹소켓의 그러한 재미를 한껏 만끽할 수 있을 것이다.
일리아 그리고릭 (Ilya Grigorik)
개발자 애드버킷, 구글 Make the Web Fast 팀 엔지니어

CHAPTER 1 웹소켓 기본 지식
__1.1 HTML5란 무엇인가
__1.2 HTML5 연결
__1.3 기존의 HTTP 구조 살펴보기
____1.3.1 HTTP 101
____1.3.2 HTTP 폴링, 롱 폴링, 스트리밍
__1.4 웹소켓 개요
__1.5 웹소켓을 왜 써야 하는가
____1.5.1 성능을 높여준다 _
____1.5.2 송수신을 간결하게 해준다
____1.5.3 표준을 따른다
____1.5.4 HTML5 의 고급 기능이다
____1.5.5 개발자에게 필수다
__1.6 웹소켓과 RFC 6455
__1.7 웹소켓의 모든 것
__1.8 웹소켓 옵션
____1.8.1 웹소켓 커뮤니티는 살아 숨쉰다
____1.8.2 웹소켓을 사용하는 애플리케이션
__1.9 웹소켓 관련 기술
____1.9.1 서버센트 이벤트
____1.9.2 SPDY

CHAPTER 2 웹소켓 API
__2.1 웹소켓 API 살펴보기
__2.2 웹소켓 API 코딩 시작하기
____2.2.1 웹소켓 생성자
____2.2.2 웹소켓 이벤트
____2.2.3 웹소켓 메서드
____2.2.4 웹소켓 객체의 세 가지 속성
__2.3 종합 실습
__2.4 웹소켓 지원 여부 검사하기
__2.5 웹소켓을 통해 HTML5 미디어 이용하기
__2.6 2장의 포인트

CHAPTER 3 웹소켓 프로토콜
__3.1 웹소켓 프로토콜 이전의 프로토콜
____3.1.1 인터넷의 역사
____3.1.2 웹과 HTTP
__3.2 웹소켓 프로토콜 기초
____3.2.1 웹 애플리케이션에 인터넷 기능을 부여하는 웹소켓
____3.2.2 웹소켓 트래픽 점검하기
___3.3 웹소켓 프로토콜
____3.3.1 웹소켓 열기 핸드셰이크
____3.3.2 키 응답 처리
____3.3.3 메시지 포맷
____3.3.4 웹소켓 닫기 핸드셰이크
____3.3.5 다양한 프로토콜 지원
____3.3.6 익스텐션
__3.4 자바스크립트 Node.js를 이용해 웹소켓 서버 만들기
____3.4.1 간단한 웹소켓 서버 제작하기
____3.4.2 제작한 웹소켓 서버를 테스트하기
____3.4.3 원격 자바스크립트 콘솔 제작하기
____3.5 3장의 포인트

CHAPTER 4 XMPP/웹소켓으로 채팅 클라이언트 제작하기
__4.1 프로토콜 계층 쌓기
__4.2 XMPP 스트리밍
____4.2.1 표준화
____4.2.2 연결 방식 선택하기
____4.2.3 연합
__4.3 웹소켓을 이용해 채팅 메신저 제작하기
____4.3.1 웹소켓을 지원하는 XMPP 서버 이용하기
____4.3.2 테스트 사용자 구성하기
____4.3.3 클라이언트 라이브러리: Strophe.js 파일
____4.3.4 연결하고 시작하기
____4.3.5 접속 여부와 온라인 상태
____4.3.6 채팅 메시지 송수신하기
____4.3.7 핑과 퐁
____4.3.8 완성된 채팅 애플리케이션
__4.4 어떻게 확장하면 좋을까
____4.4.1 사용자 인터페이스 제작하기
____4.4.2 XMPP 확장 기능 활용하기
____4.4.3 구글 토크에 연결하기
____4.5 4장의 포인트

CHAPTER 5 STOMP/웹소켓으로 메신저 클라이언트 제작하기
__5.1 발행/구독 모델 살펴보기
__5.2 STOMP
__5.3 웹 메신저 제작 들어가기
____5.3.1 메시지 브로커 설정하기
____5.3.2 STOMP의 다양한 개념을 예제로 확인하기
___5.4 STOMP/웹소켓 애플리케이션 제작하기
____5.4.1 가위바위보의 흐름
____5.4.2 가위바위보 제작 실습
____5.4.3 Apache ActiveMQ 관찰하기
__5.5 어떻게 확장하면 좋을까
__5.6 웹 메신저의 전망
__5.7 5장의 포인트

CHAPTER 6 원격 프레임버퍼 프로토콜을 이용한 VNC 원격 제어
__6.1 가상 네트워크 컴퓨팅 살펴보기
____6.1.1 원격 프레임버퍼 프로토콜 살펴보기
____6.1.2 2진 기반 프로토콜과 텍스트 기반 프로토콜
____6.1.3 RFB /웹소켓을 이용하는 방법
__6.2 웹소켓 위에 VNC(RFB) 클라이언트 구현하기
____6.2.1 프록시 서버 설정하기
____6.2.2 RFB 클라이언트
____6.2.3 HTML5 의 <canvas>로 프레임버퍼 그리기
____6.2.4 클라이언트의 입력 내용을 처리하기
____6.2.5 종합하기
__6.3 어떻게 확장하면 좋을까
__6.4 6장의 포인트

CHAPTER 7 웹소켓 보안
__7.1 웹소켓 보안 살펴보기
__7.2 웹소켓의 다양한 보안 기능
____7.2.1 Origin 헤더
____7.2.2 Sec -으로 시작하는 헤더
____7.2.3 웹소켓 보안 핸드셰이크-수락 키
____7.2.4 HTTP 프록시와 마스크 처리
__7.3 보안 웹소켓은 TLS를 이용한다
__7.4 인증
__7.5 응용 계층 보안
____7.5.1 애플리케이션 인증
____7.5.2 애플리케이션 권한 부여
__7.6 7장의 포인트

CHAPTER 8 배포와 고려사항
__8.1 웹소켓 애플리케이션 배포 살펴보기
__8.2 웹소켓 에뮬레이션과 폴백
____8.2.1 플러그인
____8.2.2 폴리필
____8.2.3 다양한 추상 계층
__8.3 프록시와 그 밖의 네트워크 중개자
____8.3.1 리버스 프록시와 부하 분산
____8.3.2 TLS 나 SSL로 프록시와 방화벽 통과하기
____8.3.3 TLS 배포하기
__8.4 웹소켓 핑과 퐁
__8.5 웹소켓 버퍼링과 스로틀링
__8.6 모니터링
__8.7 사양 구상
__8.8 소켓의 한계
__8.9 8장의 포인트

부록 A 웹소켓 트래픽 검사하기
__A.1 구글 크롬 개발자 도구를 이용한 웹소켓 프레임 검사
__A.2 구글 크롬 네트워크 내부진단
__A.3 와이어샤크로 네트워크 패킷 분석하기
__A.4 부록 A의 포인트

부록 B 웹소켓 관련 자료
__B.1 가상 머신 사용법
__B.2 다양한 웹소켓 서버
찾아보기

옮긴이의 말
웹의 부흥과 맞물려 웹 산업은 빠른 성장과 발전을 무기로 부가가치를 높이고 있습니다. 또 웹 프로그램이나 서비스 등의 개발을 용이하게 하고 더욱 효율성을 높여줄 다양한 웹 기술도 파생되고 있습니다. 어떠한 웹 기술이든 용도와 목적이 있으므로 중요도가 덜하다고 말할 수 없지만, 개인적으로는 그 중에서도 웹소켓이 매우 혁신적인 기술이 아닐까 싶습니다. 가장 큰 이유는 바로 웹소켓을 이용해 간편하게 구현할 수 있는 전이중 양방향 통신 때문입니다. 물론 이 책의 본문에서도 언급한 코멧같은, 양방향 통신을 구현할 수 있는 기술은 이미 있었지만 구현이 복잡하고 난해한 문제가 있었습니다. 그러나 웹소켓을 이용하면 클라이언트가 서버에 요청하지 않더라도 서버가 클라이언트로 필요한 데이터를 보낼 수 있어서 실시간 통신의 구현이 가능합니다.
HTML5 웹소켓을 개발한 카징기업은 한국 시장에 진출하기 위해 지난 2012년에 미래웹기술연구소와 협력하기로 협약을 맺고 새로운 기술을 연구해 나가겠다고 밝힌 바 있습니다. 아직 미흡한 부분도 있는 기술이라 이런 생각은 시기상조일 수 있겠지만, 개인적으론 웹소켓 기술이 꾸준히 성장하고 보안이 강화된다면 아직까지 Active-X가 난무하는 국내 웹 환경에 한 획을 긋지 않을까 하는 기대감마저 듭니다.

이 책에서 다루는 예제 코드는 생각보다 간결합니다. 기존 기술로 구현했다면 길고 복잡했을 기능을 짧은 코드만으로 작성하고 브라우저에서 즉시 확인할 수 있습니다. 설명에 약간의 새로운 개념이 들어있을 수 있지만 수록 예제를 따라 해보면 자신만의 개발 활용 아이디어를 얻을 수 있습니다. 또 꾸준히 실습하고, 기존에 만들어보고 싶던 것들에 적용해 나간다면 웹소켓을 통한 개발에 재미를 붙일 수 있을 것입니다.
예제는 두 가지 형태로 제공됩니다. 하나는 Oracle VM VirtualBox에서 불러올 수 있는 우분투 가상 머신 이미지이고, 또 하나는 소스코드만 압축한 파일입니다. 예제의 결과 화면 그림은 우분투 가상 머신에서 직접 실행해서 캡처한 것입니다. 이미지의 우분투는 영문판이어서 코드 안에 한글 문자열을 직접 입력할 수 없었기에, 윈도우의 텍스트 파일에 한글로 문자열을 타이핑한 후 그것을 우분투 가상 머신 안으로 붙여 넣어 실행해야 했습니다. 가상 머신에 들어있는 코드 주석 등을 한글로 수정한 후, 번역된 가상 머신을 제공하기 위해 새 이름의 가상 머신으로 내보낼 때 계속 에러가 나서 실패했고 결국은 원인을 밝히지 못했습니다. 그래서 할 수 없이 원서에 제공된 가상 머신(소스 파일의 내용이 영문)은 그대로 제공하고, 필요한 부분을 번역한 소스코드의 압축파일을 따로 제공하기로 했습니다. 영문 가상 머신의 파일 크기는 약 1기가 가량 되지만, 그 안에는 소스코드 외에도 결과를 보는 데 필요한 각종 애플리케이션, 메신저 등이 설치돼 있고 다양한 서버 설정도 적용돼 있습니다. 따라서 용량이 크더라도 반드시 가상 머신을 받아서 책의 설명에 따라 실행해 보는 것이 도움이 될 것입니다. 별도의 소스코드 압축 파일은 번역된 주석이 필요할 때 참고하면 됩니다.

끝으로, 이 책을 작업하면서 번역 원고의 수많은 부분을 정성스레 다듬어 주시고 저의 미숙한 지식을 보완해주신 한동훈 과장님과 박민아 편집자님께 감사드립니다. 그리고 늘 번역에 집중할 수 있게끔 여건 마련에 신경을 써주시는 송성근 팀장님과 최현우 과장님께도 감사드립니다. 지난 20년간 독자와 함께 발전하고자 좋은 책을 만드는 데 힘쓰신 한빛미디어의 모든 임직원께도 항상 감사드리며, 더 좋은 책을 더 많이 만들 수 있도록, 올해 20주년을 맞은 한빛미디어가 앞으로도 더욱 크게 발전하고 성장하길 기원합니다.

옮긴이_김지원