[flutter] 플러터 프로바이더를 사용하여 웹소켓 통신하기

22 Dec 2023

flutter

웹소켓은 실시간 양방향 통신을 가능하게 하는 프로토콜로, 플러터 애플리케이션에서 웹소켓을 활용하기 위해서는 프로바이더(Provider)를 사용하여 효과적으로 관리해야 합니다.

프로바이더는 상태 관리를 쉽게 하고 코드를 깔끔하게 유지할 수 있는 방법입니다. 이번 튜토리얼에서는 플러터 애플리케이션에서 웹소켓 통신을 설정하고 관리하기 위한 프로바이더의 활용 방법을 살펴보겠습니다.

1. 웹소켓 연결 설정

먼저, web_socket_channel 패키지를 사용하여 웹소켓 연결을 설정합니다. 다음은 web_socket_channel 패키지를 추가하는 방법입니다.

dependencies:
  web_socket_channel: ^2.1.0

2. 프로바이더 설정

web_socket_channel을 사용하여 웹소켓 연결을 설정한 다음, 프로바이더를 사용하여 웹소켓 상태를 관리합니다.

다음은 웹소켓 통신을 위한 프로바이더를 설정하는 예제 코드입니다.

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

class WebSocketProvider with ChangeNotifier {
  late final WebSocketChannel _channel;

  WebSocketProvider(String url) {
    _channel = IOWebSocketChannel.connect(url);
  }

  WebSocketChannel get channel => _channel;

  void sendMessage(String message) {
    _channel.sink.add(message);
  }

  @override
  void dispose() {
    _channel.sink.close();
    super.dispose();
  }
}

위 코드는 WebSocketProvider 클래스를 정의하고, 웹소켓 연결을 설정하고 관리하는 방법을 보여줍니다.

3. 프로바이더 사용

프로바이더를 사용하여 웹소켓 연결을 관리하고 사용하는 방법은 다음과 같습니다.

class MyWebSocketScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final webSocket = Provider.of<WebSocketProvider>(context);

    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            webSocket.sendMessage('Hello, WebSocket!');
          },
          child: Text('Send Message'),
        ),
      ),
    );
  }
}

위 코드에서는 Provider.of<WebSocketProvider>(context)를 사용하여 웹소켓 프로바이더를 가져온 다음, 해당 프로바이더를 사용하여 웹소켓 메시지를 전송하는 예제를 보여줍니다.

웹소켓과 프로바이더를 효과적으로 활용하여 플러터 애플리케이션에서 실시간 통신을 구현할 수 있습니다.

이상으로 웹소켓 통신을 위한 프로바이더의 활용 방법을 살펴보았습니다. 감사합니다.

참고 문헌: