send message is implemented

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

@@ -49,7 +49,7 @@
   <!-- CHAT FOOTER -->
   <div fxFlex="0 0 auto" fxLayout="column">
     <!-- REPLY FORM -->
-    <ucap-chat-form></ucap-chat-form>
+    <ucap-chat-form (send)="onSendMessage($event)"></ucap-chat-form>
     <!-- / REPLY FORM -->
   </div>
   <!-- / CHAT FOOTER-->

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<LoginResponse>;
   eventList$: Observable<Info[]>;
+  roomInfo: RoomInfo;
+  roomInfoSubscription: Subscription;
 
   constructor(
     private store: Store<any>,
@@ -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
+        }
+      })
+    );
+  }
 }

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

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<any>,

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<SendRequest> = (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<SendResponse> = (
   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<SendNotification> = (
   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,

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -6,8 +6,8 @@
 >
   <form
     #replyForm="ngForm"
-    (ngSubmit)="send($event)"
-    (keydown.enter)="send($event)"
+    (ngSubmit)="onSend($event)"
+    (keydown.enter)="onSend($event)"
     fxFlex
     fxLayout="row"
     fxLayoutAlign="start center"
@@ -34,6 +34,8 @@
       mat-icon-button
       type="submit"
       aria-label="Send message"
-    ></button>
+    >
+      Send
+    </button>
   </form>
 </div>

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