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에서 자바 서버로 작업을 요청하면

자바 서버에서 해당 작업을 수행하는

형태로 구현하려고 웹소켓을 이용하게

됐습니다^^;;;;;;;;; 참 이렇게 하기까지

길고 기 여정이었습니다 ㅠㅠㅠ

[HTML5] 웹소켓(WebSocket), AngularJS, Jetty 서버를 이용한 동적 웹 페이지 개발

요즘 프로젝트를 하면서 부쩍 동적인 화면 구성에

관심이 많이 생겼습니다. 정확히는 관심이 생겼다기

프로젝트여서 관심을 가질 수 밖에 없는 상황이지만

이게 할 수록 재미가 생기네요~ 웹 소켓이나

AngularJS라는 전에는 해보지 않았던 것들도

새로 알게 됐습니다! 웹소켓은 HTML5가 나오면서

웹 브라우저를 통해 양방향 소켓 통신이 가능한

기술이다란 이야기는 들어 봤지만 실제로 해보니

신기하기도 하지만 아직도 잘 모르겠네요 ㅎ

아 그런데 위에서 말한 웹 페이지의 동적화면 구성에

있어서는 AngularJS를 사용했습니다.

JavaScript를 이용해서 웹 화면을 작업하는데

있어서 인력, 시간을 확연히 줄이게 해주는

기술이라고 합니다~ 아직 간단한 예제만

해봤지만 몇 줄 만으로 동적인 화면 구성이

가능한데 웹 개발을 해보신 분이 AngularJS를

사용해보니 신기하기도 하고 편하기도 하답니다.

일단 확실한 건 전에 비해 코드량을 엄청

줄일 수 있다고 하네요~

아 그리고 결정적으로 구글이 만든 기술입니다!

일단 기존에 웹 페이지 제작에 있어서 문제점은

화면 갱신을 위해서는 화면을 다시 리프레쉬 해야 된다.

어설프게 들은 얘기를 꺼내자면 예전에 AJAX나

아이프레임 등을 통해 전체 화면이 아닌 필요한

부분만 갱신하는 기술이 있었다고 들었습니다.

(정확히는 모릅니다 ㅠㅠ)

그런데 이 것도 어찌 되었든 뭔가 문제가 있었고,

그런 문제/단점 등을 보완해서 나온 것이

AngularJS 입니다. 철저한 MVC의 분리와

데이터와 화면에 binding을 통해 모델 값이

바뀌면 바로 View에도 적용이 됩니다.

정말 간단한 예제를 하나 올려 봅니다.

기존 HTML 언어와 큰 차이는 보이지 않습니다.

하지만 차이는 있습니다~!

ng-controller나 ng-click, 그리고 {{xx}} 형태의

중괄호, ng-model 이 보입니다. 이게 AngularJS의

모든 건 아니고, 기존에는 없던 개념들 중에 일부입니다.

위와 같이 화면을 구성하고 WebsocketClientController.js를

구성해주면 동적 화면 구성이 가능합니다. 물론

WebsocketClientController.js 개발을 위해서는

AngularJS를 좀 공부하셔야겠죠~! 

모니터링 그래프 데이터를 얻기 위해 요청/응답의 무한 반복

아 당연히 응답을 받기 위해서는 요청을 보내야겠죠!

접속하고 싶은 인터넷 주소를 쳐야(요청)

해당 주소의 웹 페이지(응답)를 받는 거니깐요!

하지만 상황에 따라서는 굳이 요청이 필요없는

경우도 있을 수 있습니다. 무조건 데이터를 받는

경우나 계속 값을 확인하고 최신의 값을

화면에 보여주는 경우는 요청 없이 서버 쪽에서

바로 화면으로 값을 보내줘도 되는 겁니다.

요청이라는 단계를 생략하니 당연히 부하도

덜 할 것이고, 속도도 빨라질 겁니다.

이러한 방식을 구현하기 위해 사용한 것이

웹 소켓(WebSocket)입니다.

간단히 말하면 요청 없이 서버에서 클라이언트로

바로 데이터를 보내줄 수 있으며, 당연히 클라이언트에서

서버로도 데이터를 보낼 수 있습니다.

즉 양방향 통신이 가능해 집니다.

웹 소켓을 이용한 자바 서버 예제입니다.

웹 소켓을 이용해서 서버를 띄우는 방법은

여러가지가 있는 듯 합니다.

그 중에 전 제티를 이용해서 서버를

띄웠습니다. 예제를 찾다가 구동되는 걸

찾은게 jetty 예제입니다 ㅎㅎㅎㅎ

위의 자바 예제로 웹소켓 서버를 띄우고,

AngularJS로 웹 페이지로 클라이언트로

접속해서, client의 요청이 없이 제티 서버 쪽에서

웹으로 데이터를 주는 간단한 예제를 구성해

봤습니다. 여러 웹 페이지를 띄워

하나의 제티 서버로 붙어서 서버로부터

데이터를 받는 동안 다른 웹 페이지에서는

요청을 보내 응답을 받아 보기도 했습니다.

정말 나와 있는 기술들을 보면 놀라울 뿐입니다!

있는 기술 잘만 사용해도 괜찮은 거 하나는

만들 수 있을 거 같고, 정말 실력 좋으면

요즘 트렌드인 1인 기업도 가능하지 않을까요?ㅎ

좀 오버하긴 했지만 어찌 되었든 요즘 프로젝트를

하면서 정말 세상에는 기술들이 많구나라는 걸

매일 매일 깨닫고 있습니다.

따라가기 벅차네요 ㅠㅠㅠㅠ

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에서 자바 서버로 작업을 요청하면

자바 서버에서 해당 작업을 수행하는

형태로 구현하려고 웹소켓을 이용하게

됐습니다^^;;;;;;;;; 참 이렇게 하기까지

길고 기 여정이었습니다 ㅠㅠㅠ