diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index cc6ca76e..ae9b64c6 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -49,7 +49,7 @@
- +
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index 558fbf8c..c162532a 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts @@ -1,14 +1,17 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { ucapAnimations } from '@ucap-webmessenger/ui'; import { Store, select } from '@ngrx/store'; import { NGXLogger } from 'ngx-logger'; -import { Observable } from 'rxjs'; -import { Info } from '@ucap-webmessenger/protocol-event'; +import { Observable, Subscriber, Subscription } from 'rxjs'; +import { Info, EventType } from '@ucap-webmessenger/protocol-event'; import * as AppStore from '@app/store'; +import * as EventStore from '@app/store/messenger/event'; import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; import { SessionStorageService } from '@ucap-webmessenger/web-storage'; import { LoginInfo, KEY_LOGIN_INFO } from '@app/types'; +import { RoomInfo } from '@ucap-webmessenger/protocol-room'; +import { map, tap } from 'rxjs/operators'; @Component({ selector: 'app-layout-messenger-messages', @@ -16,9 +19,11 @@ import { LoginInfo, KEY_LOGIN_INFO } from '@app/types'; styleUrls: ['./messages.component.scss'], animations: ucapAnimations }) -export class MessagesComponent implements OnInit { +export class MessagesComponent implements OnInit, OnDestroy { loginRes$: Observable; eventList$: Observable; + roomInfo: RoomInfo; + roomInfoSubscription: Subscription; constructor( private store: Store, @@ -33,10 +38,37 @@ export class MessagesComponent implements OnInit { select(AppStore.AccountSelector.AuthenticationSelector.loginRes) ); + this.roomInfoSubscription = this.store + .pipe( + select(AppStore.MessengerSelector.RoomSelector.roomInfo), + tap(roomInfo => { + this.roomInfo = roomInfo; + }) + ) + .subscribe(); + this.eventList$ = this.store.pipe( select(AppStore.MessengerSelector.EventSelector.infoList) ); } + ngOnDestroy(): void { + if (!!this.roomInfoSubscription) { + this.roomInfoSubscription.unsubscribe(); + } + } + selectContact() {} + + onSendMessage(message: string) { + this.store.dispatch( + EventStore.send({ + req: { + roomSeq: this.roomInfo.roomSeq, + eventType: EventType.Character, + sentMessage: message + } + }) + ); + } } diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts index e7a38836..cf7bd6f0 100644 --- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts +++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts @@ -2,7 +2,9 @@ import { createAction, props } from '@ngrx/store'; import { InfoRequest, Info, - InfoResponse + InfoResponse, + SendResponse, + SendRequest } from '@ucap-webmessenger/protocol-event'; export const info = createAction( @@ -22,3 +24,20 @@ export const infoFailure = createAction( '[Messenger::Event] Info Failure', props<{ error: any }>() ); + +export const send = createAction( + '[Messenger::Event] Send', + props<{ req: SendRequest }>() +); + +export const sendSuccess = createAction( + '[Messenger::Event] Send Success', + props<{ + res: SendResponse; + }>() +); + +export const sendFailure = createAction( + '[Messenger::Event] Send Failure', + props<{ error: any }>() +); diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts index 65bbb60c..8568bf62 100644 --- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts +++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts @@ -7,19 +7,27 @@ import { Store } from '@ngrx/store'; import { NGXLogger } from 'ngx-logger'; import { of } from 'rxjs'; -import { tap, switchMap, map, catchError } from 'rxjs/operators'; +import { tap, switchMap, map, catchError, exhaustMap } from 'rxjs/operators'; import { InfoData, Info, InfoResponse, EventProtocolService, SSVC_TYPE_EVENT_INFO_DATA, - SSVC_TYPE_EVENT_INFO_RES + SSVC_TYPE_EVENT_INFO_RES, + SendResponse } from '@ucap-webmessenger/protocol-event'; import * as ChatStore from '@app/store/messenger/chat'; -import { info, infoSuccess, infoFailure } from './actions'; +import { + info, + infoSuccess, + infoFailure, + send, + sendSuccess, + sendFailure +} from './actions'; import { SessionStorageService } from '@ucap-webmessenger/web-storage'; @Injectable() @@ -71,6 +79,23 @@ export class Effects { { dispatch: false } ); + send$ = createEffect(() => + this.actions$.pipe( + ofType(send), + map(action => action.req), + exhaustMap(req => + this.eventProtocolService.send(req).pipe( + map((res: SendResponse) => { + return sendSuccess({ + res + }); + }), + catchError(error => of(sendFailure({ error }))) + ) + ) + ) + ); + constructor( private actions$: Actions, private store: Store, diff --git a/projects/ucap-webmessenger-protocol-event/src/lib/protocols/send.ts b/projects/ucap-webmessenger-protocol-event/src/lib/protocols/send.ts index d6badf6a..b168f28a 100644 --- a/projects/ucap-webmessenger-protocol-event/src/lib/protocols/send.ts +++ b/projects/ucap-webmessenger-protocol-event/src/lib/protocols/send.ts @@ -16,7 +16,7 @@ export interface SendRequest extends ProtocolRequest { // 0. 대화방SEQ(s) roomSeq: string; // 1. 이벤트타입(s) - type: EventType; + eventType: EventType; // 2. 이벤트내용(s) sentMessage: string; } @@ -27,7 +27,7 @@ export interface SendResponse extends ProtocolResponse { // 이벤트SEQ(n) seq: number; // 이벤트타입(s) - type: EventType; + eventType: EventType; // 발생일시(s) sendDate: string; // 이벤트내용(s) @@ -48,7 +48,7 @@ export interface SendNotification extends ProtocolNotification { // 이벤트SEQ(n) seq: number; // 이벤트타입(s) - type: EventType; + eventType: EventType; // 발생일시(s) sendDate: string; // 이벤트내용(s) @@ -72,7 +72,7 @@ export const encodeSend: ProtocolEncoder = (req: SendRequest) => { bodyList.push( { type: PacketBodyValue.String, value: req.roomSeq }, - { type: PacketBodyValue.String, value: req.type }, + { type: PacketBodyValue.String, value: req.eventType }, { type: PacketBodyValue.String, value: req.sentMessage } ); @@ -85,7 +85,7 @@ export const decodeSend: ProtocolDecoder = ( return { roomSeq: message.bodyList[0], seq: message.bodyList[1], - type: message.bodyList[2] as EventType, + eventType: message.bodyList[2] as EventType, sendDate: message.bodyList[3], message: message.bodyList[4], receiverCount: message.bodyList[5] || 0, @@ -101,7 +101,7 @@ export const decodeSendNotification: ProtocolDecoder = ( return { roomSeq: message.bodyList[0], seq: message.bodyList[1], - type: message.bodyList[2] as EventType, + eventType: message.bodyList[2] as EventType, sendDate: message.bodyList[3], message: message.bodyList[4], receiverCount: message.bodyList[5] || 0, diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html index cd9cc5bc..dbac7cb7 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html @@ -6,8 +6,8 @@ >
+ > + Send +
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts index 3a2c959e..a5d76886 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts @@ -1,4 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { + Component, + OnInit, + Output, + EventEmitter, + ViewChild +} from '@angular/core'; +import { NgForm } from '@angular/forms'; @Component({ selector: 'ucap-chat-form', @@ -6,9 +13,20 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./form.component.scss'] }) export class FormComponent implements OnInit { + @Output() + send = new EventEmitter(); + + @ViewChild('replyForm', { static: false }) + replyForm: NgForm; + constructor() {} ngOnInit() {} - send() {} + onSend(event: Event) { + event.preventDefault(); + + this.send.emit(this.replyForm.form.value.message); + this.replyForm.reset(); + } }