[HTML/Javascript] 웹소켓(WEBSOCKET) 시작하기(강의,번역)

웹소켓(WEBSOCKET) 시작하기(강의,번역)

 

원문 : Start Using HTML5 WebSockets Today

번역 : Mattew, Chang(www.izect.kr)
(이 글은 한국 HTML5 사용자 모임에 기고된 글입니다.)  

 

(역자주)

웹 소켓에 대해 간단히 따라할 수 있는 튜토리얼입니다. 간단히 채팅을 구현해 봄으로써, 웹 소켓과 서버의 송수신에 대해 가볍게 이해하는 데 많은 도움이 될 것입니다. 약 1년 전에 작성된 튜토리얼이니 감안하시고 보세요 ^^

 

 

HTML5 의 새로운 멋진 기능 중 하나가 바로 서버랑 AJAX 가 없이도 사용 가능한 웹 소켓입니다. 이 튜토리얼에서 우리는 PHP 서버를 통한 웹 소켓이 어떻게 진행되는가를 알아보고, 클라이언트끼리 메시지를 주고 받으며 웹 소켓 프로토콜의 사용법을 알아보겠습니다.


웹소켓은 무엇인가?

웹 소켓은 TCP 소켓의 두가지 방법으로 커뮤니케이션 하는 일종의 푸시(PUSH) 기술이다. 표준화는 아직 진행중이지만, 크롬과 사파리의 최신 버전에서는 웹 소켓을 지원한다.


왜 웹소켓으로 바꿔야 하는가?

 

웹 소켓은 긴 풀링(pool, 각각의 요청에 따라 풀 객체를 생성하는 방식)을 대체할 수 있습니다. 풀 방식은 클라이언트는 서버가 전달할 데이터가 없더라도, 서버측에서 최신의 데이터가 전송할 준비가 될 때까지 서버로 요청(request)을 보냅니다. 요청을 받은 후 다른 요청을 보냅니다. 장점은 이미 열려있는 커넥션을 사용하며 또다른 커넥션을 필요로 하지 않는다는것인데, 긴 풀링 방식은  요청(request)에 타임아웃이 일어날 수 있고 이렇게 될 경우 어쨌든 간에 새로운 커넥션을 생성해야 합니다. 
 
많은 Ajax 어플리케이션이 많이 사용되지만 이는 가끔 쓸때없는 자원 낭비를 유도할 수 있습니다.
 

 

만약 모닝콜을 원하는 사람에게 서버가 미리 생성된 커넥션 없이 데이터를 클라이언트에 알아서 보내주게 된다면 놀랍지 않을까요? 푸쉬 기술의 세계에 오신 것을 환영합니다 !


STEP 1: 웹소켓 서버 얻기

 

본 튜토리얼은 서버의 구현보다는 클라이언트를 생성하는데 초점을 둘 것입니다.

 

저는 윈도우 7 에서 XAMPP를 사용하여 PHP 서버를 로컬로 돌렸습니다. phpwebsockets라는 PHP 웹 소켓 서버를 복사해서 구동하였습니다.(참고 : 이 phpwebsockets 버전에서 저는 약간의 문제를 경험했으며, 몇몇 부분을 수정하였고, 소스파일을 추가할 것입니다.) 다양한 웹소켓 구현방법이 있으니 만약 phpwebsockets이 안되면 아래의 다른 것을 사용해서 웹소켓 서버를 구현하시고 본 튜토리얼을 계속 진행해 보세요.

 

아파치 서버 시작

1.jpg

STEP 2: URL과 포트 변경

여러분이 설치한 서버 파일에 몇몇 수정이 필요합니다. 예를 들어 setup.class.php 의 경우:

  1. public function __construct($host=‘localhost’,$port=8000,$max=100)  
  2. {  
  3.     $this->createSocket($host,$port);  
  4. }  

위와 같이 URL과 포트 부분을 파일들을 찾아서 적당히 수정하도록 합니다.


STEP 3: 클라이언트 제작

간단한 HTML 파일을 만들어 봅시다. 아래는 제가 만든 client.php 입니다.:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>  
  5.   
  6. <title>WebSockets Client</title>  
  7.   
  8. </head>  
  9. <body>  
  10. <div id=“wrapper”>  
  11.   
  12.     <div id=“container”>  
  13.   
  14.         <h1>WebSockets Client</h1>  
  15.   
  16.         <div id=“chatLog”>  
  17.   
  18.         </div><!– #chatLog –>  
  19.         <p id=“examples”>e.g. try ‘hi’, ‘name’, ‘age’, ‘today’</p>  
  20.   
  21.         <input id=“text” type=“text” />  
  22.         <button id=“disconnect”>Disconnect</button>  
  23.   
  24.     </div><!– #container –>  
  25.   
  26. </div>  
  27. </body>  
  28. </html>​  

