- html5
- html5/VA
- html5/canvas
- html5/drag-and-drop
- html5/form
- html5/geolocation
- html5/offline-web-application
- html5/others-api
- html5/outline
- html5/overview
- html5/richtext-edit
- html5/video&audio
- html5/web-storage
- html5/web-workers
- html5/webSqlDatabase
- html5/websocket
- html5/문제점
- html5practice/roundRect
- html5practice/즐겨찾기목록만들기
개요 ¶
- 최근의 웹 앱은 이벤트 드리븐 방식을 요구한다.
- 실시간성, 양방향성
- http의 한계 : 반이중 통신, http head 오버헤드, polling 방식
- 실시간성, 양방향성
- websocket
- 전이중 통신, binary 통신 가능
- 전이중 통신, binary 통신 가능
- port : 80/443
ws://, secure websocket :wss://
- handshake, cookie-based authentication
- ajax vs websocket
- websocket이 50배 빠르다
- websocket이 50배 빠르다
지원 여부 확인 ¶
// test if the browser supports web sockets
if ("WebSocket" in window) {
debug("Browser supports web sockets!", 'success');
connect($('#host').val());
$('#console_send').removeAttr('disabled');
} else {
debug("Browser does not support web sockets", 'error');
};
전체적 형태 ¶
<script>
var wSocket = new WebSocket("ws:yourdomain/demo");
wSocket.onmessage = function(e){ alert(e.data); }
wSocket.onopen = function(e){ alert("서버 연결 완료"); }
wSocket.onclose = function(e){ alert("서버 연결 종료"); }
function send(){ //서버로 데이터를 전송하는 메서드
wSocket.send("Hello");
}
</script>
참고 ¶
- http://www.webkrunk.com/2010/04/30/html5-web-sockets-example/
- http://ezinearticles.com/?HTML5-Web-Sockets-Example&id=4239499
- http://html5demos.com/web-socket
- http://www.slideshare.net/ffdead/the-html5-websocket-api
- http://www.codeproject.com/KB/webservices/c_sharp_web_socket_server.aspx
- http://m.mkexdev.net/98
- http://hoons.kr/board.aspx?Name=info&BoardIdx=32777&Page=1&Mode=2










