Flutter 및 Python 웹 소켓 Ft. 소켓-IO(3부)
지난 튜토리얼에서는 먼저 플라스크로 소켓 IO 서버를 만드는 방법에 대해 배웠고 로컬 MySQL 데이터베이스를 서버에 연결했습니다.
이제 이 세션에서는 실시간 채팅 애플리케이션을 만들기 위해 flutter를 사용할 것입니다.
그래서 시간을 들이지 않고.
Lets Begin
socket_io_client: ^2.0.0
shared_preferences: ^2.0.15
socket_io_client :패키지는 소켓을 사용하여 Flutter 응용 프로그램을 Python 서버에 연결하는 데 사용됩니다.
shared_preferences : 영구 인증을 위해 roomId 및 사용자 이름을 로컬로 저장하는 데 사용됩니다.


Raw File
why do we Exports dart files into one and how we do it?
참고: 무시하는 오류가 많이 발생합니다.
다음 코드 줄을 추가합니다.

Raw File
"stream_socket.dart"라는 새 파일을

Raw File

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()));
따라서 "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 위젯에 전달됩니다.



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
});
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 부:
계속 지켜봐....
Follow me:
Reference
이 문제에 관하여(Flutter 및 Python 웹 소켓 Ft. 소켓-IO(3부)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/djsmk123/flutter-python-web-socket-ft-socket-io-part-3-4fic텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)