웹 소켓(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
90 [따라하기] 인공지능 오목게임(3) - 디자인 구성하기 file 대화마을 2017.09.14 1613
89 [따라하기] 인공지능 오목게임(2) - 최종결과물 [2] file 대화마을 2017.09.14 1611
88 [10.3.3] 안드로이드 64비트 앱 빌드하기 [4] file 험프리 2019.11.27 1594
87 [따라하기] 인공지능 오목게임(7) - 오목게임 승자(5돌) 결정 지능프로그램 file 대화마을 2017.10.17 1558
86 [기술문서] Delphi 코딩 스타일과 아키텍처(Delphi 2009의 언어 기능 리뷰) 관리자 2014.09.16 1532
85 [안드로이드] 배포파일, 아이콘, 스플래쉬 등이 잘 배포되었는지 확인하기 file 험프리 2015.11.11 1520
84 RFID 리더(한미IT RF Prisma) 연동하기 - 델파이에서 JAR 이용 [1] 험프리 2017.12.19 1509
83 [따라하기] 도서대여 프로그램 만들기 - 6, 통합테스트 file 험프리 2017.02.02 1341
82 [고객 사례- 델파이, 모바일, 전략] 축구 전술 기획 앱 - Soccer Playview 관리자 2021.08.20 1305
81 델파이용 로우 코드 앱 마법사(LOW CODE APP WIZARD) 관리자 2021.06.25 1271
80 윈도우 10에서의 High DPI 김원경 2020.03.02 1248
79 [코드레이지 2019] 웹소켓(WebSocket)과 델파이 험프리 2020.01.22 1200
78 REST 웹서비스, 델파이에서 어떻게 활용해야 할까요? 관리자 2021.08.11 1200
77 제너릭(Generic)과 제너릭을 사용한 예제(제너릭 콜렉션 등) file 김원경 2020.01.15 1198
76 델파이의 새 달력콤포넌트 기능향상 및 버그수정.. 나비스 2017.08.18 1195
75 XE8로 구현한 멀티플랫폼 클립보드 공유앱 런칭 file c2design 2015.04.19 1184
74 내가 델파이를 계속 선택하는 이유 관리자 2021.06.01 1173
73 델파이 문서화 도구 참고링크 Humphery 2015.09.11 1149
72 [Delphi week 2015] 윈도우 3.11에서 델파이1.0 사용하기 관리자 2015.02.13 1136
71 [DelphiCon 요약] Spring4D 소개 - 델파이 개발을 한수준 높이기 (Introduction to Spring4D - Taking Delphi Development to the Next Level) 관리자 2021.01.08 1135