이 코드로 우리는 채팅 로그를 위한 박스와, ‘연결 끊기’ 버튼이 있는 간단한 템플릿을 만들었습니다.


STEP 4: 몇몇 CSS 추가

굳이 다 꾸밀 필요는 없으니, 간단히 몇개의 엘리멘트들만 돋보이게 해봅시다.

  1. body {  
  2.     font-family:ArialHelveticasans-serif;  
  3. }  
  4. #container{  
  5.     border:5px solid grey;  
  6.     width:800px;  
  7.     margin:0 auto;  
  8.     padding:10px;  
  9. }  
  10. #chatLog{  
  11.     padding:5px;  
  12.     border:1px solid black;  
  13. }  
  14. #chatLog p {  
  15.     margin:0;  
  16. }  
  17. .event {  
  18.     color:#999;  
  19. }  
  20. .warning{  
  21.     font-weight:bold;  
  22.     color:#CCC;  
  23. }  

STEP 5: 웹소켓 이벤트들

먼저 웹소켓의 이벤트들을 이해해 봅시다.

 

 

THE EVENTS

 

우리는 아래 세가지의 이벤트를 사용할 것입니다.

  • on open: 소켓이 열리는 시점
  • on message: 메시지가 도착할 시점
  • on close: 소켓이 닫히는 시점

그런데 어떻게 이것들을 구현할까요?

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

