👨‍💻 [Flutter] Flutter 에서 socket_io_client 활용 방법은 어떻게 되나요?

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

Flutter 에서 socket_io_client 활용 방법은 어떻게 되는지 간략히 알아보았습니다.

---

질문 >

Flutter 에서 socket_io_client 활용 방법은 어떻게 되나요?

답변 >

Flutter에서 **socket_io_client**는 Socket.IO 프로토콜을 사용하여 실시간 양방향 통신을 구현할 때 사용하는 라이브러리입니다. 이 라이브러리는 클라이언트와 서버 간의 실시간 데이터 전송을 간편하게 처리할 수 있습니다. 주로 채팅 애플리케이션, 실시간 데이터 스트리밍, 알림 시스템 등에 활용됩니다.

---

1. socket_io_client 설치

Flutter 프로젝트에서 **socket_io_client**를 사용하려면 먼저 의존성을 추가해야 합니다.

pubspec.yaml에 의존성 추가:

dependencies:
  flutter:
    sdk: flutter
  socket_io_client: ^2.0.0

의존성 설치:

flutter pub get

---

2. 서버 설정 확인

• *socket_io_client*는 Socket.IO 서버와 통신하므로, 서버가 Socket.IO 프로토콜을 지원해야 합니다. 일반적으로 Node.js를 사용하여 다음과 같은 방식으로 설정합니다:

Node.js 예제 서버 코드:

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('New client connected:', socket.id);

  socket.on('message', (data) => {
    console.log('Message from client:', data);
    socket.emit('message', `Hello, you said: ${data}`);
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

• 서버 실행: Node.js 서버를 실행하여 Flutter 클라이언트와 연결합니다.

node server.js

---

3. Flutter 클라이언트 코드

Flutter에서 **socket_io_client**를 사용하여 서버와 연결하고 데이터를 송수신합니다.

Socket.IO 클라이언트 예제:

import 'package:flutter/material.dart';
import 'package:socket_io_client/socket_io_client.dart' as IO;

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

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

class SocketIOExample extends StatefulWidget {
  @override
  _SocketIOExampleState createState() => _SocketIOExampleState();
}

class _SocketIOExampleState extends State<SocketIOExample> {
  late IO.Socket socket;
  String message = 'No message received';

  @override
  void initState() {
    super.initState();
    initializeSocket();
  }

  void initializeSocket() {
    // 서버와 연결
    socket = IO.io(
      '<http://localhost:3000>', // 서버 URL
      IO.OptionBuilder()
          .setTransports(['websocket']) // 전송 방식: WebSocket
          .disableAutoConnect() // 수동 연결 설정
          .build(),
    );

    // 연결 이벤트 핸들링
    socket.onConnect((_) {
      print('Connected to server');
      socket.emit('message', 'Hello from Flutter!');
    });

    // 메시지 수신 이벤트
    socket.on('message', (data) {
      print('Message from server: $data');
      setState(() {
        message = data;
      });
    });

    // 연결 끊김 이벤트
    socket.onDisconnect((_) => print('Disconnected from server'));

    // 연결 시도
    socket.connect();
  }

  @override
  void dispose() {
    // 리소스 해제
    socket.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Socket.IO Example'),
      ),
      body: Center(
        child: Text(message),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 버튼 클릭 시 서버로 메시지 전송
          socket.emit('message', 'Hello again!');
        },
        child: Icon(Icons.send),
      ),
    );
  }
}

---

4. 주요 코드 설명

• Socket 초기화:
  • IO.io를 사용하여 서버 URL과 옵션을 설정하고 Socket.IO 서버와 연결을 초기화합니다.

socket = IO.io(
  '<http://localhost:3000>',
  IO.OptionBuilder()
      .setTransports(['websocket']) // WebSocket을 전송 방식으로 설정
      .disableAutoConnect() // 연결을 수동으로 시작
      .build(),
);

• 서버 연결 이벤트:
  • socket.onConnect를 사용하여 서버 연결 성공 시 동작을 정의합니다.

socket.onConnect((_) {
  print('Connected to server');
});

• 서버 메시지 수신:
  • socket.on으로 특정 이벤트(message)의 데이터를 처리합니다.

socket.on('message', (data) {
  print('Message from server: $data');
});

• 메시지 송신:
  • socket.emit을 사용하여 서버로 데이터를 전송합니다.

socket.emit('message', 'Hello from Flutter!');

• 연결 종료:
  • socket.onDisconnect로 연결 종료 시 동작을 정의합니다.

socket.onDisconnect((_) => print('Disconnected from server'));

• 리소스 정리:
  • dispose 메서드에서 socket.dispose를 호출하여 리소스를 해제합니다.

---

5. 실행 과정

1. Node.js 서버를 실행합니다.
2. Flutter 애플리케이션을 실행하여 클라이언트와 서버를 연결합니다.
3. Flutter 앱에서 메시지를 보내거나, 서버에서 메시지를 수신합니다.

---

6. socket_io_client의 주요 활용 사례

1. 실시간 채팅:
   • 클라이언트 간 메시지 송수신.
2. 실시간 알림:
   • 이벤트 발생 시 즉각적으로 사용자에게 알림 전달.
3. 데이터 스트리밍:
   • 실시간 데이터(예: 주식 가격, 센서 데이터 등)를 클라이언트로 전송.
4. 멀티플레이어 게임:
   • 사용자 간의 상태 및 동작 동기화.

---

7. 주의 사항

• CORS 문제:
  • 서버와 클라이언트가 다른 도메인에 있을 경우, CORS 설정을 추가해야 합니다.
• 보안:
  • HTTPS와 WebSocket 보안 프로토콜(WSS)을 사용하여 데이터를 보호하세요.
• 에러 처리:
  • 연결 실패나 네트워크 장애에 대한 에러 처리를 추가해야 합니다.

---

결론

socket_io_client는 Flutter에서 실시간 통신을 구현하기 위한 강력한 도구입니다. 간단한 설정과 이벤트 기반 구조 덕분에 다양한 애플리케이션에서 활용 가능하며, 특히 채팅, 알림, 데이터 스트리밍과 같은 실시간 애플리케이션 개발에 적합합니다.

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---