Flutter의 웹소켓(WebSocket) 사용법

WebSocket은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. Flutter 애플리케이션에서 WebSocket을 사용하면 실시간 채팅, 실시간 데이터 스트리밍 등의 기능을 구현할 수 있습니다. 이번 글에서는 Flutter에서 WebSocket을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. WebSocket 패키지 설치

Flutter 애플리케이션에서 WebSocket을 사용하기 위해 web_socket_channel 패키지를 사용합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.1.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. WebSocket 서버 설정

실제 애플리케이션에서는 WebSocket 서버가 필요합니다. 여기서는 간단한 WebSocket 서버를 Node.js를 사용하여 설정해보겠습니다.

먼저, Node.js와 ws 패키지를 설치합니다.

 

npm install ws

 

그리고 다음과 같이 간단한 WebSocket 서버를 설정합니다.

 

// server.js
const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', ws => {
  ws.on('message', message => {
    console.log(`Received: ${message}`);
    ws.send(`Echo: ${message}`);
  });

  ws.send('Welcome to the WebSocket server!');
});

console.log('WebSocket server is running on ws://localhost:8080');

 

위 코드는 포트 8080에서 WebSocket 서버를 실행하고, 클라이언트에서 메시지를 받으면 이를 다시 클라이언트로 전송하는 간단한 에코 서버입니다.

3. Flutter에서 WebSocket 클라이언트 구현

이제 Flutter 애플리케이션에서 WebSocket 클라이언트를 구현하여 서버와 통신해보겠습니다.

 

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebSocketExample(),
    );
  }
}

class WebSocketExample extends StatefulWidget {
  @override
  _WebSocketExampleState createState() => _WebSocketExampleState();
}

class _WebSocketExampleState extends State<WebSocketExample> {
  final TextEditingController _controller = TextEditingController();
  final WebSocketChannel channel = WebSocketChannel.connect(
    Uri.parse('ws://localhost:8080'),
  );
  String _message = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: <Widget>[
            Form(
              child: TextFormField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Send a message'),
              ),
            ),
            SizedBox(height: 24),
            StreamBuilder(
              stream: channel.stream,
              builder: (context, snapshot) {
                if (snapshot.hasError) {
                  _message = 'Error: ${snapshot.error}';
                } else if (snapshot.hasData) {
                  _message = 'Received: ${snapshot.data}';
                }
                return Text(_message);
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ),
    );
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      channel.sink.add(_controller.text);
    }
  }

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

 

위 코드는 WebSocket 클라이언트를 사용하여 서버에 메시지를 보내고, 서버로부터 받은 메시지를 화면에 표시하는 예제입니다. WebSocketChannel.connect 메서드를 사용하여 WebSocket 서버에 연결하고, channel.sink.add 메서드를 사용하여 메시지를 전송합니다. 또한 StreamBuilder 위젯을 사용하여 서버로부터 받은 메시지를 실시간으로 화면에 표시합니다.

 

반응형

 

 

4. 실시간 채팅 애플리케이션 구현

이제 위의 예제를 확장하여 간단한 실시간 채팅 애플리케이션을 구현해보겠습니다.

 

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  final WebSocketChannel channel = WebSocketChannel.connect(
    Uri.parse('ws://localhost:8080'),
  );
  final List<String> _messages = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Application'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemCount: _messages.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_messages[index]),
                  );
                },
              ),
            ),
            Form(
              child: TextFormField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Send a message'),
              ),
            ),
            SizedBox(height: 24),
            StreamBuilder(
              stream: channel.stream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  _messages.add(snapshot.data as String);
                }
                return Container();
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ),
    );
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      channel.sink.add(_controller.text);
      _controller.clear();
    }
  }

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

 

위 코드는 실시간 채팅 애플리케이션을 구현한 예제입니다. 사용자가 입력한 메시지를 서버에 전송하고, 서버로부터 받은 메시지를 리스트에 추가하여 화면에 표시합니다. ListView.builder 위젯을 사용하여 메시지 리스트를 동적으로 렌더링합니다.

결론

Flutter 애플리케이션에서 WebSocket을 사용하면 클라이언트와 서버 간의 양방향 실시간 통신이 가능합니다. web_socket_channel 패키지를 사용하여 WebSocket 서버와 통신하는 방법, 데이터를 주고받는 방법을 통해 WebSocket 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 WebSocket을 효율적으로 사용해보세요. WebSocket을 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.