Chat box bằng Firebase và Angularjs
Bài đăng này đã không được cập nhật trong 2 năm
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 =))) (demo tại đây)
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
- Các bạn tạo 1 project trên đây
- 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à đượcauthDomain: "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 
Ở đây mình dùng AngularFire để làm việc với Firebase đơn giản hơn.
Bắt tay vào làm
- Tạo file 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
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
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.
$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
<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
- 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.
All rights reserved
