Websocket with storage

This commit is contained in:
Eudes Inácio
2022-01-20 14:31:49 +01:00
parent 4d9db4f198
commit e86d9d8b35
3 changed files with 247 additions and 96 deletions
+36 -8
View File
@@ -12,6 +12,7 @@ import { Storage } from '@ionic/storage';
export class RoomService {
massages: MessageService[] = []
storageMessage: any[] = [];
lastMessage: MessageService;
chatUser: ChatUserService[] = []
@@ -24,6 +25,7 @@ export class RoomService {
duration = ''
private ToastService = ToastsService
mgsArray = [];
scrollDown = () => { }
@@ -80,13 +82,28 @@ export class RoomService {
this.WsChatService.loadHistory(this.id, limit).then(async (chatHistory: chatHistory) => {
await this.transformData(chatHistory.result.messages.reverse());
//await this.transformData(chatHistory.result.messages.reverse());
/* console.log('loadHistory 111', chatHistory.result.messages.reverse())
this.mgsArray = chatHistory.result.messages.reverse();
await this.storage.set('chatmsg', this.mgsArray).then((value) => {
console.log('MSG SAVED ON STORAGE', value)
}); */
/* await this.storage.get('chatmsg').then((message) => {
message.forEach(message => {
console.log('FROM DB WEB', message)
message = this.fix_updatedAt(message)
const wewMessage = new MessageService()
wewMessage.setData(message)
this.massages.push(wewMessage)
console.log('loadHistory 222', this.massages)
});
}) */
chatHistory.result.messages.reverse().forEach(message => {
message = this.fix_updatedAt(message)
console.log('loadHistory', message)
this.storageMessage.push(message)
const wewMessage = new MessageService()
wewMessage.setData(message)
this.massages.push(wewMessage)
@@ -102,11 +119,20 @@ export class RoomService {
this.hasLoadHistory = true
}
updateMeessage(messageID, imgbase64) {
}
async returnData(res) {
return res;
}
async transformData(res) {
let mgsArray = [];
this.mgsArray = [];
res.forEach(async element => {
console.log('TRANSFORM DATA ELEMENT' ,element)
if (element.file) {
if (element.file.guid) {
@@ -129,7 +155,7 @@ export class RoomService {
}
mgsArray.push(this.fix_updatedAt(chatmsg));
this.mgsArray.push(chatmsg);
})
} else {
@@ -146,7 +172,7 @@ export class RoomService {
_updatedAt: element._updatedAt,
}
mgsArray.push(this.fix_updatedAt(chatmsg))
this.mgsArray.push(chatmsg)
}
} else {
let chatmsg = {
@@ -161,14 +187,14 @@ export class RoomService {
_updatedAt: element._updatedAt,
}
mgsArray.push(this.fix_updatedAt(chatmsg))
this.mgsArray.push(chatmsg)
}
});
await this.storage.remove('chatmsg').then(() => {
console.log('MSG REMOVE FROM STORAGE')
});
await this.storage.set('chatmsg', mgsArray).then((value) => {
await this.storage.set('chatmsg', this.mgsArray).then((value) => {
console.log('MSG SAVED ON STORAGE', value)
});
@@ -183,8 +209,10 @@ export class RoomService {
private fix_updatedAt(message) {
if (message.result) {
console.log('FIX UPDATE ', message.result)
message.result._updatedAt = message.result._updatedAt['$date']
} else {
console.log('FIX UPDATE 11', message)
message._updatedAt = message._updatedAt['$date']
}
return message
@@ -38,7 +38,7 @@
</ion-refresher-content>
</ion-refresher>
<div class="messages" #scrollMe>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last">
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of wsChatMethodsService.getDmRoom(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-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
@@ -113,6 +113,7 @@
</div>
<div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg ==''">
<div *ngIf="msg.file">
<div *ngIf="msg.file.type == 'application/img'">
<div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
@@ -140,6 +141,7 @@
</div>
</div>
</div>
</div>
<div *ngIf="msg.file">
+128 -7
View File
@@ -25,6 +25,8 @@ import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
import { Storage } from '@ionic/storage';
import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service'
import { WsChatService } from 'src/app/services/chat/ws-chat.service'
import { MessageService } from 'src/app/services/chat/message.service';
import { element } from 'protractor';
const IMAGE_DIR = 'stored-images';
@Component({
@@ -68,6 +70,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
longPressActive = false;
frameUrl: any;
downloadFile: any;
massages: MessageService[] = []
constructor(
public popoverController: PopoverController,
@@ -100,7 +103,15 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory()
this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
this.getMessageDB();
/* console.log('DATATATA', this.wsChatMethodsService.getDmRoom(this.roomId).massages)
this.wsChatMethodsService.getDmRoom(this.roomId).massages.forEach((element) => {
console.log('DATATATA 11', element)
}) */
//this.transformData(this.wsChatMethodsService.getDmRoom(this.roomId).massages)
//this.getMessageDB()
setTimeout(() => {
this.scrollToBottomClicked()
@@ -115,6 +126,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
}
onPressingMessage() {
const gesture = this.gestureController.create({
el: this.messageContainer.nativeElement,
@@ -254,22 +266,127 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
}); */
}
getMessageDB() {
this.storage.get('chatmsg').then((msg) => {
async getMessageDB() {
await this.storage.get('chatmsg').then((message) => {
this.transformData(message)
/* message.forEach(message => {
console.log('FROM DB WEB', message)
message = this.fix_updatedAt(message)
const wewMessage = new MessageService()
wewMessage.setData(message)
this.massages.push(wewMessage)
console.log('loadHistory 222', this.massages)
}); */
})
/* await this.storage.get('chatmsg').then((msg) => {
console.log('FROM DB WEB', msg)
let msgArray = [];
if (msg) {
msgArray = msg;
msgArray.filter(data => data._id != this.roomId);
this.messages = msgArray;
console.log("MSG CHAT WEB", this.messages)
})
} else {
this.getMessageDB()
}
}) */
}
private fix_updatedAt(message) {
if (message.result) {
console.log('FIX UPDATE ', message.result)
message.result._updatedAt = message.result._updatedAt['$date']
} else {
console.log('FIX UPDATE 11', message)
message._updatedAt = message._updatedAt['$date']
}
return message
}
async transformData(res) {
let mgsArray = [];
res.forEach(async element => {
if (element.file) {
if (element.file.guid) {
await this.storage.get(element.file.guid).then((image) => {
let chatmsg = {
_id: element._id,
attachments: element.attachments,
channels: element.channels,
file: {
guid: element.file.guid,
image_url: image,
type: element.file.type
},
mentions: element.mentions,
msg: element.msg,
rid: element.rid,
ts: element.ts,
u: element.u,
_updatedAt: element._updatedAt ,
}
mgsArray.push(chatmsg);
})
} else {
let chatmsg = {
_id: element._id,
attachments: element.attachments,
channels: element.channels,
file: element.file,
mentions: element.mentions,
msg: element.msg,
rid: element.rid,
ts: element.ts,
u: element.u,
_updatedAt: element._updatedAt,
}
mgsArray.push(chatmsg)
}
} else {
let chatmsg = {
_id: element._id,
attachments: element.attachments,
channels: element.channels,
mentions: element.mentions,
msg: element.msg,
rid: element.rid,
ts: element.ts,
u: element.u,
_updatedAt: element._updatedAt,
}
mgsArray.push(chatmsg)
}
});
await this.storage.remove('chatmsg').then(() => {
console.log('MSG REMOVE FROM STORAGE')
});
await this.storage.set('chatmsg', mgsArray).then((message) => {
message.forEach(message => {
console.log('FROM DB WEB', message)
message = this.fix_updatedAt(message)
const wewMessage = new MessageService()
wewMessage.setData(message)
this.massages.push(wewMessage)
console.log('loadHistory 222', this.massages)
});
});
}
/* async transformData(res) {
console.log('TRANSFORM DATA', res)
let mgsArray = [];
res.map(async element => {
console.log('TRANSFORM DATA ELEMENT', element)
if (element.file) {
@@ -336,7 +453,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
console.log('MSG SAVED ON STORAGE', value)
});
}
} */
async viewDocument(msg: any, url?: string) {
if (msg.file.type == "application/img") {
@@ -653,6 +770,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
});
}
sliderOpts = {
zoom: false,
slidesPerView: 1.5,
@@ -709,7 +827,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
} else if (event.type === HttpEventType.Response) {
this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
this.storage.set(msg.file.guid, this.downloadFile);
await this.storage.set(msg.file.guid, this.downloadFile).then(() => {
console.log('IMAGE SAVED')
});
}
});
@@ -721,12 +841,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
async openPreview(msg) {
if (msg.file.image_url === null) {
this.downloadFileMsg(msg)
} else {
const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: msg.attachments[0].image_url,
image: msg.file.image_url,
username: msg.u.name,
_updatedAt: msg._updatedAt
}