Firebase에서 실시간 채팅 구축

19354 단어 FirebaseJavaScriptHTMLmBaaschat

최종 품목


이번에 웹 서비스를 이용하는 Firebase는 실시간 채팅을 시원하게 제작합니다.

Firebase란 무엇입니까?


Firebase는 채팅 등 단말기 동지의 교환이 실시간성을 가지려고 할 때 자주 사용하는 응용 프로그램의 백엔드 서비스다.
터미널과 서버 사이, 터미널 간의 데이터 동기화 등 백엔드에서 진행되는 처리는 API를 제공한다.

Firebase 등록


Firebase 사이트를 방문하여 회원 로그인을 합니다.
https://www.firebase.com/login/

애플리케이션 등록


로그인이 완료되면 여기서 새 응용 프로그램을 만듭니다.

APPNAME를 클릭하면 아래 페이지에 접속하여 데이터베이스의 내용을 보고 다양한 설정을 할 수 있습니다.

클라이언트 만들기


Firebase 라이브러리 가져오기

<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>

데이터베이스 연결


＜YOUR-FIREBASE-APP＞를 자신이 만든 응용 프로그램 이름 j로 변경합니다.
var myFirebaseRef = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/");

데이터 저장


데이터베이스에서push 함수를 사용하여 데이터를 저장합니다.
myFirebaseRef.child('messages').push({
  'message': 'こんにちは'
});

데이터 검색


데이터베이스에 어떤 데이터 변경이 발생하면 실시간으로 리셋 함수를 실행합니다.
myFirebaseRef.on('child_added', function(dataSnapshot) {
  //データベースに変更があった場合のコールバック処理
});

소스 코드

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="panel-default">
        <div class="panel-heading">
            <p>リアルタイムチャットサンプル</p>
        </div>
        <div id="scroller" class="panel-body">
            <ul id='messages'>
            </ul>
        </div>
        <div class="panel-footer">
            <input type='text' class="form-control" id="nameInput" placeholder="ユーザー名を入力してください">
        </div>
        <div class="panel-footer">
            <input type='text' class="form-control" id="messageInput" placeholder="メッセージ内容を入力してください">
        </div>
    </div>
</body>
    <script src="chat.js"></script>
</html>


ul,li{
    padding: 0;
    margin: 0;
    list-style-type: none;
    text-align: left;
}
#scroller {
    height: 500px;
    overflow: auto;
}

/*******************************
* 左からの吹き出し
********************************/
.left_balloon {
    position: relative;
    background: #f1f0f0;
    border: 0px solid #777;
    margin: 5px 10px;
    padding: 5px 10px;
    border-radius: 15px;
    width: 400px;
    clear: both;
}

/*******************************
* 右からの吹き出し
********************************/
.right_balloon {
    color: #fff;
    position: relative;
    background: #0084ff;
    border: 0px solid #777;
    margin: 5px 10px;
    padding: 5px 10px;
    border-radius: 15px;
    width: 400px;
    clear: both;
    float: right;
}

/*******************************
* 割り込みを解除
********************************/
.clear_balloon{
  clear: both;
}



.sender_name{
    margin-bottom: -5px;
    padding-left: 20px;
    color: rgba(0, 0, 0, .40);
}
.sender_name.me{
    float: right;
    padding: 0 20px 0 0;
}


// データベースと接続する
var messagesRef = new Firebase('https://qiita.firebaseio.com/');

var messageField = $('#messageInput');
var nameField = $('#nameInput');
var messageList = $('#messages');

// ENTERキーを押した時に発動する
messageField.keypress(function (e) {
    if (e.keyCode == 13) {
        //フォームに入力された情報
        var username = nameField.val();
        var message = messageField.val();

        //データベースに保存する
        messagesRef.push({name:username, text:message});
        messageField.val('');

        $('#scroller').scrollTop($('#messages').height());
    }
});

// データベースにデータが追加されたときに発動する
messagesRef.limitToLast(10).on('child_added', function (snapshot) {
    //取得したデータ
    var data = snapshot.val();
    var username = data.name || "anonymous";
    var message = data.text;

    //取得したデータの名前が自分の名前なら右側に吹き出しを出す
    if ( username == nameField.val() ) {

        var messageElement = $("<il><p class='sender_name me'>" + username + "</p><p class='right_balloon'>" + message + "</p><p class='clear_balloon'></p></il>");

    } else {

        var messageElement = $("<il><p class='sender_name'>" + username + "</p><p class='left_balloon'>" + message + "</p><p class='clear_balloon'></p></il>");

    }
    //HTMLに取得したデータを追加する
    messageList.append(messageElement)

    //一番下にスクロールする
    messageList[0].scrollTop = messageList[0].scrollHeight;
});
다음은 창설된 채팅입니다.
맨 오른쪽 대시보드에서 실시간으로 데이터가 추가된 것을 볼 수 있습니다.

마지막


이번에 가장 간단한 것을 만들었지만 서버 쪽 언어로 사용자 인증을 하는 것을 만들고 싶습니다.
만약 이 보도의 내용에 오류나 문제가 있다면, 나는 네가 평론을 발표할 수 있기를 바란다.
Firebase로 쓰레기 계획용 카드 서비스를 만들어 보세요.
지금 바로 Firebase에 필요한 최소한의 일을 시작하겠습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage