플러터(Flutter)는 모바일 앱을 개발하기 위한 도구로, 다양한 기기에서 동작하는 고품질의 애플리케이션을 만들 수 있게 해줍니다. 여기에 웹소켓(WebSocket)을 통한 서버와의 양방향 통신 기능을 추가할 수 있습니다. 이번 포스트에서는 플러터와 웹소켓의 간단한 연동 방법을 알아보겠습니다.

웹소켓 라이브러리 추가

먼저, web_socket_channel 패키지를 사용하여 플러터 애플리케이션에 웹소켓을 추가해야 합니다. pubspec.yaml 파일을 열고 아래와 같이 dependencies 섹션에 web_socket_channel 패키지를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.1.0

그런 다음, 터미널에서 flutter pub get 명령을 사용하여 패키지를 다운로드 받아야 합니다.

웹소켓 연결

이제, web_socket_channel 패키지의 WebSocketChannel 클래스를 사용하여 웹소켓을 연결할 수 있습니다. 아래는 간단한 예제 코드입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final WebSocketChannel channel = IOWebSocketChannel.connect('ws://echo.websocket.org');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WebSocket Example'),
        ),
        body: Center(
          child: StreamBuilder(
            stream: channel.stream,
            builder: (context, snapshot) {
              return Text(snapshot.hasData ? '${snapshot.data}' : 'No data');
            },
          ),
        ),
      ),
    );
  }
}

위 코드에서는 IOWebSocketChannel 클래스를 사용하여 echo.websocket.org에 웹소켓 연결을 수행하고, 받은 데이터를 화면에 표시하는 간단한 예제를 보여줍니다.

통신 및 이벤트 처리

웹소켓을 통해 메시지를 전송하거나 이벤트를 처리하기 위해서는 웹소켓 채널로부터 제공되는 sink와 stream을 활용해야 합니다. 예를 들어, 아래와 같이 sink를 사용하여 메시지를 전송할 수 있습니다.

channel.sink.add('Hello, WebSocket!');

그리고 stream을 통해 서버로부터 오는 메시지를 처리할 수 있습니다.

마무리

이제 플러터 애플리케이션에 웹소켓을 연동하여 서버와의 양방향 통신을 구현하는 방법에 대해 간단히 알아보았습니다. 웹소켓을 활용하면 실시간으로 데이터를 주고받을 수 있는 모바일 앱을 만들 수 있어 다양한 영역에서 유용하게 활용될 수 있을 것입니다.

행복한 코딩 되세요!

참고링크 - 웹소켓 관련 자료