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 @@
>
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();
+ }
}