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" >
|
<!DOCTYPE html>
|
||||||
<div class="row">
|
<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">
|
#messages { list-style-type: none; margin: 0; padding: 0; }
|
||||||
<div class="user-card"
|
#messages > li { padding: 0.5rem 1rem; }
|
||||||
|
#messages > li:nth-child(odd) { background: #efefef; }
|
||||||
>
|
</style>
|
||||||
<!---->
|
</head>
|
||||||
|
<body>
|
||||||
<img src="../../assets/image/user.png" height="25" width="25"/>
|
<ul id="messages"></ul>
|
||||||
<p class="username"></p>
|
<form id="form" action="">
|
||||||
|
<input id="input" autocomplete="off" name="message" [(ngModel)]="msg"/><button (click)="sendButtonClick()">Send</button>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</body>
|
||||||
|
</html>
|
||||||
</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>
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import {Component, Inject, Input, OnInit} from '@angular/core';
|
||||||
import {ChatService} from "../services/chat/chat.service";
|
import {ChatInfo, ChatService} from "../services/chat/chat.service";
|
||||||
import {AuthService} from "../services/auth/auth.service";
|
import {AuthService} from "../services/auth/auth.service";
|
||||||
import {MessageService} from "../services/message/message.service";
|
import {MessageService} from "../services/message/message.service";
|
||||||
import {MatTableDataSource} from "@angular/material/table";
|
import {environment} from "../../environments/environment";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-general',
|
selector: 'app-general',
|
||||||
|
|
@ -10,123 +10,28 @@ import {MatTableDataSource} from "@angular/material/table";
|
||||||
styleUrls: ['./general.component.scss']
|
styleUrls: ['./general.component.scss']
|
||||||
})
|
})
|
||||||
export class GeneralComponent implements OnInit {
|
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
|
private username = sessionStorage.getItem('login');
|
||||||
public showScreen: boolean;
|
private room = 'general';
|
||||||
|
public msg = '';
|
||||||
|
|
||||||
// @ts-ignore
|
constructor(private chatservice: ChatService) {}
|
||||||
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[];
|
|
||||||
|
|
||||||
|
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 {
|
sendButtonClick(){
|
||||||
// //this.selectedUser = this.userList.find(user => user.password === password);
|
console.log('Button working');
|
||||||
// this.room = this.selectedUser.room[this.currentUser.id];
|
if(this.msg){
|
||||||
// this.messageArray = [];
|
this.chatservice.sendMessage(this.username, this.room, this.msg);
|
||||||
//
|
console.log(this.username, this.room, this.msg);
|
||||||
// this.storageArray = this.chatService.getStorage();
|
this.msg = '';
|
||||||
// // @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});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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