MixedCode

  1. Home
  2. HTML5 Websocket
  3. HTML5 WebSocket 기술소개 및 경험하기

HTML5 WebSocket 기술소개 및 경험하기

by EDDY.KANG(믹스드코드) on In HTML5 Websocket

안녕하세요. 믹스드코드 에디입니다.
HTML5 Websocket의 본격적인  소개에 앞서 HTML5에 대해 먼저 조금 알아보는 시간을 가져보겠습니다.

1) HTML5?

- Global 5대 표준 웹브라우저(IE,Chrome,Safari,Opera,Firfox)에서 공통 표준기술로 채택한 HTML버전으로  역사상 최초 브라우저간 표준화가 이루어진 HTML버전임.
- PC O/S ,모바일 O/S 의 각종 브라우저에서 모두 지원하는 HTML 표준 스펙.
- W3C 차세대 웹 표준기술로 확정(2014년 10월 28일)
- HTML(Hyper Text Markup Language)을 표기하기 위한 마크업 언어의 최신버전명으로 이전버전의 표기법들에 비해 많이 간결하고 명확하며 다양한
확장 API제공을 통해 단순 HTML 문서구조 표현 언어가 아닌 새로운 차원의 WEB FrontEnd 개발기술로 평가됨.
- HTML5의 주요 기능은 각종 HTML태그를 이용해 HTML문서(Document)의 문서구조를 표현하는 전통적인 HTML기능과 각종 새로운 HTML5 API 제공을 통한 기존 웹기술로는 불가능했던 다양한 확장기능을 제공한다.
( HTML5 API는 Programming Interface만 제공하며 구현은 Javascript 언어를 통해 HTML5 API 제공 기능을 구체적으로 구현합니다.)
- Flash,Silverlight으로 대표되는 각종 웹브라우저 Plugin(ActiveX포함)을 대체하는 HTML5 Tag & API 들의 집합체

 ㅁ HTML5 주요 핵심 기능소개


참고사이트)
https://namu.wiki/w/HTML5
http://mixedcode.com/Article/Index?aidx=1054



2) HTML5 Websocket

2.1 HTML5 Websocket?
모든 최신 웹브라우저에서 지원하는 HTML5 API(Application Programming Interface)기술중 하나로 웹브라우저 와 웹서버 간 연결기반 실시간 양방향 통신환경을 제공해주는 웹브라우저 기반 실시간 통신(Real Time Messaging ) Web Client Side 기술을 말합니다.

HTML5 Websocket 기술이 주목받는 배경에는 PC, TABLET, SMARTPHONE, SMART Device 등 모든 스마트 디바이스들의 표준 웹브라우저들이 HTML5를 지원하고 웹서버에서도 표준 웹브라우저들의 HTML5 Websocket과 통신할수있는 서버측 기술환경(Node.js,ASP.NET SignalR)들이 제공됨에 따라 별도의 플러그인 설치없이 모든 디바이스의 웹브라우저와 웹서버간 연결기반 실시간 양방향 메시징 서비스를 통해 표준화된 방식과 모든 디바이스를 통합할수 있는 다양한 실시간 웹 서비스를 개발.제공할수 있게되었다는 점입니다.

ㅁHTML5(WebSocket) 지원 표준 5대 브라우저




ㅁ 전통적인 비연결형 HTTP 웹 통신방식

ㅁ 연결기반 HTML5 Websocket 통신방식




ㅁ클라이언트/서버 HTML5 Websocket 지원 기술환경(ASP.NET SignalR,Node.js,JWebsocket)


2.2 Websocket 채팅서비스 체험하기

백문이 불여일견이라고 했으니 직접 HTML5 WebSocket과 금번 코드랩 프로젝트에서 사용할 기술들로 구현되어 있는 서비스를 직접 체험 보도록 하겠습니다.

http://dongledongle.com 


네이버에서 동글채팅,동글동글 이라고 검색하시면 웹사이트가 나오고요.
여러분의 웹브라우저를 켜고 사이트를 접속 후 상단메뉴중 Demo를 클릭합니다.
대화명을 원하시는명으로 입력하시고 접속합니다.



추가 브라우저 탭을 오픈하거나 스마트폰 브라우저에서도 접속해 상호 채팅을 실시해보십시오.
별도의 플러그인 설치없이 100% 순수 웹기반의 채팅이 이루어지고 있는것을 확인할수 있습니다.


 
2.3 초간단 WebSocket 채팅 개발하기(실습)

