improve chat

This commit is contained in:
Peter Maquiran
2022-01-12 11:52:05 +01:00
parent b8b4ba6a05
commit 5552aa484b
13 changed files with 46 additions and 44 deletions
+6
View File
@@ -99,6 +99,12 @@ export class HomePage implements OnInit {
this.RocketChatClientService.send('fsMwcNdufWvdnChj7ya9nF9cX2HizxxWAM', 'Mensagem enviada programaticamente.'+ new Date().toISOString()) this.RocketChatClientService.send('fsMwcNdufWvdnChj7ya9nF9cX2HizxxWAM', 'Mensagem enviada programaticamente.'+ new Date().toISOString())
} }
this.RocketChatClientService.registerCallback({type:'Onmessage',requestId:'asdfasdfasdf',funx:(message)=>{
// console.log('message', message)
}})
// this.RocketChatClientService.send() // this.RocketChatClientService.send()
/* this.webNotificationPopupService.askNotificationPermission() */ /* this.webNotificationPopupService.askNotificationPermission() */
+2 -2
View File
@@ -45,7 +45,7 @@
<ion-list *ngSwitchCase="'Contactos'"> <ion-list *ngSwitchCase="'Contactos'">
<ion-item-sliding> <ion-item-sliding>
<div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin" <div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
*ngFor="let room of ChatServiceGPR.individual | keyvalue" *ngFor="let room of wsChatService.individual | keyvalue"
[class.item-active]="room.value.id == idSelected"> [class.item-active]="room.value.id == idSelected">
<div class="item-icon"> <div class="item-icon">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
@@ -86,7 +86,7 @@
</div> </div>
</div> </div>
</ion-item-sliding> </ion-item-sliding>
<ion-item-sliding *ngIf=" ChatServiceGPR.individualCount < 1"> <ion-item-sliding *ngIf=" wsChatService.individualCount < 1">
<div *ngFor="let n of numSequence(8); let i = index;" class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"> <div *ngFor="let n of numSequence(8); let i = index;" class="item item-hover width-100 d-flex ion-no-padding ion-no-margin">
<div class="item-icon"><ion-icon class="icon" slot="start" src="assets/icon/icons-chat-grey.svg"></ion-icon></div> <div class="item-icon"><ion-icon class="icon" slot="start" src="assets/icon/icons-chat-grey.svg"></ion-icon></div>
<div class="item-content flex-grow-1 cursor-pointer"> <div class="item-content flex-grow-1 cursor-pointer">
+2 -2
View File
@@ -12,7 +12,7 @@ import {
import { ModalController, Platform } from '@ionic/angular'; import { ModalController, Platform } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service'; import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service'; import { ChatService } from 'src/app/services/chat.service';
import { ChatService as ChatServiceGPR} from 'src/app/services/chat/chat.service' import { wsChatService as wsChatService} from 'src/app/services/chat/chat.service'
import { GroupMessagesPage } from './group-messages/group-messages.page'; import { GroupMessagesPage } from './group-messages/group-messages.page';
import { ContactsPage } from './messages/contacts/contacts.page'; import { ContactsPage } from './messages/contacts/contacts.page';
import { MessagesPage } from './messages/messages.page'; import { MessagesPage } from './messages/messages.page';
@@ -125,7 +125,7 @@ export class ChatPage implements OnInit {
private sqlservice: SqliteService, private sqlservice: SqliteService,
private platform: Platform, private platform: Platform,
private storageservice: StorageService, private storageservice: StorageService,
public ChatServiceGPR: ChatServiceGPR public wsChatService: wsChatService
) { ) {
@@ -49,7 +49,7 @@
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> --> </ion-refresher> -->
<div (click)="handleClick()" class="messages" #scrollMe> <div (click)="handleClick()" class="messages" #scrollMe>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of ChatServiceGPR.getRoom(this.roomId).massages; let last = last" <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of wsChatService.getRoom(this.roomId).massages; let last = last"
[class.messages-list-item-wrapper-active]="msg._id == selectedMsgId" > [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId" >
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)" *ngIf="msg.msg !=''"> <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)" *ngIf="msg.msg !=''">
<div class="title"> <div class="title">
+3 -5
View File
@@ -28,7 +28,7 @@ import { SqliteService } from 'src/app/services/sqlite.service';
import { elementAt } from 'rxjs-compat/operator/elementAt'; import { elementAt } from 'rxjs-compat/operator/elementAt';
import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page'; import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
import { ViewEventPage } from 'src/app/modals/view-event/view-event.page'; import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
import { ChatService as ChatServiceGPR} from 'src/app/services/chat/chat.service' import { wsChatService as wsChatService} from 'src/app/services/chat/chat.service'
const IMAGE_DIR = 'stored-images'; const IMAGE_DIR = 'stored-images';
@@ -96,7 +96,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
private changeDetectorRef: ChangeDetectorRef, private changeDetectorRef: ChangeDetectorRef,
private platform: Platform, private platform: Platform,
private sqlservice: SqliteService, private sqlservice: SqliteService,
public ChatServiceGPR: ChatServiceGPR public wsChatService: wsChatService
) { ) {
this.loggedUser = authService.ValidatedUserChat['data']; this.loggedUser = authService.ValidatedUserChat['data'];
this.roomId = this.navParams.get('roomId'); this.roomId = this.navParams.get('roomId');
@@ -108,7 +108,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
} }
}; };
this.ChatServiceGPR.getRoom(this.roomId).loadHistory() this.wsChatService.getRoom(this.roomId).loadHistory()
} }
@@ -335,8 +335,6 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
window.removeEventListener('scroll', this.scrollChangeCallback, true); window.removeEventListener('scroll', this.scrollChangeCallback, true);
} }
sendMessage() { sendMessage() {
let body = { let body = {
"message": "message":
+2
View File
@@ -39,6 +39,7 @@ export class AuthService {
console.log('login', SessionStore.user.RochetChatUser, SessionStore.user.Password) console.log('login', SessionStore.user.RochetChatUser, SessionStore.user.Password)
this.RocketChatClientService.connect(()=>{ this.RocketChatClientService.connect(()=>{
this.RocketChatClientService.login({ this.RocketChatClientService.login({
username: SessionStore.user.RochetChatUser, username: SessionStore.user.RochetChatUser,
password: SessionStore.user.Password password: SessionStore.user.Password
@@ -47,6 +48,7 @@ export class AuthService {
}).catch((message)=>{ }).catch((message)=>{
console.log('rocket chat login failed', message) console.log('rocket chat login failed', message)
}) })
}) })
} }
+5 -3
View File
@@ -7,7 +7,7 @@ import { SessionStore } from 'src/app/store/session.service';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class ChatService { export class wsChatService {
individual: {[key: string]: RoomService} = {} individual: {[key: string]: RoomService} = {}
@@ -23,17 +23,19 @@ export class ChatService {
) { ) {
(async()=>{ (async()=>{
await this.getAllRoom(); await this.getAllRooms();
this.subscribeToRoom() this.subscribeToRoom()
})() })()
} }
async getAllRoom () { async getAllRooms () {
this.loadingWholeList = true this.loadingWholeList = true
const rooms: any = await this.RocketChatClientService.getRooms(); const rooms: any = await this.RocketChatClientService.getRooms();
console.log(rooms)
rooms.result.update.forEach((roomData:any) => { rooms.result.update.forEach((roomData:any) => {
let room:RoomService; let room:RoomService;
+3
View File
@@ -31,4 +31,7 @@ export class MessageService {
showDateDuration() {} showDateDuration() {}
} }
+2 -3
View File
@@ -2,8 +2,6 @@ import { Injectable } from '@angular/core'
import { RocketChatClientService } from 'src/app/services/socket/rocket-chat-client.service'; import { RocketChatClientService } from 'src/app/services/socket/rocket-chat-client.service';
import { MessageService } from 'src/app/services/chat/message.service' import { MessageService } from 'src/app/services/chat/message.service'
import { ChatUserService } from 'src/app/services/chat/chat-user.service' import { ChatUserService } from 'src/app/services/chat/chat-user.service'
import { TimeService } from 'src/app/services/functions/time.service';
import { ChatService } from '../chat.service';
import { showDateDuration } from 'src/plugin/showDateDuration' import { showDateDuration } from 'src/plugin/showDateDuration'
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@@ -47,6 +45,7 @@ export class RoomService {
message.setData(Chatmessage.result) message.setData(Chatmessage.result)
this.massages.push(message) this.massages.push(message)
this.calDateDuration(Chatmessage.result._updatedAt) this.calDateDuration(Chatmessage.result._updatedAt)
} }
) )
} }
@@ -58,7 +57,7 @@ export class RoomService {
// runs onces only // runs onces only
loadHistory(limit= 100) { loadHistory(limit= 100) {
if(this.hasLoadHistory){ return false } if(this.hasLoadHistory){ return false}
this.RocketChatClientService.loadHistory(this.id, limit).then((message:any) => { this.RocketChatClientService.loadHistory(this.id, limit).then((message:any) => {
console.log('loadHistory', message) console.log('loadHistory', message)
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid'
import { wsCallbacksParams, msgQueue } from 'src/app/models/rochet-chat-cliente-service' import { wsCallbacksParams, msgQueue } from 'src/app/models/rochet-chat-cliente-service'
import { deepFind } from 'src/plugin/deep' import { deepFind } from 'src/plugin/deep'
import { environment } from 'src/environments/environment';
/** /**
* Use this class to interact with rocketChat realtime API * Use this class to interact with rocketChat realtime API
*/ */
@@ -10,17 +11,15 @@ import { deepFind } from 'src/plugin/deep'
}) })
export class RocketChatClientService { export class RocketChatClientService {
private hasPing = false
private firstPingFunx: Function private firstPingFunx: Function
isLogin = false; isLogin = false;
constructor() {} constructor() {}
connect(firstPingFunx: Function) { connect(firstPingFunx: Function) {
this.hasPing = false this.firstPingFunx = firstPingFunx //
this.firstPingFunx = firstPingFunx
this.ws.connect('wss://gabinetedigitalchat.dyndns.info/websocket'); this.ws.connect(environment.apiWsChatUrl);
const connectMessage = { const connectMessage = {
msg: "connect", msg: "connect",
@@ -29,19 +28,8 @@ import { deepFind } from 'src/plugin/deep'
} }
this.ws.send(connectMessage, 'connect', false) this.ws.send(connectMessage, 'connect', false)
this.ws.registerCallback({type:'Onmessage', funx:(message: any) => {
if(message.msg == "ping") {
this.ws.send({msg:"pong"},'recoonect', false) this.ws.send({msg:"pong"},'recoonect', false)
if(this.hasPing == false) {
// first ping
firstPingFunx() firstPingFunx()
this.hasPing = true
}
}
}})
} }
@@ -65,13 +53,12 @@ import { deepFind } from 'src/plugin/deep'
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.ws.registerCallback({type:'Onmessage', requestId, funx:(message)=>{ this.ws.registerCallback({type:'Onmessage', requestId, funx:(message)=>{
if(message.id == requestId || deepFind(message, 'result.id') == requestId) { // same request send if(message.id == requestId ) { // same request send
if(message.result.token) { if(message.result.token) {
this.isLogin = true this.isLogin = true
setTimeout(()=>{
this.ws.wsMsgQueue() this.ws.wsMsgQueue()
},0)
resolve(message) resolve(message)
} else { } else {
@@ -88,7 +75,7 @@ import { deepFind } from 'src/plugin/deep'
} }
getRooms() { getRooms(roomOlder = 1480377601) {
const requestId = uuidv4() const requestId = uuidv4()
@@ -281,6 +268,10 @@ import { deepFind } from 'src/plugin/deep'
} }
registerCallback(data:wsCallbacksParams) {
return this.ws.registerCallback(data)
}
// socket class ================================================================== // socket class ==================================================================
private socket!: WebSocket; private socket!: WebSocket;
private wsUrl = '' private wsUrl = ''
@@ -3,7 +3,7 @@
<div class="main-header"> <div class="main-header">
<div class="header-top"> <div class="header-top">
<div class="middle" *ngFor="let users of dmUsers"> <div class="middle" *ngFor="let users of dmUsers">
<ion-label class="title">{{users.name}}</ion-label> <ion-label class="title">{{ wsChatService.getRoom(roomId).name }}</ion-label>
<span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span> <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
</div> </div>
<div hidden class="right"> <div hidden class="right">
@@ -37,7 +37,7 @@
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
<div class="messages" #scrollMe> <div class="messages" #scrollMe>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of ChatServiceGPR.getRoom(roomId).massages; let last = last"> <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of wsChatService.getRoom(roomId).massages; let last = last">
<div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg !=''"> <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg !=''">
<div class="message-item-options d-flex justify-content-end"> <div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon> <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
@@ -19,7 +19,7 @@ import { ThemeService } from 'src/app/services/theme.service'
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page'; import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page'; import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
import { ViewEventPage } from 'src/app/modals/view-event/view-event.page'; import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
import { ChatService as ChatServiceGPR} from 'src/app/services/chat/chat.service' import { wsChatService as wsChatService} from 'src/app/services/chat/chat.service'
@Component({ @Component({
selector: 'app-messages', selector: 'app-messages',
@@ -78,13 +78,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
public ThemeService: ThemeService, public ThemeService: ThemeService,
private changeDetectorRef: ChangeDetectorRef, private changeDetectorRef: ChangeDetectorRef,
private router: Router, private router: Router,
public ChatServiceGPR: ChatServiceGPR public wsChatService: wsChatService
) { ) {
this.loggedUser = authService.ValidatedUserChat['data']; this.loggedUser = authService.ValidatedUserChat['data'];
} }
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
this.ChatServiceGPR.getRoom(this.roomId).loadHistory() this.wsChatService.getRoom(this.roomId).loadHistory()
} }
ngOnInit() { ngOnInit() {
@@ -214,7 +214,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
} }
sendMessage() { sendMessage() {
this.ChatServiceGPR.getRoom(this.roomId).send(this.message) this.wsChatService.getRoom(this.roomId).send(this.message)
this.message = ""; this.message = "";
} }
+1
View File
@@ -7,6 +7,7 @@ export const environment = {
apiURL: 'https://gabinetedigital.dyndns.info/GabineteDigital.Services/V5/api/', apiURL: 'https://gabinetedigital.dyndns.info/GabineteDigital.Services/V5/api/',
//apiURL: 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/V5/api/', //apiURL: 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/V5/api/',
apiChatUrl: 'https://gabinetedigitalchat.dyndns.info/api/v1/', apiChatUrl: 'https://gabinetedigitalchat.dyndns.info/api/v1/',
apiWsChatUrl: 'wss://gabinetedigitalchat.dyndns.info/websocket',
//apiChatUrl: 'https://www.tabularium.pt/api/v1/', //apiChatUrl: 'https://www.tabularium.pt/api/v1/',
/* apiChatUrl: 'http://chat.gabinetedigital.local:3000/api/v1/', */ /* apiChatUrl: 'http://chat.gabinetedigital.local:3000/api/v1/', */
domain: 'gabinetedigital.local', //gabinetedigital.local domain: 'gabinetedigital.local', //gabinetedigital.local