Vue.js - WebSocket(웹 소켓)
안녕하세요. 오늘은 Vue.js 를 활용해서 간단한 웹 소켓을 구현해보겠습니다.
WebSocket 기술은 쉽게 이야기 해서 서버 및 클라이언트 상호간의 양방향 실시간 데이터 전송을
가능하게 해주는 기술이라고 이해하시면 될 것 같습니다.
HTTP와 같은 Long Polling 기술은 서버측에 많은 비용(Cost)를 주는 경향이 있지만, 웹 소켓을 활용한
적합한 환경에서의 기능 구현은 양방향 통신에 많은 장점을 가져다 주는 기술은 분명한 것 같습니다.
이전에 제가 웹 소켓에 대해서 자세하게 기술에 놓은 포스팅을 링크합니다. 웹 소켓 기술에 대해서
좀 더 자세히 알고 싶으신 분들은 아래 링크를 참조하세요.
기존 포스팅 참고 : 링크
그럼 이번 포스팅 시작해 보겠습니다.
Vue.js - Ajax Polling과 WebSocket 비교(참고)
위 그림에서 핵심적으로 이해하실 수 있는 사실은 기존 요청-응답 관계에서 벗어난 양방향 자유로운 송수신을 지원한다는 점이 가장 큰 매리트라고 볼 수 있습니다.
아울러, 요즘 웹 소켓 사용에 적합한 기능 구현의 예는 다음과 같습니다.
1. 페이스북 SNS 실시간 채팅
2. 실시간 차트의 데이터 처리 - 가상화폐 거래소
3. 구글 Doc 등과 같은 협업 관리 시스템
4. 화상 채팅, 온라인 교육 시스템 등
Vue.js - WebSocket 기본 예제 코드 작성
하단은 Vue.js CDN 방식으로 간단하게 웹 소켓 기능을 구현한 소스코드 입니다.
부가적으로 사용자의 요구에 맞게 연결(connect),종료(close),발신(Send),수신(Receive),로그(Log) 등
세부 기능 역시 구현되어 있으며 천천히 리뷰해보시면 쉽게 이해하실 수 있을거라 생각됩니다.
몇 줄 안되는 소스 코드이지만, WebSocket API의 기본적인 골격은 완성되어 있다고 볼 수 있습니다.
하단에 소스코드 다운로드를 통해서 직접 실행해보시고 코드도 살펴보시면 쉽게 이해가 되실 겁니다.
본 WebSocket 예제는 윈도우10(windows10 x64) 및 MacOS(Sierra) 에서 테스트를 진행했습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html> <meta charset="utf-8" /> <title>Vue-WebSocket 테스트</title> <body> <div id="app"> <button @click="disconnect" v-if="status === 'connected'">연결끊기</button> <button @click="connect" v-if="status === 'disconnected'">연결</button> {{ status }} <br /><br /> <div v-if="status === 'connected'"> <form @submit.prevent="sendMessage" action="#"> <input v-model="message"><button type="submit">메세지 전송</button> </form> <ul id="logs"> <li v-for="log in logs" class="log"> {{ log.event }}: {{ log.data }} </li> </ul> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <script language="javascript" type="text/javascript"> const app = new Vue({ el: "#app", data: { message: "", logs: [], status: "disconnected" }, methods: { connect() { this.socket = new WebSocket("wss://echo.websocket.org"); this.socket.onopen = () => { this.status = "connected"; this.logs.push({ event: "연결 완료: ", data: 'wss://echo.websocket.org'}) this.socket.onmessage = ({data}) => { this.logs.push({ event: "메세지 수신", data }); }; }; }, disconnect() { this.socket.close(); this.status = "disconnected"; this.logs = []; }, sendMessage(e) { this.socket.send(this.message); this.logs.push({ event: "메시지 전송", data: this.message }); this.message = ""; } } }); </script> </body> </html> | cs |
소스코드 다운로드 : 
vue-websocket.zip
Vue.js - WebSocket 기본 예제 실행
소스코드 다운로드 : vue-websocket.zip
실제로 크롬(Chrome) 브라우저에서 테스트한 화면이며, 문제없이 잘 동작하고 있습니다.
브라우저별 WebSocket 지원 여부는 이 곳을 방문하시면 확인하실 수 있습니다.
마무리
프런트엔드 개발자의 40% 이상이 배우고 싶어하는 Vue.js를 사용해 보면서 재사용이 가능한 웹페이지를 구성하는 컴포넌트로 개발을 손쉽게 진행하고 있습니다.
프런트 개발을 Vue.js로 시작하시는것도 좋은 선택이라 생각됩니다. 물론 기반기술인 자바스크립트의 깊은
학습도 잊지 말아야 겠죠?
마지막으로 브라우저를 활용한 사용자와 상호작용 하는 기술은 정말 빠르게 발전하고 있습니다.
앞으로도 압도적인 성능을 자랑하는 기술이 발표 될 것으로 생각됩니다. 개발자로서 다양한 기술 사용을 통해 보다 사용자에게 좋은 서비스를 제공하고 싶습니다.
Socket.io 에 관한 쉬운 학습은 이 곳을 방문하시면 확인하실 수 있습니다.
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - npm & 테스트(Sample) 프로젝트 설치 및 실행 방법 (0) | 2018.04.16 |
|---|---|
| Vue.js - 기초 문법 배우기(10) 강의 및 예제 소스 - 기초 문법 (1) | 2018.03.12 |
| Vue.js - 기초 문법 배우기(9) 강의 및 예제 소스 - 기초 문법 (0) | 2018.03.07 |
| Vue.js - 기초 문법 배우기(8) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.09 |
| Vue.js - 기초 문법 배우기(7) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.07 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}