From e1932587106f7ecec155fbb970e1d4b1c979df72 Mon Sep 17 00:00:00 2001 From: GloriousCode Date: Thu, 31 Aug 2017 21:13:42 +1000 Subject: [PATCH] A hubub of code to test websockets. To remove and refine --- web/.angular-cli.json | 3 +- web/src/app/app.component.html | 4 ++ web/src/app/app.module.ts | 19 +++++--- web/src/app/pages/home/home.component.html | 5 +- web/src/app/services/chat.service.spec.ts | 15 ++++++ web/src/app/services/chat.service.ts | 27 +++++++++++ .../services/websocket/websocket.service.ts | 47 +++++++++---------- .../chatbutton/chatbutton.component.html | 1 + .../chatbutton/chatbutton.component.scss | 0 .../chatbutton/chatbutton.component.spec.ts | 25 ++++++++++ .../shared/chatbutton/chatbutton.component.ts | 34 ++++++++++++++ 11 files changed, 144 insertions(+), 36 deletions(-) create mode 100644 web/src/app/services/chat.service.spec.ts create mode 100644 web/src/app/services/chat.service.ts create mode 100644 web/src/app/shared/chatbutton/chatbutton.component.html create mode 100644 web/src/app/shared/chatbutton/chatbutton.component.scss create mode 100644 web/src/app/shared/chatbutton/chatbutton.component.spec.ts create mode 100644 web/src/app/shared/chatbutton/chatbutton.component.ts diff --git a/web/.angular-cli.json b/web/.angular-cli.json index 793a55c4..d3f034d6 100644 --- a/web/.angular-cli.json +++ b/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": [ { diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html index 6659729a..1dadae96 100644 --- a/web/src/app/app.component.html +++ b/web/src/app/app.component.html @@ -1,2 +1,6 @@ + + + + diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts index a1909d29..b77130fd 100644 --- a/web/src/app/app.module.ts +++ b/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 { + +} \ No newline at end of file diff --git a/web/src/app/pages/home/home.component.html b/web/src/app/pages/home/home.component.html index 946b2403..f6dc8465 100644 --- a/web/src/app/pages/home/home.component.html +++ b/web/src/app/pages/home/home.component.html @@ -1,7 +1,4 @@
-

- {{title}} -

- hello
+ \ No newline at end of file diff --git a/web/src/app/services/chat.service.spec.ts b/web/src/app/services/chat.service.spec.ts new file mode 100644 index 00000000..63944e9e --- /dev/null +++ b/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(); + })); +}); diff --git a/web/src/app/services/chat.service.ts b/web/src/app/services/chat.service.ts new file mode 100644 index 00000000..a38854bf --- /dev/null +++ b/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; + + constructor(wsService: WebsocketService) { + this.messages = >wsService + .connect(CHAT_URL) + .map((response: MessageEvent): Message => { + let data = JSON.parse(response.data); + return { + author: data.author, + message: data.message + } + }); + } +} \ No newline at end of file diff --git a/web/src/app/services/websocket/websocket.service.ts b/web/src/app/services/websocket/websocket.service.ts index 8c84c7ab..b7c3d70b 100644 --- a/web/src/app/services/websocket/websocket.service.ts +++ b/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; + constructor() { } + + private subject: Rx.Subject; public connect(url): Rx.Subject { - 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 { let ws = new WebSocket(url); let observable = Rx.Observable.create( - (obs: Rx.Observer) => { - ws.onmessage = obs.next.bind(obs); - ws.onerror = obs.error.bind(obs); - ws.onclose = obs.complete.bind(obs); + (obs: Rx.Observer) => { + 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); -} } \ No newline at end of file diff --git a/web/src/app/shared/chatbutton/chatbutton.component.html b/web/src/app/shared/chatbutton/chatbutton.component.html new file mode 100644 index 00000000..3e9d1478 --- /dev/null +++ b/web/src/app/shared/chatbutton/chatbutton.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/app/shared/chatbutton/chatbutton.component.scss b/web/src/app/shared/chatbutton/chatbutton.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/web/src/app/shared/chatbutton/chatbutton.component.spec.ts b/web/src/app/shared/chatbutton/chatbutton.component.spec.ts new file mode 100644 index 00000000..1fbf84ae --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ChatbuttonComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ChatbuttonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/shared/chatbutton/chatbutton.component.ts b/web/src/app/shared/chatbutton/chatbutton.component.ts new file mode 100644 index 00000000..058b375e --- /dev/null +++ b/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 = ''; + } + +}