Currently, I am in the process of developing a chat application and my goal is to showcase the user's messages in the chatroom, referred to as the feed in this project. I have already implemented a function called getMessages() that displays all existing messages. Now, I am looking for guidance on how to add the user's typed message to my chatMessage[].
In my message.Service.ts, I have:
@Injectable({
providedIn: 'root'
})
export class MessageService {
user: User;
userName: Observable<string>;
chatMessage: ChatMessage;
chatMessages$: Observable<ChatMessage[]>;
constructor(
private http: HttpClient,
private accountService: AccountService) {
this.user = this.accountService.userValue;
}
sendMessage(msg: string){
const timestamp = this.getTimeStamp()
this.chatMessages$ = this.getMessages();
this.chatMessages$.push({ //having trouble here
msg_content: msg, //Property 'push' does not exist on type 'Observable<ChatMessage[]>'.
timeSent: timestamp,
userName: this.userName,
email: this.user.email });
var formdata = new FormData();
formdata.append("sender_email", this.user.email);
formdata.append("sender_key", this.user.api_key);
formdata.append("msg_content", msg);
this.http.post("http://11.123.456.78:5000/messages/send_message", formdata )
.subscribe(response => console.log(response), error => console.log('oops', error));
}
getMessages(){
let params = new HttpParams().set("sender_email", "this.user.email").set("sender_key", "someapikey");
var url = "http://11.123.456.78:5000/messages/get_all_messages";
return this.chatMessages$ = this.http.get<ChatMessage[]>(url, { params: params});
}
}
In my feed.component.ts:
export class FeedComponent implements OnInit {
chatMessages$: Observable<ChatMessage[]>;
messages;
messageObjects: string[] = [];
constructor(private chat: MessageService) {
}
ngOnInit() {
this.messages = this.chat.getMessages().subscribe((allmessagesdata => { this.messages = allmessagesdata
for (let messageObject of this.messages){
this.messageObjects.push(messageObject.msg_content)
};
}));
this.chatMessages$ = this.chat.getMessages();
}
ngOnchanges(){
this.chat.getMessages().subscribe((allmessagesdata => { this.messages = allmessagesdata, console.log(this.messages)}))
}
}
In my feed.html:
<div *ngFor="let message of ( chatMessages$ | async )" >
<app-message [chatMessage]="message"> </app-message>
</div>
In my chat-message.model.ts:
export class ChatMessage {
$id?: string;
email?: string;
userName?: string;
msg_content?: string;
timeSent?: Date = new Date();
}
I have attempted:
I tried setting
private subject = new Subject<string>();this.subject.next(msg) in my sendMessage() function
and then I created
getMessage():Observable<string> {
return this.subject.asObservable();
}
and subscribed to it in my feed, but this only allows for one value of message.
My knowledge of observables and subjects is limited and I can't seem to fully grasp this concept yet, but I know I had to use them for this purpose, so any help would be really appreciated