add socket client (the message doesn't show up for now in html but in console yes)
This commit is contained in:
NyxiumYuuki
parent
11e51a80db
commit
e910f87ec4
2 changed files with 41 additions and 164 deletions
|
|
@ -1,52 +1,24 @@
|
|||
<div class="container-fluid" >
|
||||
<div class="row">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Socket.IO chat</title>
|
||||
<style>
|
||||
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
|
||||
|
||||
<div class="col-md-4">
|
||||
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
|
||||
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
|
||||
#input:focus { outline: none; }
|
||||
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
|
||||
|
||||
<div class="user-list-card">
|
||||
<div class="user-card"
|
||||
|
||||
>
|
||||
<!---->
|
||||
|
||||
<img src="../../assets/image/user.png" height="25" width="25"/>
|
||||
<p class="username"></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<div class="chat-container">
|
||||
<ng-container *ngIf="selectedUser">
|
||||
<div class="chat-header">
|
||||
<p class="username">{{selectedUser?.name}}</p>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div *ngFor="let item of messageArray">
|
||||
<span><strong>{{item.user}} : </strong> {{item.message}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="chat-footer">
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="form-group mb-0">
|
||||
<input type="text" placeholder="Entrez votre message" class="form-control"
|
||||
[(ngModel)]="messageText"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 text-center align-self-center">
|
||||
<button class="btn btn-primary btn-bm px-3 " (click)="sendMessage()">Envoyer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
#messages { list-style-type: none; margin: 0; padding: 0; }
|
||||
#messages > li { padding: 0.5rem 1rem; }
|
||||
#messages > li:nth-child(odd) { background: #efefef; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul id="messages"></ul>
|
||||
<form id="form" action="">
|
||||
<input id="input" autocomplete="off" name="message" [(ngModel)]="msg"/><button (click)="sendButtonClick()">Send</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {ChatService} from "../services/chat/chat.service";
|
||||
import {Component, Inject, Input, OnInit} from '@angular/core';
|
||||
import {ChatInfo, ChatService} from "../services/chat/chat.service";
|
||||
import {AuthService} from "../services/auth/auth.service";
|
||||
import {MessageService} from "../services/message/message.service";
|
||||
import {MatTableDataSource} from "@angular/material/table";
|
||||
import {environment} from "../../environments/environment";
|
||||
|
||||
@Component({
|
||||
selector: 'app-general',
|
||||
|
|
@ -10,123 +10,28 @@ import {MatTableDataSource} from "@angular/material/table";
|
|||
styleUrls: ['./general.component.scss']
|
||||
})
|
||||
export class GeneralComponent implements OnInit {
|
||||
dataSource = new MatTableDataSource<userList>();
|
||||
// @ts-ignore
|
||||
public user:String;
|
||||
// @ts-ignore
|
||||
public room:String;
|
||||
// @ts-ignore
|
||||
public messageText: string;
|
||||
messageArray:Array<{user:String,message:String}> = [];
|
||||
private storageArray = [];
|
||||
|
||||
// @ts-ignore
|
||||
public showScreen: boolean;
|
||||
private username = sessionStorage.getItem('login');
|
||||
private room = 'general';
|
||||
public msg = '';
|
||||
|
||||
// @ts-ignore
|
||||
public password: string;
|
||||
|
||||
// @ts-ignore
|
||||
public selectedUser;
|
||||
|
||||
|
||||
|
||||
constructor(private Auth: AuthService,
|
||||
private chatService: ChatService,
|
||||
private MS: MessageService
|
||||
) {
|
||||
|
||||
|
||||
this.chatService.newUserJoined()
|
||||
.subscribe(data=> this.messageArray.push(data));
|
||||
|
||||
|
||||
this.chatService.userLeftRoom()
|
||||
.subscribe(data=>this.messageArray.push(data));
|
||||
|
||||
this.chatService.getMessage()
|
||||
.subscribe(data=>this.messageArray.push(data));
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.MS.sendMessage('Cours/CoursGet', {}).subscribe( send => {
|
||||
console.log(send.data);
|
||||
this.dataSource.data = send.data as userList[];
|
||||
constructor(private chatservice: ChatService) {}
|
||||
|
||||
ngOnInit() {
|
||||
console.log('General working');
|
||||
this.chatservice.setUrl(environment.urlCG);
|
||||
this.chatservice.onNewMessage().subscribe(infos => {
|
||||
console.log('message : '+infos);
|
||||
});
|
||||
// this.chatService.getMessage()
|
||||
// .subscribe((data: {user: string, message: string}) => {
|
||||
// this.messageArray.push(data);
|
||||
// if (this.room) {
|
||||
// setTimeout( () => {
|
||||
// this.storageArray = this.chatService.getStorage();
|
||||
// //@ts-ignore
|
||||
// const storeIndex = this.storageArray.findIndex((storage) => storage.room === this.room);
|
||||
// //@ts-ignore
|
||||
// this.messageArray = this.storageArray[storeIndex].chats;
|
||||
// }, 500);
|
||||
// }
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
// selectUserHandler(password: string): void {
|
||||
// //this.selectedUser = this.userList.find(user => user.password === password);
|
||||
// this.room = this.selectedUser.room[this.currentUser.id];
|
||||
// this.messageArray = [];
|
||||
//
|
||||
// this.storageArray = this.chatService.getStorage();
|
||||
// // @ts-ignore
|
||||
// const storeIndex = this.storageArray.findIndex((storage) => storage.room === this.room);
|
||||
//
|
||||
// if (storeIndex > -1) {
|
||||
// // @ts-ignore
|
||||
// this.messageArray = this.storageArray[storeIndex].chats;
|
||||
// }
|
||||
//
|
||||
// // @ts-ignore
|
||||
// this.join(this.currentUser.name, this.room);
|
||||
// }
|
||||
|
||||
join(username: string, room: string): void {
|
||||
this.chatService.joinRoom({user: username, room: room});
|
||||
sendButtonClick(){
|
||||
console.log('Button working');
|
||||
if(this.msg){
|
||||
this.chatservice.sendMessage(this.username, this.room, this.msg);
|
||||
console.log(this.username, this.room, this.msg);
|
||||
this.msg = '';
|
||||
}
|
||||
|
||||
sendMessage()
|
||||
{
|
||||
this.chatService.sendMessage({user:this.user, room:this.room, message:this.messageText});
|
||||
|
||||
// this.storageArray = this.chatService.getStorage();
|
||||
// // @ts-ignore
|
||||
// const storeIndex = this.storageArray.findIndex((storage) => storage.room === this.room);
|
||||
//
|
||||
// if (storeIndex > -1) {
|
||||
// // @ts-ignore
|
||||
// this.storageArray[storeIndex].chats.push({
|
||||
// user: this.currentUser.name,
|
||||
// message: this.messageText
|
||||
// })
|
||||
// } else {
|
||||
// const updateStorage = {
|
||||
// room: this.room,
|
||||
// chats: [{
|
||||
// user: this.currentUser.name,
|
||||
// message: this.messageText
|
||||
// }]
|
||||
// };
|
||||
// // @ts-ignore
|
||||
// this.storageArray.push(updateStorage);
|
||||
// }
|
||||
// this.chatService.setStorage(this.storageArray);
|
||||
// this.messageText = '';
|
||||
}
|
||||
|
||||
|
||||
leave(){
|
||||
this.chatService.leaveRoom({login:this.dataSource.data, room:this.room});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
export interface userList {
|
||||
login: string;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue