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 @@
+
\ 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 = '';
+ }
+
+}