websocket chat service added (simple python api server for test)

Author: 7bitcoder

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { UserInfoComponent } from './main-page/user-info/user-info.component';
 import { StrangerInfoComponent } from './main-page/stranger-info/stranger-info.component';
 import { ChatComponent } from './chat/chat.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import {  ChatService } from "./chat.service"
 
 @NgModule({
   declarations: [
@@ -23,7 +24,7 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
     AppRoutingModule,
     FormsModule
   ],
-  providers: [],
+  providers: [ChatService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/chat.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ChatService } from './chat.service';
+
+describe('ChatService', () => {
+  let service: ChatService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ChatService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/chat.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
+import { ServerConfig } from './server-config';
+import { catchError, tap, switchAll } from 'rxjs/operators';
+import { EMPTY, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class Format {
+  constructor(
+  public message: string
+  ){}
+}
+export class ChatService {
+
+    private socket$: WebSocketSubject<Format>;
+    private messagesSubject$ = new Subject();
+   
+    public connect(): void {
+   
+      if (!this.socket$ || this.socket$.closed) {
+        this.socket$ = this.getNewWebSocket();
+      }
+    }
+
+    getObservable(){
+      return this.socket$.asObservable();
+    }
+   
+    private getNewWebSocket() {
+      console.log(ServerConfig.getUrl())
+      return webSocket<Format>(ServerConfig.getUrl());
+    }
+
+    sendMessage(msg: string) {
+      this.socket$.next( new Format(msg) );
+    }
+
+    close() {
+      this.socket$.complete(); }
+    }

src/app/chat/chat.component.css

@@ -30,11 +30,16 @@
 }
 .msg {
     float: left;
+    word-break: break-all;
+}
+.robotMsg{
+    border-bottom: 1px solid black;
 }
 .messagePrefix{
     float: left;
     font-weight: bold;
 }
 .myTextInput{
     color: white;
+    border: 1px solid black !important;
 }

src/app/chat/chat.component.html

@@ -1,10 +1,13 @@
 <section class="chat dispHeight">
         <div class="row TextBox m-0">
             <div class="h-100 col-12 px-0 px-md-5 pt-1 pt-md-2 pb-0">
+                <div #RobotMessages class="backgroundGrey d-block w-100 robotMsg px-4 py-2">{{robotMessage + ' '}} </div>
                 <div #msgContainer class="backgroundGrey chatContent d-block h-100 w-100 px-1">
                     <div class="msgContainer" *ngFor="let message of chatMessages; trackBy: identify">
-                        <div [class]="message.getUserString() + ' pl-1 d-block messagePrefix'">{{message.getMessagePrefix() + ': '}}</div>
-                        <div class="msg d-block pl-1">{{message.message}}</div>
+                        <div [class]="message.getUserString() + ' px-1 d-block messagePrefix'">{{message.getMessagePrefix() + ':  '}}</div>
+                        <div class="msg d-block pl-1" *ngFor="let msgRow of message.message; first as f" [class.clearfix]="!f">
+                            {{msgRow}} <br>
+                        </div>
                         <div class="clearfix"></div>
                     </div>
                 </div>
@@ -23,7 +26,7 @@
             </div>
             <div class="h-100 col-10 px-0 py-0">
                 <div class="backgroundGrey d-block h-100 w-100">
-                    <input #textInput type="text" class="backgroundGrey myTextInput w-100 h-100 px-2 py-1" ngModel (ngModelChange)="onTextChange($event)" (keyup.enter)="sendMessage(textInput.value)">
+                    <textarea  #textInput type="text" class="backgroundGrey myTextInput w-100 h-100 px-2 py-1" ngModel (ngModelChange)="onTextChange($event)" (keyup.enter)="sendMessage(textInput.value)"></textarea>
                 </div>
             </div>
             <div class="h-100 col-1 px-0 pr-md-5 py-0 text-center">

src/app/chat/chat.component.ts

@@ -1,40 +1,62 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ChatService } from '../chat.service'
 import { NgModule } from '@angular/core';
 import { Message, User } from "./message";
+import { catchError, map, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-chat',
   templateUrl: './chat.component.html',
   styleUrls: ['./chat.component.css']
 })
-export class ChatComponent implements OnInit {
 
+export class ChatComponent implements OnInit {
+  RobotMessages = {
+    connecting: "Connecting to server"
+  }
+  liveData$
   chatMessages: Message[] = [];
   counter: number = 0;
-
+  robotMessage: string = ""
   @ViewChild('textInput') inputField: ElementRef;
   @ViewChild('msgContainer') msgContainer: ElementRef;
 
-  constructor() { }
-
+  constructor(private chatService: ChatService) {
+  }
+  
   ngOnInit(): void {
+    this.robotMessage = this.RobotMessages.connecting;
+    this.chatService.connect();
 
+    this.chatService.getObservable().subscribe(    
+      msg => this.postMessage(User.stranger, msg.message), 
+      // Called whenever there is a message from the server    
+      err => console.log(err), 
+      // Called if WebSocket API signals some kind of error    
+      () => console.log('complete') 
+      // Called when connection is closed (for whatever reason)  
+   );
+    console.log("init ended")
   }
 
   onTextChange(event){
     console.log(this.counter++);
   }
 
-  sendMessage(message: string){
-    if(message.length == 0) 
-      return;
+  postMessage(who: User, message: string){
+    if(! (message.length == 0 || message.length == 1)) {
+      let msg: Message = new Message(who, message.slice(0,-1).split('\n')); //remove enter and split
+      this.chatMessages.push(msg);
+    }
+  }
 
-    let msg: Message = new Message(User.you, message);
-    this.chatMessages.push(msg);
-    console.log(msg);
+  sendMessage(message: string){
+    console.log(message)
+    this.postMessage(User.you, message);
     this.inputField.nativeElement.value = '';
     let msgCont = this.msgContainer.nativeElement;
     msgCont.scrollTop = msgCont.scrollHeight;
+    this.chatService.sendMessage(message);
   }
 
   identify(index, message: Message){

src/app/chat/message.ts

@@ -5,7 +5,7 @@ export class Message {
     public id: number;
     constructor(
         public user: User,
-        public message: string
+        public message: string[]
     ){
         this.id = Message.idCounter++;
     }

src/app/main-page/stranger-info/stranger-info.component.html

@@ -1,28 +1,28 @@
 <div class="row justify-content-start">
     <div class="col-12 col-md-4 pl-5">
         <fieldset class="form-group">
-            <legend class="w-100 ">Twoja Płeć</legend>
+            <legend class="w-100 ">Płeć rozmówcy</legend>
             <div class="form-check">
-                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
-                <label class="form-check-label" for="gridRadios1">
+                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios11" value="option1" checked>
+                <label class="form-check-label" for="gridRadios11">
                 Mężczyzna
                 </label>
             </div>
             <div class="form-check">
-                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
-                <label class="form-check-label" for="gridRadios2">
+                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios21" value="option2">
+                <label class="form-check-label" for="gridRadios21">
                 Kobieta
                 </label>
             </div>
             <div class="form-check">
-                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
-                <label class="form-check-label" for="gridRadios3">
+                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios31" value="option3">
+                <label class="form-check-label" for="gridRadios31">
                 Inna
                 </label>
             </div>
             <div class="form-check">
-                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios4" value="option4">
-                <label class="form-check-label" for="gridRadios4">
+                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios41" value="option4">
+                <label class="form-check-label" for="gridRadios41">
                     Nie podano
                 </label>
             </div>

src/app/server-config.spec.ts

@@ -0,0 +1,7 @@
+import { ServerConfig } from './server-config';
+
+describe('ServerConfig', () => {
+  it('should create an instance', () => {
+    expect(new ServerConfig()).toBeTruthy();
+  });
+});

src/app/server-config.ts

@@ -0,0 +1,8 @@
+export class ServerConfig {
+    public static ip: string = "localhost"
+    public static port: number = 8765;
+    public static protocol: string = "ws"
+    public static getUrl(){
+        return this.protocol + "://" + this.ip + ':' + this.port;
+    }
+}

src/styles.css

@@ -68,6 +68,9 @@ body {
 button, input {
     border-width: 0;
 }
+.clearfix{
+    clear: both;
+}
 .nofocus:focus {
     outline: none;
 }