send message is implemented

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -40,7 +40,7 @@
     <!-- CHAT MESSAGES -->
     <ucap-chat-messages
       [messages]="eventList$ | async"
-      [loginRes]="loginRes$ | async"
+      [loginRes]="loginRes"
     ></ucap-chat-messages>
     <!-- CHAT MESSAGES -->
   </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -20,7 +20,8 @@ import { map, tap } from 'rxjs/operators';
   animations: ucapAnimations
 })
 export class MessagesComponent implements OnInit, OnDestroy {
-  loginRes$: Observable<LoginResponse>;
+  loginRes: LoginResponse;
+  loginResSubscription: Subscription;
   eventList$: Observable<Info[]>;
   roomInfo: RoomInfo;
   roomInfoSubscription: Subscription;
@@ -34,9 +35,14 @@ export class MessagesComponent implements OnInit, OnDestroy {
   ngOnInit() {
     const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
 
-    this.loginRes$ = this.store.pipe(
+    this.loginResSubscription = this.store
-      select(AppStore.AccountSelector.AuthenticationSelector.loginRes)
+      .pipe(
-    );
+        select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
+        tap(loginRes => {
+          this.loginRes = loginRes;
+        })
+      )
+      .subscribe();
 
     this.roomInfoSubscription = this.store
       .pipe(
@@ -53,6 +59,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    if (!!this.loginResSubscription) {
+      this.loginResSubscription.unsubscribe();
+    }
     if (!!this.roomInfoSubscription) {
       this.roomInfoSubscription.unsubscribe();
     }
@@ -63,6 +72,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
   onSendMessage(message: string) {
     this.store.dispatch(
       EventStore.send({
+        senderSeq: this.loginRes.userSeq,
         req: {
           roomSeq: this.roomInfo.roomSeq,
           eventType: EventType.Character,

projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts

@@ -25,14 +25,22 @@ export const infoFailure = createAction(
   props<{ error: any }>()
 );
 
+export const appendInfoList = createAction(
+  '[Messenger::Event] Append InfoList',
+  props<{
+    info: Info;
+  }>()
+);
+
 export const send = createAction(
   '[Messenger::Event] Send',
-  props<{ req: SendRequest }>()
+  props<{ senderSeq: number; req: SendRequest }>()
 );
 
 export const sendSuccess = createAction(
   '[Messenger::Event] Send Success',
   props<{
+    senderSeq: number;
     res: SendResponse;
   }>()
 );

projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts

@@ -26,7 +26,8 @@ import {
   infoFailure,
   send,
   sendSuccess,
-  sendFailure
+  sendFailure,
+  appendInfoList
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 
@@ -82,11 +83,11 @@ export class Effects {
   send$ = createEffect(() =>
     this.actions$.pipe(
       ofType(send),
-      map(action => action.req),
+      exhaustMap(action =>
-      exhaustMap(req =>
+        this.eventProtocolService.send(action.req).pipe(
-        this.eventProtocolService.send(req).pipe(
           map((res: SendResponse) => {
             return sendSuccess({
+              senderSeq: action.senderSeq,
               res
             });
           }),
@@ -96,6 +97,28 @@ export class Effects {
     )
   );
 
+  sendSuccess$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(sendSuccess),
+        tap(action => {
+          const res = action.res;
+          const appendInfo: Info = {
+            seq: res.seq,
+            type: res.eventType,
+            senderSeq: action.senderSeq,
+            sendDate: res.sendDate,
+            sentMessage: res.message,
+            receiverCount: res.receiverCount
+          };
+
+          this.store.dispatch(appendInfoList({ info: appendInfo }));
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   constructor(
     private actions$: Actions,
     private store: Store<any>,

projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts

@@ -1,6 +1,6 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { infoSuccess } from './actions';
+import { infoSuccess, appendInfoList } from './actions';
 
 export const reducer = createReducer(
   initialState,
@@ -10,5 +10,12 @@ export const reducer = createReducer(
       infoList: action.infoList,
       infoStatus: action.res
     };
+  }),
+
+  on(appendInfoList, (state, action) => {
+    return {
+      ...state,
+      infoList: [...state.infoList, action.info]
+    };
   })
 );

projects/ucap-webmessenger-protocol-event/src/lib/protocols/send.ts

@@ -29,7 +29,7 @@ export interface SendResponse extends ProtocolResponse {
   // 이벤트타입(s)
   eventType: EventType;
   // 발생일시(s)
-  sendDate: string;
+  sendDate: Date;
   // 이벤트내용(s)
   message: string;
   // 수신자수