[고급] Dart 서버 실시간 애플리케이션 구현 / WebSocket을 사용한 실시간 통신 구현

 

Dart는 웹과 서버 애플리케이션 모두에서 강력한 기능을 제공하는 프로그래밍 언어입니다.

특히 실시간 애플리케이션 개발에서 유용한 WebSocket을 활용하여 서버와 클라이언트 간에 실시간으로 데이터를 주고받을 수 있습니다.

이번 포스트에서는 Dart를 사용하여 WebSocket을 통한 실시간 통신을 구현하는 방법을 초보자도 쉽게 이해할 수 있도록 설명하겠습니다.

1. WebSocket이란?

WebSocket은 웹에서 클라이언트와 서버 간에 양방향 통신을 가능하게 하는 프로토콜입니다. HTTP와 달리 WebSocket은 서버와 클라이언트 간에 지속적인 연결을 유지하면서 실시간으로 데이터를 주고받을 수 있습니다.

• 양방향 통신: 클라이언트와 서버가 서로 데이터를 주고받을 수 있습니다.
• 지속적인 연결: 연결이 유지되는 동안에는 HTTP와 달리 계속해서 데이터를 전송할 수 있습니다.
• 낮은 지연 시간: 실시간 애플리케이션에서 필요한 빠른 응답성을 제공합니다.

2. Dart에서 WebSocket 사용하기

Dart에서 WebSocket을 사용하여 실시간 애플리케이션을 구현할 수 있습니다. 서버 측과 클라이언트 측의 구현 방법을 각각 살펴보겠습니다.

서버 측 구현

서버 측에서는 dart:io 라이브러리를 사용하여 WebSocket 서버를 구현할 수 있습니다. 다음은 기본적인 WebSocket 서버를 구현하는 코드입니다.

 

WebSocket 서버 코드 예제

import 'dart:io';

void main() async {
  // WebSocket 서버 바인딩
  final server = await HttpServer.bind('localhost', 4040);
  print('WebSocket server listening on ws://localhost:4040');

  // 클라이언트 요청 처리
  await for (HttpRequest request in server) {
    if (request.uri.path == '/ws') {
      // WebSocket 연결 처리
      WebSocketTransformer.upgrade(request).then((WebSocket socket) {
        print('New WebSocket connection established');
        socket.listen((message) {
          print('Received message: $message');
          socket.add('Server received: $message'); // 클라이언트에게 응답
        });
      });
    }
  }
}

 

코드 설명

• HttpServer.bind(): localhost의 4040 포트에서 HTTP 서버를 시작합니다.
• WebSocketTransformer.upgrade(): 클라이언트의 HTTP 요청을 WebSocket 연결로 업그레이드합니다.
• socket.listen(): 클라이언트로부터 메시지를 수신하고, 받은 메시지를 출력한 후 클라이언트에게 응답을 보냅니다.

클라이언트 측 구현

클라이언트 측에서는 Dart의 dart:io 또는 dart:html 라이브러리를 사용하여 WebSocket 클라이언트를 구현할 수 있습니다.

웹 브라우저에서 실행할 경우 dart:html을 사용하는 것이 일반적입니다.

 

WebSocket 클라이언트 코드 예제

import 'dart:html';

void main() {
  // WebSocket 서버에 연결
  final ws = WebSocket('ws://localhost:4040/ws');

  // WebSocket 연결 열림 이벤트 처리
  ws.onOpen.listen((event) {
    print('Connected to WebSocket server');
    ws.send('Hello from the client!'); // 서버에 메시지 전송
  });

  // WebSocket 메시지 수신 이벤트 처리
  ws.onMessage.listen((MessageEvent event) {
    print('Received from server: ${event.data}');
  });

  // WebSocket 오류 이벤트 처리
  ws.onError.listen((event) {
    print('WebSocket error: $event');
  });

  // WebSocket 연결 종료 이벤트 처리
  ws.onClose.listen((event) {
    print('WebSocket connection closed');
  });
}

코드 설명

• WebSocket('ws://localhost:4040/ws'): WebSocket 서버에 연결합니다.
• ws.onOpen.listen(): 연결이 열렸을 때의 이벤트를 처리합니다. 서버에 메시지를 전송합니다.
• ws.onMessage.listen(): 서버로부터 메시지를 수신하고, 받은 메시지를 출력합니다.
• ws.onError.listen(): WebSocket 오류를 처리합니다.
• ws.onClose.listen(): WebSocket 연결이 종료되었을 때의 이벤트를 처리합니다.

3. 실전 예제 및 코드 설명

위의 서버 및 클라이언트 코드를 사용하여 간단한 실시간 애플리케이션을 구현할 수 있습니다.

클라이언트가 서버에 연결하면 서버는 클라이언트로부터 메시지를 수신하고, 클라이언트에게 응답을 보내는 방식으로 실시간 통신을 처리합니다.

 

서버는 localhost:4040에서 실행되며, 클라이언트는 ws://localhost:4040/ws URL을 사용하여 서버와 연결합니다.

클라이언트에서 전송한 메시지는 서버에서 수신되어 콘솔에 출력되고, 서버는 클라이언트에게 응답을 보냅니다.

4. 자주 묻는 질문 (FAQ)

Q1: WebSocket을 사용할 때의 주요 장점은 무엇인가요?

WebSocket의 주요 장점은 양방향 통신이 가능하며, 연결이 유지되는 동안 실시간으로 데이터를 주고받을 수 있다는 점입니다. 이는 실시간 애플리케이션(예: 채팅 앱, 실시간 데이터 피드)에 적합합니다.

Q2: WebSocket과 HTTP의 차이점은 무엇인가요?

HTTP는 요청-응답 기반의 프로토콜로, 클라이언트가 서버에 요청을 보내면 서버가 응답을 반환합니다. 반면, WebSocket은 지속적인 연결을 유지하며 양방향 통신을 가능하게 합니다. 이는 실시간 데이터 전송에 적합합니다.

Q3: WebSocket 서버를 Dart 외의 다른 언어로도 구현할 수 있나요?

네, WebSocket 서버는 다양한 프로그래밍 언어(예: JavaScript, Python, Java, Node.js)로 구현할 수 있습니다. 각 언어에 맞는 라이브러리와 프레임워크를 사용하여 WebSocket 서버를 구축할 수 있습니다.

 

Dart를 사용하여 WebSocket을 통한 실시간 통신을 구현하는 방법을 소개했습니다.

Dart의 dart:io 및 dart:html 라이브러리를 활용하여 서버와 클라이언트 간에 실시간으로 데이터를 주고받을 수 있습니다.

이 기술을 활용하여 다양한 실시간 애플리케이션을 개발할 수 있습니다.

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