Flutter 및 Python 웹 소켓 Ft. 소켓-IO(3부)

다시 오신 것을 환영합니다.
지난 튜토리얼에서는 먼저 플라스크로 소켓 IO 서버를 만드는 방법에 대해 배웠고 로컬 MySQL 데이터베이스를 서버에 연결했습니다.

이제 이 세션에서는 실시간 채팅 애플리케이션을 만들기 위해 flutter를 사용할 것입니다.

그래서 시간을 들이지 않고.

Lets Begin

새 프로젝트를 만듭니다.

pubspec.yaml 파일에 다음 종속성을 추가합니다.

socket_io_client: ^2.0.0
shared_preferences: ^2.0.15

socket_io_client :패키지는 소켓을 사용하여 Flutter 응용 프로그램을 Python 서버에 연결하는 데 사용됩니다.

shared_preferences : 영구 인증을 위해 roomId 및 사용자 이름을 로컬로 저장하는 데 사용됩니다.

다음 파일 구조를 따르겠습니다.

imports.dart라는 새 파일을 만들고 다음 줄을 추가합니다.

Raw File

why do we Exports dart files into one and how we do it?

참고: 무시하는 오류가 많이 발생합니다.

웹 및 모바일용 URL을 추가할 constant.dart라는 새 파일을 다시 만듭니다.

다음 코드 줄을 추가합니다.



Raw File

이제 데이터베이스의 변경 사항을 수신하기 위한 스트림 컨트롤러가 필요합니다.
"stream_socket.dart"라는 새 파일을

로 만들 수 있습니다.



Raw File

이제 main.dart에서 다음 코드 줄을 바꿉니다.

Raw File

void initState() 함수에서 무슨 일이 일어나는지 이해합시다.

SharedPreferences 라이브러리를 사용하여 로컬 저장소의 room_id 및 사용자 이름을 가져오기 위해 init() 함수를 호출하고 있습니다.

사용자 이름과 방 ID가 로컬 데이터베이스에 있으면 사용자는 ChatScreen으로 이동하고 그렇지 않으면 LoginScreen으로 이동합니다.

다음 줄이 이어집니다.

isLoading?const Scaffold(body: Center(child: CircularProgressIndicator(),)):(username!=null && roomId!=null?ChatPage(username: username!, roomId: roomId!):const LogInScreen()));

이제 로그인 화면 UI를 복사하여 붙여넣기만 하면 됩니다.

따라서 "screens"라는 lib 폴더에 새 폴더를 만들고 그 안에 "login_screen.dart"라는 새 파일을 만듭니다.







Raw File

"채팅 시작"버튼을 누르면 "공유 기본 설정"을 사용하여 user_name 및 room_id를 로컬 저장소에 저장하고 사용자는 다음으로 이동합니다.
"채팅화면".

 onTap: () async {
                  final prefs = await SharedPreferences.getInstance();
                  prefs.setString('roomId', roomId!);
                  prefs.setString('username', username!);
                  Navigator.pop(context);
                  Navigator.push(context, MaterialPageRoute(builder: (builder)=>ChatPage(username: username!, roomId: roomId!)));
                },

참고: Room_id 및 user_name도 ChatScreen Stateful 위젯에 전달됩니다.

chat_screen과 동일합니다. "chat_screen.dart"라는 동일한 폴더의 새 파일에 다음 코드 줄을 복사하여 붙여넣은 다음 Flutter에서 작동하는 함수를 내보내는 방법에 대해 설명합니다.

Raw File

채팅 화면의 각 부분을 분해하자

void initState() 함수에서 우리는 서버에 연결하고 있습니다.

 socket.onConnect((_) {
        // it firing 'join' event so that server can listen the request.
        socket.emit('join', {
          'username':username,
          'roomId':roomId,
        },
        );

      });

또한 void dispose()에서 스트림 컨트롤러를 폐기합니다.

stream-builder 메시지 수신 및 UI 업데이트를 지속적으로 진행하고 있습니다.

이제 새 메시지를 보내는 방법에 대해 이야기하겠습니다.

// we are firing 'text' event and requesting to the server.
socket.emit('text',{'msg':sentMsg,
                              'room':widget.roomId,
                              'username':widget.username
                            });

'left' 이벤트를 사용하여 방을 나갑니다.

 socket.emit('left',{
                        'username':widget.username,
                        'room':widget.roomId,
                      });

마지막으로 기본 설정을 지웁니다.

Finally Outputs

Our Series of Socket-IO of 3 parts has ended with this.
I hope you liked it.

파트 1과 파트 2를 놓친 경우 여기를 읽으십시오.

1 부:

2 부:

계속 지켜봐....

Source Code Backend

Source Code Client Application

Follow me:

GitHub