웹 소켓(WebSocket)은 모바일 등 대부분의 브라우저에서 사용되면서 점점 더 강력해지고 있습니다. 웹 소켓을 간단히 알아보고, 델파이용 웹 소켓 컴포넌트를 활용해 채팅앱을 만드는 과정을 알아보겠습니다. 이 예제에서는 델파이 컴포넌트 제공사인 Esegece 제품을 사용합니다. 

웹 소켓이 뭐죠?

웹 소켓 프로토콜을 사용하면 양방향 전송이 가능한 클라이언트-서버 통신 채널을 만들 수 있습니다. 여기서 양측(클라이언트-서버)은 동시에 데이터를 주고 받을 수 있습니다. 웹 소켓은 HTTP 프로토콜의 단점인 단방향 통신을 해소할 수 있는 방식입니다. 웹 소켓은 일반적으로 소셜 네트워크 피드, 채팅 앱, 협업 도구, 멀티 플레이어 게임 등에서 많이 사용됩니다.

HTTP와 웹소켓은 무엇이 다른가요?

지속적인 데이터 교환을 위해 오랜 시간 연결되어 있어야 하는 경우라면, 웹 소켓을 선택하는 것이 좋습니다. HTTP와 비교하자면 지연 시간이 짧고, 지속적인 연결성, 전 2중 방식(Full-Duplex, 양방향 전환)을 지원한다는 이점이 있습니다.

웹 소켓 델파이 컴포넌트

채팅 앱을 만들어보겠습니다. 웹 소켓 컴포넌트를 사용할텐데요. 이 예제에서는 eSeGeCe 델파이 웹 소켓 컴포넌트를 사용합니다. 이 컴포넌트의 좋은 점은 여기를 통해 확인할 수 있습니다. 그리고 구현 방법과 참고할 설명들도 확인해보세요. 시작에 앞서 eSeGeCe 델파이 웹 소켓 컴포넌트와 인디(Indy) 컴포넌트를 다운로드 받으세요. 이 두 컴포넌트 설치 방법은 여기를 통해 확인할 수 있습니다.

클라이언트 단 만들기 – 델파이 & 웹 소켓을 이용한 채팅 프로그램

클라이언트 단부터 만들어볼게요. 컴포넌트를 설치한 후  TsgWebSocketclient 컴포넌트와  TEdit 컴포넌트를 2개,  TMemo 를 1개,  TButton 을 1개 폼 위에 올려놓으세요. 두 개의  TEdit 는 이름과 메세지 입력란으로 사용하려고 합니다.  TMemo 에는 모든 메세지들을 보여줄 거에요.  TsgWebSocketClient 속성에서 host와 port 값을 변경할 수 있습니다. 호스트 값은 ‘localhost’로, port 값은 5416으로 설정합니다.

코드는 크게 두 부분으로 나뉩니다. 연결과 메세지입니다. 연결과 연결 해제는 폼에서 OnShow와 OnClose 메소드에 다음의 코드를 입력하면 됩니다:

메시지 수신은 더욱 간단합니다. TsgcWebSocketClient에 OnMessage 이벤트를 설정하면, 서버에서 보낸 텍스트가 바로 전달됩니다.  TMemo 컴포넌트에 다음의 코드만 넣으면 됩니다:

델파이로 웹 소켓 연결을 통해 메세지 전송하기

메세지 전송 또한 매우 간단합니다. 버튼(TButton)에 OnClick 이벤트를 설정하고 다음의 코드를 넣어주세요:

서버 단 만들기 – 델파이 & 웹 소켓을 이용한 채팅 프로그램

서버단에는  TsgcWebSocketHTTPServer 컴포넌트와  TMemo 컴포넌트가 필요합니다.  sgcWebSocketHTTPServer 프로퍼티 옵션에서 HTML 파일을 확인합니다. Fallback/ServerSentEvents/Retry 는 3으로, 포트는 5416으로 설정합니다.

코드 작성할 부분은 크게 두 파트가 있습니다: 연결과 메세지. 클라이언트-서버 단에서 했던 것과 같이  TsgcWebSocketHTTPServer 컴포넌트에 대해서 동일하게 진행하면 됩니다.

메세지의 경우, 모든 메세지를 받아오도록 설정하겠습니다. 그리고 다른 연결되어 있는 모든 클라이언트 단 프로그램에도 메세지를 보낼 수 있도록 하겠습니다. OnMessage 이벤트에 다음과 같이 코드를 입력하세요:

RAD스튜디오에서 웹 소켓 채팅 프로그램 실행하기

하나의 서버와 두 개의 클라이언트를 띄워서 프로그램을 실행해볼까요?

이 예제 프로그램의 전체 소스 코드는 다음 링크를 통해서 다운로드 받을 수 있습니다: https://github.com/brunomileto/chat_websocket

통신 프로그래밍에 대한 더 많은 내용

이 예제에서는 매우 간단한 데모를 다루어보았습니다. 서버와 클라이언트가 서로 통신하는 프로그램을 개발하는 방법들을 더 자세히 알고 싶다면, 데브기어에서 진행하는 ‘미들웨어 서버와 멀티티어‘ 과정을 확인해보세요. 미들웨어 서버와 클라이언트 구축 방법을 자세히 배울 수 있습니다. 데이터스냅(DataSnap), REST, 웹 브로커 등에 대해서도 배울 수 있습니다: https://devgear.co.kr/archives/events/multitier

번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 14387
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13023
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 15532
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 21064
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 22297
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 17933
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 38228
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 173741
269 ComPort(시리얼 통신) 컴포넌트 설치안내 [11] file 험프리 2013.12.04 106653
268 델파이 XE2에서 dbExpress를 이용해 오라클 연결하기 file 박병일 2012.02.15 17716
267 다중 클라이언트를 위한 DataSnap 서버 만들기 관리자 2011.12.22 16102
266 델파이XE2의 VCL Styles 활용하기 박병일 2012.01.19 15351
265 dbExpress 의 SQLConnection 에서 트랜젝션 처리하기 박병일 2012.02.08 13972
264 [델파이 문법 시리즈] #1. 제네릭 - 개요 file 관리자 2012.03.21 13163
263 델파이 XE2 DataSnap Client 만들기 [1] 관리자 2011.12.22 12884
262 [델파이 업그레이드 마이그레이션 무상 컨설팅] 체크리스트와 가이드(첨부 파일) [1] file 관리자 2012.02.08 12868
261 "모바일 앱" 개발 또는 유지관리, 데브기어와 해결하세요! file 관리자 2015.03.26 12726
260 [델파이 문법] 클래스와 객체 #8 file 관리자 2012.05.07 12567
259 델파이로 만든 구글 지오코딩 쎔플 입니다. 박병일 2012.02.06 11015
258 [델파이 문법] 클래스와 객체 #1 file 관리자 2012.04.12 10863
257 [오픈소소] 델파이용 TProcessInfo 클래스 file 관리자 2012.05.23 10437
256 VCL Style Util 박병일 2012.01.11 10286
255 [델파이 문법 시리즈] #2. 제네릭 - 용어 file 관리자 2012.03.22 10005
254 [델파이 문법] 클래스와 객체 #10 file 관리자 2012.05.22 9820
253 [델파이 문법] 클래스와 객체 #3 file 관리자 2012.04.18 9310
252 델파이 XE2 Update4의 새기능 - 더 쉬운 모바일 REST 접속 file 박병일 2012.03.06 9143
251 [델파이 문법] 프로그램과 유닛 #1 file 관리자 2012.09.03 9055