먼저 웹 소켓 오브젝트를 만듭니다.

 

  1. var socket = new WebSocket(“ws://localhost:8000/socket/server/startDaemon.php”);  

그리고 간단히 이벤트가 동작하는지 확인해 봅니다.

  1. socket.onopen = function(){  
  2.     alert(“Socket has been opened!”);  
  3. }  

그런데 메시지를 받으려면 어떻게 해야 할까요?

  1. socket.onmessage = function(msg){  
  2.     alert(msg); //Awesome!  
  3. }  

자 이제, 경고창 대신 실제로 저희가 클라이언트 페이지에서 사용할 것들을 통합해 봅시다.


STEP 6: JAVASCRIPT

본론으로 들어와 다시 코딩을 시작해 봅시다. 먼저 jQuery의 document ready 함수 공간을 만들고, 사용자가 웹 소켓을 브라우저에서 사용 가능하게 했는지를 확인합니다. 만약 사용 불가하다면, 크롬 브라우저의 링크를 HTML 에 붙힙니다.

  1. $(document).ready(function() {  
  2.     if(!(“WebSocket” in window)){  
  3.         $(‘#chatLog, input, button, #examples’).fadeOut(“fast”);  
  4.         $(‘<p>Oh no, you need a browser that supports WebSockets. How about <a href=”http://www.google.com/chrome”>Google Chrome</a>?</p>’).appendTo(‘#container’);  
  5.     }else{  
  6.   
  7.     //The user has WebSockets  
  8.   
  9.     connect();  
  10.   
  11.     function connect(){  
  12.         //the connect function code is below  
  13.   
  14.     }  
  15. });  

 

보다시피 유저가 웹소켓을 사용하고자 한다면 connect() 함수를 호출합니다. 이 함수는 “우리는 커넥션을 열고, 닫고 이벤트를 수신받을 것이다” 라는 기능을 합니다.

 

그리고 서버의 주소를 정의합니다.

  1. var socket;  
  2. var host = “ws://localhost:8000/socket/server/startDaemon.php”;  

흠, 주소에서 http가 어디갔죠? 그렇습니다. ws가 붙은 것이 웹소켓의 URL입니다. 즉, 웹소켓은 HTTP와는 다른 프로토콜을 사용한다는 것이지요. 위 URL의 부분을 설명하면 다음과 같습니다.

 

connect() 함수를 계속 만들어 봅시다. 일단 try/catch문을 만듭니다. 만약 문제가 생겼다면 유저가 알 수 있도록 해야 합니다. 새로운 웹 소켓 객체를 만들고 전달받은 메시지를 메시지 함수(나중에 구현할 껍니다.)를 통해 보여줍니다. 그리고 onopen, onmessage, onclose 함수를 새로 만듭니다. 참고로 유저의 소켓 상태를 보여줄 수도 있지만, 별로 필요하지 않습니다. 허나 디버깅에 도움이 되므로 여기서 저는 포함하도록 하겠습니다.

  • CONNECTING = 0
  • OPEN = 1
  • CLOSED = 2
  1. function connect(){  
  2.     try{  
  3.   
  4.     var socket;  
  5.     var host = “ws://localhost:8000/socket/server/startDaemon.php”;  
  6.     var socket = new WebSocket(host);  
  7.   
  8.         message(‘<p class=”event”>Socket Status: ‘+socket.readyState);  
  9.   
  10.         socket.onopen = function(){  
  11.              message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (open)’);  
  12.         }  
  13.   
  14.         socket.onmessage = function(msg){  
  15.              message(‘<p class=”message”>Received: ‘+msg.data);  
  16.         }  
  17.   
  18.         socket.onclose = function(){  
  19.              message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (Closed)’);  
  20.         }             
  21.   
  22.     } catch(exception){  
  23.          message(‘<p>Error’+exception);  
  24.     }  
  25. }  

message() 함수가 상당히 간단하죠? 이 함수는 우리가 보여주고자 하는 유저의 채팅 로그창에 텍스트를 보여줍니다. 위에서 만든 함수에서 <p> 테그를 한짝만 사용해서 붙혀놨는데, message() 함수에서 </p>로 닫습니다. 

  1. function message(msg){  
  2.     $(‘#chatLog’).append(msg+‘</p>’);  
  3. }  

더 나아가서…

여기까지 따라오셨다면, 일단 성공입니다. 기본적인 HTML/CSS 문서를 만들었고, 웹소켓 커넥션을 생성하고 사용자의 업데이트 된 상태를 커넥션을 통해 유지합니다.

page.jpg 

STEP 7: 데이터 전송

이제 자바스크립트에서 유저의 키보드 입력을 감지할 수 있으니, submit 버튼보다는 send 함수를 만드는게 좋겠습니다. ’13’이 ASCII 코드 중에 엔터 버튼을 나타냅니다.

  1. $(‘#text’).keypress(function(event) {  
  2.     if (event.keyCode == ’13’) {  
  3.         send();  
  4.     }  
  5. });  

그리고 send() 함수를 만듭니다.

  1. function send(){  
  2.   
  3.     var text = $(‘#text’).val();  
  4.     if(text==“”){  
  5.         message(‘<p class=”warning”>Please enter a message’);  
  6.         return ;  
  7.     }  
  8.     try{  
  9.         socket.send(text);  
  10.         message(‘<p class=”event”>Sent: ‘+text)  
  11.     } catch(exception){  
  12.     message(‘<p class=”warning”> Error:’ + exception);  
  13.     }  
  14.   
  15.     $(‘#text’).val(“”);  
  16.   
  17. }  

다른 것보다 여러분이 반드시 기억해야 할 코드는 이것입니다.

  1. socket.send(); //Thanks JavaScript  

이 확장 코드는 많은 것을 합니다. 유저가 엔터를 누르지 않더라도 계속적으로 값을 리턴하고, 인풋 박스를 초기화 하고, 메시지 함수를 호출합니다.


STEP 8: 소켓 닫기

소켓을 닫는 것은 간단합니다.: disconnect 버튼의 클릭 이벤트 핸들러에 아래 코드만 붙히면 끝납니다!

close.jpg 
  1. $(‘#disconnect’).click(function(){  
  2.     socket.close();  
  3. });  

전체 자바스크립트 소스

  1. $(document).ready(function() {  
  2.   
  3.   if(!(“WebSocket” in window)){  
  4.   $(‘#chatLog, input, button, #examples’).fadeOut(“fast”);  
  5.   $(‘<p>Oh no, you need a browser that supports WebSockets. How about <a href=”http://www.google.com/chrome”>Google Chrome</a>?</p>’).appendTo(‘#container’);  
  6.   }else{  
  7.       //The user has WebSockets  
  8.   
  9.       connect();  
  10.   
  11.       function connect(){  
  12.           var socket;  
  13.           var host = “ws://localhost:8000/socket/server/startDaemon.php”;  
  14.   
  15.           try{  
  16.               var socket = new WebSocket(host);  
  17.   
  18.               message(‘<p class=”event”>Socket Status: ‘+socket.readyState);  
  19.   
  20.               socket.onopen = function(){  
  21.                  message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (open)’);  
  22.               }  
  23.   
  24.               socket.onmessage = function(msg){  
  25.                  message(‘<p class=”message”>Received: ‘+msg.data);  
  26.               }  
  27.   
  28.               socket.onclose = function(){  
  29.                 message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (Closed)’);  
  30.               }           
  31.   
  32.           } catch(exception){  
  33.              message(‘<p>Error’+exception);  
  34.           }  
  35.   
  36.           function send(){  
  37.               var text = $(‘#text’).val();  
  38.   
  39.               if(text==“”){  
  40.                   message(‘<p class=”warning”>Please enter a message’);  
  41.                   return ;  
  42.               }  
  43.               try{  
  44.                   socket.send(text);  
  45.                   message(‘<p class=”event”>Sent: ‘+text)  
  46.   
  47.               } catch(exception){  
  48.                  message(‘<p class=”warning”>’);  
  49.               }  
  50.               $(‘#text’).val(“”);  
  51.           }  
  52.   
  53.           function message(msg){  
  54.             $(‘#chatLog’).append(msg+‘</p>’);  
  55.           }  
  56.   
  57.           $(‘#text’).keypress(function(event) {  
  58.               if (event.keyCode == ’13’) {  
  59.                 send();  
  60.               }  
  61.           });     
  62.   
  63.           $(‘#disconnect’).click(function(){  
  64.              socket.close();  
  65.           });  
  66.   
  67.       }//End connect  
  68.   
  69.   }//End else  
  70.   
  71. });  

STEP 9: 웹소켓 서버 구동

커멘드 라인 접근이 필요하지만, 운좋게도 XAMPP는 사용하기 쉬운 쉘 옵션을 제공합니다. XAMPP 의 컨트롤 패널에서 ‘Shell’버튼을 누르고 아래를 입력하세요.

php -q path\to\server.php

이렇게 하면 웹소켓 서버가 시작됩니다!

2.jpg 

마지막

페이지가 로딩되면 웹 소켓 커넥션이 설립(established)할 것을 시도합니다. (connect/disconnect 옵션을 한번 만들어 보세요) 그러면, 우저는 메시지를 치고 서버로 메시지를 보냅니다.

example.jpg 

이것이 웹소켓 입니다!

읽어주셔서 감사합니다. 이 튜토리얼이 흥미로우셨길 바라며, 기억할 것은 웹소켓을 통해 즐기셨으면 좋겠습니다. 많은 것은 변할 것이고, 여러분은 W3C WebSocket API 에서 업데이트 되는 정의를 토대로 최신의 기술을 시도해 볼 수 있을 것입니다.

 

[출처] https://matthew.kr/%EC%9B%B9%EC%86%8C%EC%BC%93websocket-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0%EA%B0%95%EC%9D%98%EB%B2%88%EC%97%AD/

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
485 [node.js 응용] node - pm2로 node.js 프로세스 관리하기 - 기본 명령어, 실행하기 file 졸리운_곰 2023.04.25 10
484 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 2/2 졸리운_곰 2023.03.31 7
483 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 1/2 file 졸리운_곰 2023.03.31 8
482 [Javascript][persistent storage] persistent storage of Javascript file 졸리운_곰 2023.02.05 11
481 [JavaScript] 자바스크립트 객체 배열에서 indexOf 사용방법 졸리운_곰 2023.01.26 9
» [HTML/Javascript] 웹소켓(WEBSOCKET) 시작하기(강의,번역) file 졸리운_곰 2022.11.15 15
479 [HTML/Javascript] 웹소켓 튜터리얼 졸리운_곰 2022.11.15 4
478 [HTML, Javascript] JavaScript에 변수가 있는지 확인 졸리운_곰 2022.11.15 10
477 [html, javascript] JavaScript에서 함수가 완료 될 때까지 기다립니다 졸리운_곰 2022.11.15 35
476 [IE javascript to Chrome] A universal createPopup() replacement 졸리운_곰 2022.11.14 8
475 [web개발][javascript] TypeScript 기본 문법 정리 졸리운_곰 2022.11.05 11
474 [HTML/Javascript] indexedDB에 대해 알아보자! file 졸리운_곰 2022.09.15 57
473 [HTML][Javascript] JavaScript - DOM 요소의 생성 및 삭제, innerHTML, CSS 스타일 적용, JavaScript 스타일 적용 file 졸리운_곰 2022.09.09 9
472 [HTML] Div 를 새창 팝업으로 띄우기 졸리운_곰 2022.09.09 7
471 [Web Design][웹 디자인] Sass(SCSS) 완전 정복! 졸리운_곰 2022.07.31 91
470 [Apache 운영] 404 에러페이지 전환 How to Redirect 404 to Homepage using .htaccess 졸리운_곰 2022.07.28 46
469 [JWT} [WEB] JWT(Json Web Token)란? 개념 정리 및 예제 file 졸리운_곰 2022.07.15 38
468 [php worldpress] [위 에]wordpress 사용자 암호 화 원리 및 알고리즘 분석 졸리운_곰 2022.04.11 13
467 [HTML 디자인] 웹페이지 가로 모드/세로 모드 인식하기 file 졸리운_곰 2022.02.14 23
466 [node.js 응용] PM2 - Node.js 프로세스 관리 도구 file 졸리운_곰 2021.12.10 18
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED