[개발 예제] 웹 소켓 서버&클라이언트 채팅 프로그램

웹 소켓(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

api C++ c++builder c++빌더 code database Delphi fmx IDE ideas interbase ios migration modernization news python radstudio RAD스튜디오 tips UI UIUX vcl windows 개발 개발사례 개발팁 교육 기술레터 기술백서 데이터 데이터베이스 델파이 마이그레이션 모바일 윈도우 윈도우11 인터베이스 출시 코드 파이썬 파이어몽키 프로그래밍 프로젝트 현대화