HƯỚNG dẫn IMPLEMENT TÍNH NĂNG CHAT TRONG ANGULAR 4 VS NODEJS VS SOCKET

HƯỚNG DẪN IMPLEMENT TÍNH NĂNG CHAT TRONG ANGULAR VS NODEJS VS SOCKET.IO Tổng quan Hệ thống sử dụng Socket.IO để thực chat realtime khách spa, Socket.IO cung cấp cho tính quan trọng là: Client theo dõi “Room”, có tin nhắn gởi vào room client theo dõi thông báo (kèm tin nhắn mới), client thực hành động là: add đoạn tin nhắn vào đoạn chat client - Ý tưởng implement chat o Mình có room tên queue, CMS theo dõi queue đó, Khi người dùng gửi tin nhắn mới, server báo room queue có người nhắn tin, kèm theo chat room người đó(bao gồm: thông tin người gửi tin nhắn cuối người gửi), dựa vào mà trang CMS cập nhật danh sách người chat realtime o Trong CMS nhấn vào user để chat, CMS theo dõi gửi tin nhắn theo room user => CMS nhận gửi tin nhắn real time o Kết luận: CMS thời điểm theo dõi tối đa room là: queue để cập nhật danh sách room user chat - Mô hình senquence Server: - Giải thích code đơn giản Socket.IO server io.on('connection', function(socket){ // Khi user kết nối với server thông qua socket hàm đc gọi console.log(" go online"); socket.on(“chat message”, function(msg){ //Khi user kết nối mà gửi tới pool chat message hàm gọi // Xử lí tin nhắn io.emit('room-id', msg); // Khi xử lý tin nhắn xác đinh đích đến, Socket.IO broadcast tin nhắn cho room tương ứng }); }); CMS: Môi trường setup Socket.IO cho CMS - File js socket lấy https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js add file index.html - Khai báo: declare var io : any; - Nó tự hiểu thèn thèn socket.io Trong class o Khai báo biến  socket: any;  url = "https://spaapis.herokuapp.com"; o Hàm constructor: constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) { let that = this; this.socket = io(this.url); //Khai báo đối tượng Socket.IO this.socket.on("queue", (room) => { // Listen Room Queue // Khi server thông báo có người nhắn tin => Cập nhật lại danh sách chat that.rooms.forEach(function(v,i){ if(v._id == room._id) that.rooms.splice(i,1); }); that.rooms.unshift(room); }); } o Hàm Init ngOnInit(){ // Khi vào trang Tư vấn //Lấy danh sách chat local let that = this this.http.get(this.url + '/api/chatrooms') map( (res)=> res.json()) subscribe(data => { that.rooms = data; console.log(data); }, error => { console.log("error"); }); } o Khi click vào user để chat: userClick(room){ //Lấy chatroom user this.curRoom = room; let that = this //Lấy danh sách tin nhắn user this.http.get(this.url + '/api/messages/' + room._id + '?top=' + 10 +'&skip=' + 0) map( (res)=> res.json()) subscribe(data => { that.messages = data; this.goToBottom(); }, error => { console.log("error"); }); // Theo dõi chat room user this.socket.on(room._id, (msg) => { // Khi chat room có tin nhắn cập nhật lại danh sách that.messages.push(msg); this.goToBottom(); }); } o Khi gửi tin nhắn cho user sendMessage(){ if(!this.curRoom) return; this.newmessage.Content = "Nội dung tin nhắn"; this.newmessage.SenderId = "Mã nhân viên NV001"; this.newmessage.IsImage = false; // Nếu hình content link hình this.socket.emit("chat message", {// Gửi tn đến pool chat message server Message: this.newmessage, ChatRoomId: this.curRoom._id, Name: this.curRoom.Name }); this.newmessage.Content = ""; //empty this.goToBottom(); } ... thích code đơn giản Socket. IO server io.on('connection', function (socket) { // Khi user kết nối với server thông qua socket hàm đc gọi console.log(" go online"); socket. on( chat message”, function(msg){... trường setup Socket. IO cho CMS - File js socket lấy https://cdnjs.cloudflare.com/ajax/libs /socket. io/2.0.3 /socket. io.js add file index.html - Khai báo: declare... this; this .socket = io(this.url); //Khai báo đối tượng Socket. IO this .socket. on("queue", (room) => { // Listen Room Queue // Khi server thông báo có người nhắn tin => Cập nhật lại danh sách chat that.rooms.forEach(function(v,i){