[ThaoNT] Real chat with Firebase

Thứ 6, ngày 27/1/2017

[ThaoNT] Chat box bằng Firebase và Angularjs

Được viết bởi Thạo vào lúc 27/1/2017 nằm trong chuyên mục Code vì food

Heyo! I'm Thạo, Nice to meat you :#)

Trò chuyện linh tinh

Nhân dịp ngày cuối năm, mình lau bàn phím bằng 1 bài hướng dẫn làm 1 chat box bằng [Firebase]() và [Angularjs](). Trước tiên là các bạn kéo xuống cuối trang, đó, có chỗ "Trò chuyện linh tinh" ấy. Mình thích dùng Github để viết bài vì làm demo trực tiếp được luôn như thế này, mặc dù có hạn chế nhưng còn hơn chụp ảnh rồi chèn vào bài viết =))) ### Firebase Trên Viblo có nhiều bài viết rồi, các bạn có thể tìm đọc và tìm hiểu thêm tại đây [Firebase](https://firebase.google.com/?hl=vi) - Các bạn tạo 1 project trên [đây](https://console.firebase.google.com/?hl=vi) - Vào app, sửa cài đặt Rules của Database thành public để có thể đọc/ghi từ nhiều người khác nhau mà không cần auth ``` { "rules": { ".read": true, ".write": true } } ``` - Tiếp theo là vào Over View của project vừa tạo, chọn `Add Firebase to your web app`, rồi nhớ cái đoạn này là được `authDomain: "chat28-ce578.firebaseapp.com"` - Rồi, xong phần DB. ### Angularjs Cái này thì quá nhiều bài rồi, khỏi hướng dẫn, với cả project này dùng cái cơ bản nhất của Angularjs nên không phải lo :D Ở đây mình dùng [AngularFire](https://github.com/firebase/angularfire) để làm việc với Firebase đơn giản hơn. ### Bắt tay vào làm - Tạo file html ```html <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script> </head> </html> ``` - Tạo app ```javascript var app = angular.module('app', ['firebase']); ``` - Tạo controller, chúng ta dùng cái domain lúc nãy để connect tới Firebase và lấy dữ liệu, đơn giản vl :D ```javascript app.controller('chatCtrl', ['$scope', '$firebase', function($scope, $firebase) { var ref = new Firebase("https://chat28-ce578.firebaseio.com/"); var sync = $firebase(ref); $scope.chatMessages = sync.$asArray(); }]); ``` - Hàm gửi message, cái này còn đơn giản hơn. ```javascript $scope.sendChat = function() { var currentdate = new Date(); var datetime = currentdate.getDate() + "/" + (currentdate.getMonth() + 1) + "/" + currentdate.getFullYear() + " @ " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(); var chatMessage = { name: $scope.name, message: $scope.chatMes, datetime: datetime }; $scope.chatMessages.$add(chatMessage); $scope.chatMes = ""; } ``` - Giờ thì gắn vào html ```html <div id="live-chat" ng-app="app"> <div class="chat" ng-controller="chatCtrl"> <div class="chat-history"> <div ng-repeat="chatMessage in chatMessages"> <div class="chat-message clearfix"> <img src="avatar.jpg" alt="" width="32" height="32"> <div class="chat-message-content clearfix"> <span class="chat-time">{{chatMessage.datetime}}</span> <h5>{{chatMessage.name}}</h5> <p>{{chatMessage.message}}</p> </div> </div> <hr> </div> </div> <form> <fieldset> <input type="text" placeholder="Điền tên" ng-model="name"> <input type="text" placeholder="Lời muốn nói…" autofocus ng-model="chatMes"> <button type="submit" ng-click="sendChat()">Gửi</button> </fieldset> </form> </div> </div> ``` ### Hoàn thành ![aa](https://viblo.asia/uploads/5cd728e2-4b6d-4812-9651-1b8d34560f5d.png) - Về cơ bản thì app chat box real time này của chúng ta đã hoàn thành, dùng được rồi - Lên google gõ "chat box template" để tìm cho nó 1 bộ giao diện đẹp mắt, phù hợp với mục đích của chat box - Nếu như chỉ dùng code như trên thì vẫn còn vài thứ mắc phải, đó là list tin nhắn đã có sẽ bị đẩy lên tận cùng, túc là chúng ta sẽ thấy tin nhắn đầu tiên chứ không phải cuối cùng =)) - Cần thêm vài cái validate cho input tên, message, và thêm 1 cái random avatar nữa - Tất cả đã được mình sửa và thêm vào, các bạn dùng thử và view source code để biết thêm chi tiết. - Link tới [Viblo](https://viblo.asia/thaont/posts/wgrGVxMXKVa)

Nguyễn Thế Thạo

Menu

Thứ 6, ngày 27/1/2017

[ThaoNT] Chat box bằng Firebase và Angularjs

Lưu trữ

Vài thứ hay hay

Chắc là nhiều người muốn xem?

Trò chuyện linh tinh

{{chatMessage.name}}