[Flutter] WebSoket을 사용해 보자

해당 글은 socket.io WebSoket을 통한 채팅 구현을 설명하고 있습니다.

패키지 가져오기

---

Flutter에서 소켓 통신을 위해 사용되는 대표적인 패키지인 socket.io-client을 pubspec.yaml 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  socket_io_client: ^x.x.x  # x.x.x는 패키지 버전입니다.

패키지를 추가한 후 flutter pub get 명령을 실행하여 패키지를 가져옵니다.

소켓 연결 설정

---

소켓 연결을 설정하려면 소켓 서버의 주소를 지정해야 합니다. 아래와 같이 소켓 연결을 설정합니다.

// 기본 dart.io에서도 Socket Class가 존재하기에 as를 사용하여 구분해 줍니다.
// import 'package:socket_io_client/socket_io_client.dart' as IO;

final IO.Socket socket = IO.io('ex) https://test/sokect',
      IO.OptionBuilder()
          .setTransports(['websocket']) 
          .build());

• 클라이언트가 웹소켓 프로토콜을 사용하여 서버와 실시간 통신을 진행할 수 있도록 .setTransports(['websocket']) 설정을 적용합니다.
• 서버에 따라 토큰 미적용 시 에러가 발생할 수 있으므로 필요에 따라 setExtraHeaders 을 통해 토큰을 적용해 줍니다.

소켓 이벤트 처리

---

소켓 연결 후에는 서버로부터 메시지를 수신하고 메시지를 보낼 수 있어야 합니다.

간단하게 다음과 같이 소켓 이벤트를 처리할 수 있습니다.

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


class _ChatAppState extends State<ChatApp> {
final IO.Socket socket = IO.io('ex) https://test/sokect',
      IO.OptionBuilder()
          .setTransports(['websocket']) 
          .build());

List<String> messages = []; // 메시지 목록을 저장할 리스트

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Chat will go here'),
      ),
    );
  }

  void sokectEventSetting(){
    socket.onConnect((_) {
      print('Connected to server');
    });
    socket.onDisconnect((_) {
      print('Disconnected from server');
    });
    socket.onError((error) {
      print('Error: $error');
      // 에러를 감지하고 그에 따라 핸들링을 추가합니다.
    });

    socket.connect();
    socket.on('message', (data) {
      print('Received message: $data');
      // 메세지를 감지하고 UI에 표시하거나 처리합니다.
			setState(() {
			        messages.add(data);
      });
    });
  }

  void sendMessage(String message) {
    socket.emit('chatMessage', message);
    // 메시지를 서버로 보내는 코드입니다.
  }
}

🚨 was not upgraded to websocket 에러가 발생한다면?

패키지 단에서 지속적으로 나타나고 있는 오류입니다.
필자의 경우 클라이언트 쪽 버전과 서버 쪽 버전이 일치하지 않아 일어나는 것으로 확인되어 버전을 조정하여 해결하였습니다.

아래 버전을 참고하여 패키지 버전 설정 후 혹여나 해당 방법으로도 해결이 되지 않는다면 👉 패키지 Github Issues 를 참고 바랍니다!

socket.io client	Socket.io 서버
v0.9.~v1.	v2.*
v2.*	v3.&v4.

UI 적용 예시

---

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: <Widget>[
        Expanded(
          child: ListView.builder(
            itemCount: messages.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(messages[index]),
              );
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            onSubmitted: (message) {
              sendMessage(message);
            },
            decoration: const InputDecoration(
              labelText: 'Enter your message',
            ),
          ),
        ),
      ],
    ),
  );
}