Realtime Database(Fluter+VanillaJS)로 채팅 메모 작성

개시하다
채팅 앱을 만들 때, 소켓.IO 등지에서 자주 직접 실시했는데 이번에 Realtime Database를 사용해서 실시해 봤는데 바로 그 비망록입니다.프레임은 이번에 플루터를 사용했지만 PWA(Progressive Web Apps)가 제작할 때도 서로 데이터를 교환할 수 있어 편리하다.이번에는 앱과 웹 쪽에서 바닐라 JS를 통해 콜을 할 필요가 있기 때문에 각자의 호출을 적어야 한다.
제한 사항
(가격)
https://firebase.google.com/pricing/?hl=ja
RealTimeDatabase는 무상으로 연결=100, 용량=1GB, 전송량=10GB가 최대입니다.
유료로 이전하는 경우에도 용량은 =$5/GB, 전송량은 =$1/GB
실시간 물건은 필요 없고 파이어스토어에 도망가야 할 수도 있어요.
이렇게 말하면Firestore의 경우 쓰기=0.18/10만 달러/읽기=0.06/10만 달러/삭제=0.02/10만 달러로 Recress의 수량에 따라 금액이 상승하기 때문에 쓰기가 빈번한지 데이터의 용량이 큰지 판단이 필요할 것 같다.
(Node-red 등 사용, Socket.io 등으로 설치, monogoDB 등으로 스토어 등 진행
금액을 감안하면 다른 선택이 있을 수 있지만 우리는 추산하지 않았다.)
전제 조건
FirebaseSDK의 import까지 종료된 상태
이루어지다
Flutter(App)
Firebase의 RealtimeDatabase 구상은 다음과 같습니다.

우선 앱의 데이터 발송 부분이다.gid는 이 경우 9TrzkKitHwHcO0x350jl의 그룹 ID를 나타냅니다.
예를 들어 채팅방 ID 등의 식별자로 사용한다.이번에 아래에서 메시지 디렉터리를 파서 데이터 (push) 구조를 추가했습니다.
Firebase 참조에 새 서브를 추가하면 push () 방법은 매번 유일한 ID를 생성하고 시간순으로 배열합니다.
sendMsg.dart

  void sendData(String text) {
    Map data;
    data = {"name": "user1", "message":"hello"};
    database.reference().child(widget.gid + '/messages').push().set(data);
  }

다음은 데이터 획득 부분입니다.Realtime Database의 경우 추가, 업데이트, 삭제 시
자동으로 그리려면 FirebaseAnimatedList를 사용합니다.이렇게 하면 이른바 채팅 행위다.
getList.dart

Expanded(
    child: FirebaseAnimatedList(
        query: database.reference().child(widget.gid + '/messages'),
        itemBuilder: (_, DataSnapshot snapshot,
            Animation<double> animation, int index) {
          data = snapshot.value;
          return message(data['name'], data['message']);
        })),

VanillaJS(Web)
JavaScript의 경우 다음과 같이 send를 수행합니다.
sendMsg.js

var database = firebase.database().ref(_gid).child('messages');
database.push({
    name: 'user2',
    message: 'hello'
});

getList.js

var database = firebase.database().ref(_gid).child('messages');
database.on('child_added', function (snapshot) {
    var msg = snapshot.val();
    $("#message_list").prepend(formatHtml(msg.name,msg.message));
});

끝맺다