이번엔 백문이 불여 일타라고 했으니 먼저 간단히 지금까지 다루었던 HTML5 Websocket 기술을 통해 초간단 채팅 html페이지를 만들어보겠습니다.
여러분 컴퓨터의 보조프로그램에 있는 메모장을 열고 아래 코드를 복사 붙여넣기하시거나 직접 코딩하신 후 SimpleChatClient.html문서로 여러분
컴퓨터에 저장합니다.
 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
 <meta charset="utf-8" />
</head>
<body>
    <input type="text" id="userid" width="500" style="width:100%;" placeholder="Input User ID" value="AAAA">
    <input type="text" id="message" width="500" style="width:100%;" placeholder="Input Message.">
    <br>
    <input type="button" id="btnSend" value="Send" style="width:100%;" />
    <br />
    <ul id="discussion"></ul>
    
    <script src="http://demo.dongledongle.com/Scripts/jquery-1.10.2.min.js"></script>
    <script src="http://demo.dongledongle.com/Scripts/jquery.signalR-2.2.1.min.js"></script>
    <script type="text/javascript">
        var connection = $.hubConnection('http://demo.dongledongle.com/');
        var chat = connection.createHubProxy('chatHub');
        $(document).ready(function () {
            chat.on('addNewMessageToPage', function (name, message) {
                $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>');
            });
            $('#message').focus();
            connection.start({ jsonp: true }).done(function () {
                $('#btnSend').click(function () {
                    chat.invoke('send', $('#userid').val(), $('#message').val());
                    $('#message').val('').focus();
                });
            });
        });
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
</body>
</html>


저장후 탐색기에서 해당 파일( SimpleChatClient.html )을 더블클릭하면 웹브라우저로 해당 파일이 오픈됩니다.
채팅을 하려면 채팅대상으로 최소 1명이상 필요하겠죠?
탐색기에서 해당 파일(SimpleChatClient.html)을 더블클릭하여 웹브라우저를 하나 더 오픈합니다.
이번엔 채팅명을 AAAA 텍스트박스값을  BBBB로 변경하고 Input Message 박스에  채팅내용을 입력후 Send버튼을 클릭해보세요.

동일 브라우저에 다른탭으로 화면이 오픈되면 탭을 잡아당겨 브라우저를 두개를 만들어 채팅하시거나 크롬이나 IE등으로 개별 브라우저로 테스트 하시면 편해요.

두개의 브라우저 화면에서 채팅이 이루어지나요?
이번엔 브라우저를 하나더 오픈해서 http://demo.dongledongle.com/home/chat 주소로 접속해봅니다.

입력팝업(프롬프트)창이 오픈되면 채팅명을 CCCC로 입력하고 메시지 입력화면에 메시지를 입력후 Send를 눌러보세요.
이번에 3개의 브라우저에서 채팅이 아래와 같이 이루어지고 있는것을 확인할수 있습니다.


1,2번째 오픈한 채팅창은 여러분 컴퓨터내에 독립적으로 실행되는 웹페이지이고 3번째 채팅창은 웹서버에의해서 서비스되는 웹페이지입니다.
일반적인 경우는 3번째처럼 사용자들이 웹사이트 채팅페이지로 접속해서 채팅이 동시에 이루어지겠지만 1,2번처럼 독립적인 html페이지에서도 채팅이 이루어질수도 있습니다.(하이브리드앱 개발시 유용)

