A hubub of code to test websockets. To remove and refine

web/.angular-cli.json

@@ -1,8 +1,7 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "angular-electron",
-    "ejected": true
+    "name": "angular-electron"
   },
   "apps": [
     {

web/src/app/app.component.html

@@ -1,2 +1,6 @@
 <app-navbar></app-navbar>
+
+
+
+
 <router-outlet></router-outlet>

web/src/app/app.module.ts

@@ -8,18 +8,23 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import {Injectable} from '@angular/core';
+
+
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './pages/home/home.component';
 import { AboutComponent } from './pages/about/about.component';
+import { NavbarComponent } from './shared/navbar/navbar.component';
 
 import { AppRoutingModule } from './app-routing.module';
-import { WebsocketService } from './services/websocket/websocket.service';
 
+import { WebsocketService } from './services/websocket/websocket.service';
+import { ChatService } from './services/chat.service';
 import { ElectronService } from './providers/electron.service';
-import { NavbarComponent } from './shared/navbar/navbar.component';
+
 import * as Rx from 'rxjs/Rx';
-import {Injectable} from '@angular/core';
+import { ChatbuttonComponent } from './shared/chatbutton/chatbutton.component';
 
 @NgModule({
   declarations: [
@@ -27,7 +32,7 @@ import {Injectable} from '@angular/core';
     HomeComponent,
     AboutComponent,
     NavbarComponent,
-    WebsocketService
+    ChatbuttonComponent
   ],
   imports: [
     BrowserModule,
@@ -41,7 +46,9 @@ import {Injectable} from '@angular/core';
     MdToolbarModule,
     MdIconModule
   ],
-  providers: [ElectronService],
+  providers: [ElectronService,WebsocketService,ChatService ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+
+}

web/src/app/pages/home/home.component.html

@@ -1,7 +1,4 @@
 <div class="container">
-  <h1 class="title">
-    {{title}}
-  </h1>
-  <a routerLink="/about" routerLinkActive="active" >hello</a>
 </div>
 
+<app-chatbutton></app-chatbutton>

web/src/app/services/chat.service.spec.ts

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

web/src/app/services/chat.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs/Rx';
+import { WebsocketService } from './websocket/websocket.service';
+
+const CHAT_URL = 'ws://localhost:9050/ws';
+
+export interface Message {
+	author: string,
+	message: string
+}
+
+@Injectable()
+export class ChatService {
+	public messages: Subject<Message>;
+
+	constructor(wsService: WebsocketService) {
+		this.messages = <Subject<Message>>wsService
+			.connect(CHAT_URL) 
+			.map((response: MessageEvent): Message => {
+				let data = JSON.parse(response.data);
+				return {
+					author: data.author,
+					message: data.message
+				}
+			});
+	}
+}

web/src/app/services/websocket/websocket.service.ts

@@ -3,37 +3,36 @@ import * as Rx from 'rxjs/Rx';
 
 @Injectable()
 export class WebsocketService {
-  private socket: Rx.Subject<MessageEvent>;
+  constructor() { }
+
+  private subject: Rx.Subject<MessageEvent>;
 
   public connect(url): Rx.Subject<MessageEvent> {
-    if(!this.socket) {
-      this.socket = this.create(url);
-    }
-
-    return this.socket;
+    if (!this.subject) {
+      this.subject = this.create(url);
+      console.log("Successfully connected: " + url);
+    } 
+    return this.subject;
   }
 
   private create(url): Rx.Subject<MessageEvent> {
     let ws = new WebSocket(url);
 
     let observable = Rx.Observable.create(
-        (obs: Rx.Observer<MessageEvent>) => {
-            ws.onmessage = obs.next.bind(obs);
-            ws.onerror = obs.error.bind(obs);
-            ws.onclose = obs.complete.bind(obs);
+	(obs: Rx.Observer<MessageEvent>) => {
+		ws.onmessage = obs.next.bind(obs);
+		ws.onerror = obs.error.bind(obs);
+		ws.onclose = obs.complete.bind(obs);
+		return ws.close.bind(ws);
+	})
+let observer = {
+		next: (data: Object) => {
+			if (ws.readyState === WebSocket.OPEN) {
+				ws.send(JSON.stringify(data));
+			}
+		}
+	}
+	return Rx.Subject.create(observer, observable);
+  }
 
-            return ws.close.bind(ws);
-        }
-    );
-
-    let observer = {
-        next: (data: Object) => {
-            if (ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify(data));
-            }
-        },
-    };
-
-    return Rx.Subject.create(observer, observable);
-}
 }

web/src/app/shared/chatbutton/chatbutton.component.html

@@ -0,0 +1 @@
+ <button (click)="sendMsg()">Send Message via websocket</button>

web/src/app/shared/chatbutton/chatbutton.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatbuttonComponent } from './chatbutton.component';
+
+describe('ChatbuttonComponent', () => {
+  let component: ChatbuttonComponent;
+  let fixture: ComponentFixture<ChatbuttonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChatbuttonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChatbuttonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/shared/chatbutton/chatbutton.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ChatService } from './../../services/chat.service';
+
+@Component({
+  selector: 'app-chatbutton',
+  templateUrl: './chatbutton.component.html',
+  styleUrls: ['./chatbutton.component.scss']
+})
+export class ChatbuttonComponent implements OnInit {
+
+    constructor(private chatService: ChatService) {
+		chatService.messages.subscribe(msg => {			
+      console.log("Response from websocket: " + JSON.stringify(msg));
+		});
+	}
+
+  ngOnInit() {
+  }
+
+  private message = {
+		author: 'tutorialedge',
+    message: 'this is a test message',
+    Event:'auth',
+    username:'user',
+    password:'password'
+	}
+
+  sendMsg():void {
+		console.log('new message from client to websocket: ', this.message);
+		this.chatService.messages.next(this.message);
+		this.message.message = '';
+	}
+
+}