Monday, June 13, 2016

Ionic, angularjs 를 이용한 웹소켓(WebSocket) 예제


요즘 부쩍 웹 기술에 관심이 많아지고 있습니다.
웹 개발자가 너무 많아서 웹 하면 개발자로
롱런 못한다는 이야기도 들었지만 일을 해볼수록
웹 기술을 익혀 놓으면 써 먹을 때가 많다라는
생각이 계속 듭니다~ 특히나 웹-앱 간 하이브리드 웹앱이
참 매력적인 분야인 거 같습니다~
물론 제가 요즘 회사에서 웹 작업 위주로 하고
있어서 섣부른 판단일 수도 있지만 웹 관련 된
새로운 기술을 접할 때마다 놀라곤 합니다~


특히나 요즘은 AngularJS를 이용한 작업을
하고 있는데 애초에 제가 웹 개발을 해본적이
많이 없어서 절대적인 비교는 할 수 없지만
AngularJS 를 통한 화면 작업은 참 재미 있으면서도
좋은 예제도 많고,그 예제들만 잘 이용해도
어지간한 어플리케이션은 다 만들 수 있을거 같습니다
물론 아직 우리나라에서는 생소한 기술이지만
구글에서 AngularJS 예제를 검색해 보면
정말 많은 예제들이 있어서 작업하는데 많은
도움이 되는게 사실입니다~

Ionic


그리고 계속 작업을 하다 보니 역시나
제가 생각했던 기술이 있더라구요
바로 Ionic 인데 Ionic을 통해서 AngularJS 프로젝트를
생성할 수 있으며, 작업한 AngularJS 프로젝트를
안드로이드, 아이폰 어플로도 변환할 수도 있습니다.
아이폰 변환까지는 못해 봤지만 안드로이드 변환은
해봤습니다. 변환 작업을 하면 APK 파일이 생성되며
해당 파일을 안드로이드 스마트폰에서 실행하면
핸드폰에 설치가 되더라구요~~~
참 대단한 세상이고 대단한 개발자,
대단한 기술이거 같습니다 ㅎㅎㅎ
Ionic은 우연찮게 찾은 기술인데
앞으로 Ionic을 이용해서 개인적인
작업도 해 볼 생각입니다~

웹소켓


해당 작업을 위해서는 자바 서버와
웹 클라이언트가 필요합니다.


웹 클라이언트는 AngularJS를 통해서 구현했습니다.

자바로 구현한 웹소켓 서버입니다.

원래는 자바를 사용하지 않고
AngularJS로만 작업을 하려고
했는데 작업을 하다가 CORS
라는 엄청난 문제에 봉착했습니다.
CrossDomain 문제라고도 하던데..
간단하게 내용을 말씀드리자면 ㅠ

프로토콜이나 IP, 포트가 다른 서버 간
JavaScript 통신은 막는다... 

뭐 대충 이런 내용이더라구요..
예를 들면 제 로컬에서 JavaScript
함수를 이용해서 웹 페이지를 읽어오거나
로딩해 오려고 하면 그럴 수 없게 막아
막는다는 거죠... 해결 방법은 서버 쪽에서
응답 헤더에 뭔가 설정을 해줘야 된다고
하는데... 전 계속 client 작업을 해서
결국 결국.. 포기했었습니다. 그런데
생각해 보니 동일한 작업을 javascript만
사용하지 않으면 되더라구요... 그래서
제가 자바 서버를 구현해서 angularjs
client에서 자바 서버로 작업을 요청하면
자바 서버에서 해당 작업을 수행하는
형태로 구현하려고 웹소켓을 이용하게
됐습니다^^;;;;;;;;; 참 이렇게 하기까지
길고 기 여정이었습니다 ㅠㅠㅠ