diff --git a/src/app/simple/simple.component.scss b/src/app/simple/simple.component.scss index bf931a9..3d3f8d2 100644 --- a/src/app/simple/simple.component.scss +++ b/src/app/simple/simple.component.scss @@ -15,6 +15,10 @@ image#image1_204_3 { font-size: 110px; } +#username{ + font-size: 60px; +} + @keyframes fadeIn { 0% { opacity: 1; diff --git a/src/app/simple/simple.component.svg b/src/app/simple/simple.component.svg index 4cccfce..6cafaab 100644 --- a/src/app/simple/simple.component.svg +++ b/src/app/simple/simple.component.svg @@ -20,10 +20,7 @@ - - - - + - - - @@ -72,11 +66,7 @@ - - + diff --git a/src/app/simple/simple.component.ts b/src/app/simple/simple.component.ts index 1e6bd8b..8d6d9df 100644 --- a/src/app/simple/simple.component.ts +++ b/src/app/simple/simple.component.ts @@ -1,79 +1,77 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnDestroy, OnInit} from '@angular/core'; @Component({ selector: 'app-simple', templateUrl: './simple.component.svg', styleUrls: ['./simple.component.scss'] }) -export class SimpleComponent implements OnInit { +export class SimpleComponent implements OnInit, OnDestroy { liveData: any; displayTime: string; - timer: number; interval: any; - private socket: WebSocket | undefined; + private auctionSocket: WebSocket | undefined; + private timerSocket: WebSocket | undefined; constructor() { - this.timer = 600; - this.displayTime = "10:00" + this.displayTime = "" this.connect(); } ngOnInit(): void { this.loadDefaultData() - this.startTimer(); } - - startTimer() { - this.interval = setInterval(() => { - this.timer--; - this.displayTime = this.convertTime(this.timer); - - if (this.timer === 0) { - clearInterval(this.interval); - // Дополнительные действия по достижении 0, например, вызов метода или перенаправление на другую страницу. - } - }, 1000); - } - private connect() { - this.socket = new WebSocket('ws://localhost:10000/auction'); - this.socket.onopen = () => { + this.auctionSocket = new WebSocket('ws://localhost:10000/auction'); + this.auctionSocket.onopen = () => { console.log('Connected to server'); }; - this.socket.onmessage = (event) => { + this.auctionSocket.onmessage = (event) => { this.liveData = JSON.parse(event.data); }; - this.socket.onclose = (event) => { + this.auctionSocket.onclose = (event) => { console.log(`WebSocket disconnected with code ${event.code}`); setTimeout(() => { console.log('Attempting to reconnect...'); this.connect(); }, 1000); }; - this.socket.onerror = (error) => { + this.auctionSocket.onerror = (error) => { this.loadDefaultData() console.log(`WebSocket error: ${error}`); }; + + this.timerSocket = new WebSocket('ws://localhost:10000/auctionTimer'); + this.timerSocket.onopen = () => { + console.log('Connected to server'); + }; + this.timerSocket.onmessage = (event) => { + this.displayTime = JSON.parse(event.data).timer; + }; + this.timerSocket.onclose = (event) => { + console.log(`WebSocket disconnected with code ${event.code}`); + setTimeout(() => { + console.log('Attempting to reconnect...'); + this.connect(); + }, 1000); + }; + this.timerSocket.onerror = (error) => { + console.log(`WebSocket error: ${error}`); + }; } private loadDefaultData() { this.liveData = { - time: "10:00", - rewardCost: "100", - userName: "deema_k", + rewardCost: "", + userName: "", } } - convertTime(seconds: number): string { - const minutes = Math.floor(seconds / 60); - const remainingSeconds = seconds % 60; - const displayMinutes = this.padNumber(minutes); - const displaySeconds = this.padNumber(remainingSeconds); - return `${displayMinutes}:${displaySeconds}`; - } - - padNumber(num: number): string { - return num.toString().padStart(2, '0'); + ngOnDestroy(): void { + if (this.auctionSocket) { + this.auctionSocket.close(); + } + if (this.timerSocket) { + this.timerSocket.close(); + } } - }