Flutter와 Node.js로 실시간 채팅 앱을 만드는 방법

Flutter와 Node.js로 실시간 채팅 앱을 만드는 방법

 

Flutter 프론트엔드가 Node.js 백엔드를 만나다

이 블로그에서는 Node.js를 백엔드로, Flutter를 프론트엔드로 사용하여 실시간 채팅 앱을 만드는 방법을 살펴보겠습니다. 소켓을 사용하여 장치 간에 통신합니다.

Node.js(서버 측)

라는 이름의 새 프로젝트를 생성해 보겠습니다. chat_server 터미널에서 작업하십시오. 이제 다음 명령을 실행하여 프로젝트를 시작합니다.

touch index.js && npm init && npm install ws && npm install express

이렇게 하면 프로젝트가 완전히 설치됩니다. 완료되면 즐겨찾는 IDE에서 프로젝트를 열고 index.js 파일.

이것은 지금은 별로 하지 않는 기본 Websocket 서버입니다. 이제 변경해 보겠습니다.

이렇게 하면 메시지가 완전히 실행됩니다! 이제 이것이 완료되었으므로 이제 Flutter 채팅 앱으로 시작할 수 있습니다.

Flutter(클라이언트 측)

이제 Flutter에서 채팅 앱으로 시작할 수 있도록 백엔드를 완료했습니다. 다음 명령을 실행하여 새 Flutter 프로젝트를 시작하세요.

flutter create chat_app && cd chat_app && flutter run

IDE에서 이 프로젝트를 열고 pubspec.yaml 파일을 추가하고 web_socket_channel 다음과 같은지 확인하십시오.

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
web_socket_channel: ^2.1.0 # Add this.
sqflite: ^2.0.2 # And this.

프로젝트를 시작하려면 모든 항목을 삭제하십시오. lib/main.dart 다음을 삽입해야 합니다.

이제 라는 새 파일도 만들어 보겠습니다. messages.dart 메시지를 저장할 위치입니다. 메시지를 로컬에 저장할 것이기 때문에 먼저 이를 위한 함수를 생성할 것입니다.

코드가 많죠? 이 함수가 하는 일은 데이터베이스의 모든 메시지를 검색하는 것입니다. 그런 다음 메시지가 사용자가 보냈거나 수신했는지 확인합니다.

그것이 완료되면 마지막으로 메시지를 표시합니다. 이제 우리는 다른 함수를 만들 것입니다 messages.dart 그것은 우리 서버에 메시지를 보내고 우리 데이터베이스에 새 메시지를 삽입할 것입니다.

이 함수는 우리가 보낼 메시지를 저장할 것입니다. 이 작업이 완료되었으므로 이제 이러한 메시지를 표시하는 페이지를 만듭니다.

이 페이지를 호출하겠습니다. chat_page.dart 처음에는 이렇게 보일 것입니다.

이제 메시지를 수신하기 위해 이에 대한 함수를 만들고 싶습니다. 우리는 우리의 기능을 호출 할 것입니다 getMessage() 이것은 우리 자신을 서버에 연결하고 모든 메시지를 수신합니다. 메시지가 있는 경우 해당 메시지도 표시합니다.

이제 채팅 앱을 완전히 만들면 됩니다. 이제 두 개의 로컬 장치로 앱을 실행하여 작동하는지 확인하십시오. 작동하지 않는 경우 알려주시면 도와드리겠습니다. 읽어 주셔서 감사합니다.