1,2번처럼 채팅이 가능한 이유는 웹브라우저에 의해서 여러분 컴퓨터의 SimpleChatClient.html 웹페이지가 실행되면서 웹브라우저의 HTML5 Websocket Client 기술을
이용해 채팅서버(소스상에 http://demo.dongledongle.com )와 통신하면서 해당 채팅서버에 접속한 모든 클라이언트(브라우저)들과 채팅이 가능해진것입니다.

그럼 좀더 복잡한 시나리오로 채팅을 즐겨볼까요?
여러분 스마트폰(안드로이드,아이폰 모두 OK) 의 웹브라우저를 오픈하고 http://demo.dongledongle.com/home/chat 주소로 접속합니다.
여러분 컴퓨터에서는 방금 만든 SimpleChatClient.html 페이지를 브라우저로 오픈해보세요.
상호 채팅이 가능한가요?

여러분의 컴퓨터에 어떠한 프로그램 설치도 없이 ,스마트폰에 어떠한 앱 설치 없이도  순수 웹브라우저 만으로 채팅을 즐길수 있습니다.
브라우저 또한 IE(10이상),Chrome,Safari,Firefox,Opera 어떤 브라우저든 최신 브라우저에서는 모두 채팅이 가능합니다.

이게 바로 HTML5 Websocket 기반의 순수웹 채팅의 저력?입니다. ^^
상기 채팅의 통신방식이나 작동원리등은 이후 차근차근 알아 보도록 하고요.
간단히 브라우저의 HTML5 WebSocket 클라이언트 기술과 어딘가에 있는 웹서버내 채팅기능을 이용해 순수 웹채팅하는것을 경험해 보았습니다. 

SimpleChatClient.html 페이지 소스를 들여다 보면 간단한 HTML로 문서 구조를 만들고  javascript 언어(Jquery)로   html5 websocket api를 활용해
동글 데모 채팅서비스에서 제공하는 웹서버와 실시간 양방향 통신을 통해 간단한 웹채팅 기능이  구현된것을 확인해볼수 있습니다.

html페이지내에서 보면 채팅 서버와 연결되는 각종 api는 순수 HTML5 Websocket API가 아닌것을 눈치채신분들도 있으실겁니다.
해당 채팅연결 API 코드들은 ASP.NET SignalR 이라는 서버측 웹소켓 채팅을 보다 쉽게 코딩할수 있도록 제공되는
jquery.signalR-2.2.1.min.js 자바스크립트 라이브러리 파일에서 제공되는 클라이언트 측 채팅 API들입니다. 해당 API안을 들여다 보면
사실 HTML5 Websocket API로 구현되어 있는것을 확인해볼수도 있습니다.

이와 같이 직접적으로 HTML5 Websocket API를 사용하지 않은 이유는 Jquery로 자바스크립 언어를 쉽게 사용하게 해주는것과 같거나
대표적인 웹 실시간통신 기술인 node.js 자바스크립트 라이브러리를 제공하는 이유와 같이 개발의 효율성과 편리성을 제공해주시기 위해
별도의 클라이언트 라이브러리를 제공해주기 위해서입니다.

ㅁ순수 HTML5 WebSocket API Code


   <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
    
               ws.onopen = function()
               {
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
    
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
    
               ws.onclose = function()
               { 
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            }
            
            else
            {
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>

그럼 실제 웹브라우저가 HTML5 Websocket기술로 통신하고 있는지 확인도 해볼까요?
브라우저로 채팅화면을 오픈후 F12 키를 누르면 웹브라우저의 개발자도구가 아래와 같이 활성화됩니다.

개발자도구 메뉴중 네트워크 메뉴를 클릭하고 connection항목을 선택해보면 websocket을 통한 통신이 이루어지고 있는것을 확인해볼수 있습니다.


ㅁIE12 개발자 도구




ㅁ Chrome 개발자 도구


지금까지  가볍게  웹소켓 에 대해 알아보고 통신 순서,  기본적인 API 사용법 과 관련 자바스크립트 라이브러리를 이용해 채팅 프로그램을 심플하게 작성해 보았습니다.

다음시간은 채팅서버쪽에서 채팅기능을 아주 쉽게 구현할수 있게 해주는 ASP.NET SignalR  서버측 기술과  .NET & ASP.NET등에 대해서 살펴보도록 하겠습니다.
그럼 다음시간에 뵙도록 하겠습니다.
감사합니다.

Comments

  1. DanlPapGU on 7/1/2022 3:04:43 AM

  2. contactalxfim on 5/10/2021 4:32:03 AM

    Dear Madame, Dear Sirs!

    We will send viacontact forms to the sites of business organizations via all domain zones of the world in any languages.

    Your letter is sent to E-mail of business organization hundred % will get to inside of the inbox folder!

    2000 bases:
    https://xn----7sbb1bbndheurc1a.xn--p1ai/prajs-list/

    Test:
    twenty thousand messages on foreign zones to your email address - 20 dollars.
    We need from You only E-mail, title and text of the letter.

    In our price there are more 800 databases for all domains of the world.
    Common databases:
    All Europe 44 countries 60726150 of sites - 1100$
    All European Union 28 countries 56752547 of sites- 1000$
    All Asia 48 countries 14662004 of domains - 300$
    All Africa 50 countries 1594390 of sites - 200$
    All North and Central America in 35 countries 7441637 of domains - 300$
    All South America 14 countries

  3. 우리 on 10/18/2019 8:06:52 PM

    관리자님!! 너무 좋은 정보 감사드려요~~! 공부하는데 정말 많은 도움 되었습니다ㅠㅠ 감사합니다 ㅎㅎ

  4. 관리자 on 7/20/2018 2:26:49 PM

    감사합니다. 김동현님~

  5. 김동현 on 7/15/2018 5:46:09 PM

    좋은 정보 얻어 갑니다. ~^^
    참고로, 상단에 있는 참고 사이트 링크(http://skccblog.tistory.com/1579)가 잘 못 된 주소라고 뜨고 있어요~

Leave a Reply

*