Colin's Blog
[flutter] 플러터에서의 웹 소켓 통신 구현 방법

소개

웹 소켓은 실시간 통신을 제공하는 프로토콜로서, 클라이언트와 서버 간 양방향 통신을 가능하게 합니다. 플러터에서도 웹 소켓을 이용하여 실시간 통신을 구현할 수 있습니다. 이 글에서는 플러터에서 웹 소켓 통신을 구현하는 방법에 대해 알아보겠습니다.

웹 소켓 통신 라이브러리

플러터에서 웹 소켓 통신을 구현하기 위해 다양한 라이브러리를 사용할 수 있습니다. 여기서는 가장 널리 사용되는 web_socket_channel 라이브러리를 사용하여 구현하는 방법을 알아보겠습니다.

세팅하기

먼저, 프로젝트의 pubspec.yaml 파일에 web_socket_channel 의존성을 추가해야 합니다:

dependencies:
  web_socket_channel: ^2.0.0

그 다음, pub get 명령어를 실행하여 의존성을 다운로드 받아야 합니다.

웹 소켓 연결하기

web_socket_channel 라이브러리를 이용하여 웹 소켓에 연결할 수 있습니다. 다음은 연결하는 예제 코드입니다:

import 'package:web_socket_channel/io.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

void main() {
  final channel = IOWebSocketChannel.connect('ws://localhost:8080');
  
  channel.sink.add('Hello!');
  
  channel.stream.listen((message) {
    print('Received: $message');
  });
  
  channel.sink.close();
}

위 코드에서 IOWebSocketChannel.connect() 메서드를 사용하여 웹 소켓에 연결합니다. 연결된 소켓은 channel 변수에 저장됩니다. channel.sink는 송신을 위한 스트림이며, channel.stream은 수신을 위한 스트림입니다. 이때, channel.sink.add() 메서드를 사용하여 메시지를 전송할 수 있습니다.

웹 소켓 통신 예제

웹 소켓 통신의 원리를 이해하기 위해 예제를 살펴보겠습니다. 서버 측에서는 클라이언트로부터 메시지를 수신하고, 해당 메시지를 클라이언트에게 다시 전송하는 단순한 에코 서버를 구현해보겠습니다. 먼저 서버 측에서의 코드입니다:

import 'dart:io';

void main() {
  serve().then((_) => print('Server started!'));

  Future<void> serve() async {
    final server = await HttpServer.bind('localhost', 8080);
    print('Listening on ${server.address}:${server.port}');

    await for (HttpRequest request in server) {
      if (WebSocketTransformer.isUpgradeRequest(request)) {
        WebSocketTransformer.upgrade(request).then((WebSocket socket) {
          socket.listen((message) {
            print('Received: $message');
            socket.add('Echo: $message');
          });
        }).catchError((_) => print('Error'));
      } else {
        request.response.statusCode = HttpStatus.forbidden;
        request.response.reasonPhrase = 'WebSockets only';
        await request.response.close();
      }
    }
  }
}

위 코드는 HttpServer를 생성하고, 클라이언트로부터 웹 소켓 연결을 받아들이는 에코 서버를 구현한 예제입니다. 클라이언트로부터 받은 메시지를 다시 클라이언트에게 전송하는 에코 기능을 수행합니다.

이제 클라이언트 측에서의 코드를 살펴보겠습니다:

import 'package:web_socket_channel/io.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

void main() {
  final channel = IOWebSocketChannel.connect('ws://localhost:8080');
  
  channel.stream.listen((message) {
    print('Received: $message');
    channel.sink.add('Hello, server!');
  });
}

위 코드는 서버에 연결하여 해당 서버로부터 메시지를 수신하고, 받은 메시지를 출력한 뒤 다시 서버에게 메시지를 전송하는 예제입니다.

결론

플러터에서 웹 소켓 통신을 구현하는 방법에 대해 알아보았습니다. web_socket_channel 라이브러리를 이용하여 손쉽게 웹 소켓 통신을 구현할 수 있습니다. 웹 소켓을 이용하면 효율적이고 실시간 통신이 가능하므로, 실시간 알림, 채팅 등 다양한 기능을 구현할 수 있습니다.

더 많은 내용은 아래 참고 자료를 참고해주세요:

© 2018 Colin. All rights reserved.