Merge pull request #461 from GNS3/object-CloseEvent

Failed to construct WebSocket error fixed

src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.spec.ts

@@ -13,7 +13,7 @@ import { DuplicateActionComponent } from './duplicate-action.component';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { MockedToasterService } from '../../../../../services/toaster.service.spec';
 
-fdescribe('DuplicateActionComponent', () => {
+describe('DuplicateActionComponent', () => {
     let component: DuplicateActionComponent;
     let fixture: ComponentFixture<DuplicateActionComponent>;
     let mockedNodeService: MockedNodeService = new MockedNodeService();

src/app/components/project-map/project-map.component.spec.ts

@@ -50,6 +50,8 @@ import { InterfaceLabelWidget } from '../../cartography/widgets/interface-label'
 import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
 import { MapSettingService } from '../../services/mapsettings.service';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
+import { MockedToasterService } from '../../services/toaster.service.spec';
+import { ToasterService } from '../../services/toaster.service';
 
 export class MockedProgressService {
   public activate() {}
@@ -198,6 +200,7 @@ describe('ProjectMapComponent', () => {
   let drawingsDataSource = new MockedDrawingsDataSource();
   let nodesDataSource = new MockedNodesDataSource();
   let linksDataSource = new MockedLinksDataSource();
+  let mockedToasterService = new MockedToasterService();
   let nodeCreatedLabelStylesFixer;
 
   beforeEach(async(() => {
@@ -241,7 +244,8 @@ describe('ProjectMapComponent', () => {
         },
         { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
         { provide: MapScaleService },
-        { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer}
+        { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
+        { provide: ToasterService, useValue: mockedToasterService }
       ],
       declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
       schemas: [NO_ERRORS_SCHEMA]
@@ -254,6 +258,10 @@ describe('ProjectMapComponent', () => {
     component.projectMapMenuComponent = { 
       resetDrawToolChoice(){}
     } as ProjectMapMenuComponent;
+
+    component.ws = {
+      OPEN: 0,
+    } as WebSocket;
   });
 
   afterEach(() => {

src/app/components/project-map/project-map.component.ts

@@ -50,6 +50,7 @@ import { InterfaceLabelWidget } from '../../cartography/widgets/interface-label'
 import { LabelWidget } from '../../cartography/widgets/label';
 import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
+import { ToasterService } from '../../services/toaster.service';
 
 
 @Component({
@@ -65,7 +66,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public symbols: Symbol[] = [];
   public project: Project;
   public server: Server;
-  private ws: Subject<any>;
+  public ws: WebSocket;
   public isProjectMapMenuVisible: boolean = false;
 
   tools = {
@@ -113,7 +114,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private recentlyOpenedProjectService: RecentlyOpenedProjectService,
     private movingEventSource: MovingEventSource,
     private mapScaleService: MapScaleService,
-    private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer
+    private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer,
+    private toasterService: ToasterService
   ) {}
 
   ngOnInit() {
@@ -228,9 +230,15 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   setUpWS(project: Project) {
-    this.ws = webSocket(this.projectService.notificationsPath(this.server, project.project_id));
+    this.ws = new WebSocket(this.projectService.notificationsPath(this.server, project.project_id));
 
-    this.subscriptions.push(this.projectWebServiceHandler.connect(this.ws));
+    this.ws.onmessage = (event: MessageEvent) => {
+      this.projectWebServiceHandler.handleMessage(JSON.parse(event.data));
+    };
+
+    this.ws.onerror = (event: MessageEvent) => {
+      this.toasterService.error('Connection to host lost.');
+    };
   }
 
   setUpMapCallbacks() {
@@ -405,8 +413,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.nodesDataSource.clear();
     this.linksDataSource.clear();
 
-    if (this.ws) {
+    if (this.ws.OPEN) {
-      this.ws.unsubscribe();
+      this.ws.close();
     }
     this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
   }

src/app/handlers/project-web-service-handler.spec.ts

@@ -30,13 +30,11 @@ describe('ProjectWebServiceHandler', () => {
     (service: ProjectWebServiceHandler, nodesDataSource: NodesDataSource) => {
       spyOn(nodesDataSource, 'add');
 
-      service.connect(ws);
-
       const message = new WebServiceMessage();
       message.action = 'node.created';
       message.event = new Node();
 
-      ws.next(message);
+      service.handleMessage(message);
 
       expect(service).toBeTruthy();
       expect(nodesDataSource.add).toHaveBeenCalledWith(message.event);
@@ -48,13 +46,11 @@ describe('ProjectWebServiceHandler', () => {
     (service: ProjectWebServiceHandler, nodesDataSource: NodesDataSource) => {
       spyOn(nodesDataSource, 'update');
 
-      service.connect(ws);
-
       const message = new WebServiceMessage();
       message.action = 'node.updated';
       message.event = new Node();
 
-      ws.next(message);
+      service.handleMessage(message);
 
       expect(service).toBeTruthy();
       expect(nodesDataSource.update).toHaveBeenCalledWith(message.event);
@@ -66,13 +62,11 @@ describe('ProjectWebServiceHandler', () => {
     (service: ProjectWebServiceHandler, nodesDataSource: NodesDataSource) => {
       spyOn(nodesDataSource, 'remove');
 
-      service.connect(ws);
-
       const message = new WebServiceMessage();
       message.action = 'node.deleted';
       message.event = new Node();
 
-      ws.next(message);
+      service.handleMessage(message);
 
       expect(service).toBeTruthy();
       expect(nodesDataSource.remove).toHaveBeenCalledWith(message.event);
@@ -84,13 +78,11 @@ describe('ProjectWebServiceHandler', () => {
     (service: ProjectWebServiceHandler, linksDataSource: LinksDataSource) => {
       spyOn(linksDataSource, 'add');
 
-      service.connect(ws);
-
       const message = new WebServiceMessage();
       message.action = 'link.created';
       message.event = new Link();
 
-      ws.next(message);
+      service.handleMessage(message);
 
       expect(service).toBeTruthy();
       expect(linksDataSource.add).toHaveBeenCalledWith(message.event);
@@ -102,13 +94,11 @@ describe('ProjectWebServiceHandler', () => {
     (service: ProjectWebServiceHandler, linksDataSource: LinksDataSource) => {
       spyOn(linksDataSource, 'update');
 
-      service.connect(ws);
-
       const message = new WebServiceMessage();
       message.action = 'link.updated';
       message.event = new Link();
 
-      ws.next(message);
+      service.handleMessage(message);
 
       expect(service).toBeTruthy();
       expect(linksDataSource.update).toHaveBeenCalledWith(message.event);
@@ -120,13 +110,11 @@ describe('ProjectWebServiceHandler', () => {
     (service: ProjectWebServiceHandler, linksDataSource: LinksDataSource) => {
       spyOn(linksDataSource, 'remove');
 
-      service.connect(ws);
-
       const message = new WebServiceMessage();
       message.action = 'link.deleted';
       message.event = new Link();
 
-      ws.next(message);
+      service.handleMessage(message);
 
       expect(service).toBeTruthy();
       expect(linksDataSource.remove).toHaveBeenCalledWith(message.event);
@@ -138,13 +126,11 @@ describe('ProjectWebServiceHandler', () => {
     (service: ProjectWebServiceHandler, drawingsDataSource: DrawingsDataSource) => {
       spyOn(drawingsDataSource, 'add');
 
-      service.connect(ws);
-
       const message = new WebServiceMessage();
       message.action = 'drawing.created';
       message.event = new Drawing();
 
-      ws.next(message);
+      service.handleMessage(message);
 
       expect(service).toBeTruthy();
       expect(drawingsDataSource.add).toHaveBeenCalledWith(message.event);
@@ -156,13 +142,11 @@ describe('ProjectWebServiceHandler', () => {
     (service: ProjectWebServiceHandler, drawingsDataSource: DrawingsDataSource) => {
       spyOn(drawingsDataSource, 'update');
 
-      service.connect(ws);
-
       const message = new WebServiceMessage();
       message.action = 'drawing.updated';
       message.event = new Drawing();
 
-      ws.next(message);
+      service.handleMessage(message);
 
       expect(service).toBeTruthy();
       expect(drawingsDataSource.update).toHaveBeenCalledWith(message.event);
@@ -174,13 +158,11 @@ describe('ProjectWebServiceHandler', () => {
     (service: ProjectWebServiceHandler, drawingsDataSource: DrawingsDataSource) => {
       spyOn(drawingsDataSource, 'remove');
 
-      service.connect(ws);
-
       const message = new WebServiceMessage();
       message.action = 'drawing.deleted';
       message.event = new Drawing();
 
-      ws.next(message);
+      service.handleMessage(message);
 
       expect(service).toBeTruthy();
       expect(drawingsDataSource.remove).toHaveBeenCalledWith(message.event);

src/app/handlers/project-web-service-handler.ts

@@ -21,36 +21,33 @@ export class ProjectWebServiceHandler {
     private drawingsDataSource: DrawingsDataSource
   ) {}
 
-  public connect(ws: Subject<WebServiceMessage>) {
+  public handleMessage(message: WebServiceMessage) {
-    const subscription = ws.subscribe((message: WebServiceMessage) => {
+    if (message.action === 'node.updated') {
-      if (message.action === 'node.updated') {
+      this.nodesDataSource.update(message.event as Node);
-        this.nodesDataSource.update(message.event as Node);
+    }
-      }
+    if (message.action === 'node.created') {
-      if (message.action === 'node.created') {
+      this.nodesDataSource.add(message.event as Node);
-        this.nodesDataSource.add(message.event as Node);
+    }
-      }
+    if (message.action === 'node.deleted') {
-      if (message.action === 'node.deleted') {
+      this.nodesDataSource.remove(message.event as Node);
-        this.nodesDataSource.remove(message.event as Node);
+    }
-      }
+    if (message.action === 'link.created') {
-      if (message.action === 'link.created') {
+      this.linksDataSource.add(message.event as Link);
-        this.linksDataSource.add(message.event as Link);
+    }
-      }
+    if (message.action === 'link.updated') {
-      if (message.action === 'link.updated') {
+      this.linksDataSource.update(message.event as Link);
-        this.linksDataSource.update(message.event as Link);
+    }
-      }
+    if (message.action === 'link.deleted') {
-      if (message.action === 'link.deleted') {
+      this.linksDataSource.remove(message.event as Link);
-        this.linksDataSource.remove(message.event as Link);
+    }
-      }
+    if (message.action === 'drawing.created') {
-      if (message.action === 'drawing.created') {
+      this.drawingsDataSource.add(message.event as Drawing);
-        this.drawingsDataSource.add(message.event as Drawing);
+    }
-      }
+    if (message.action === 'drawing.updated') {
-      if (message.action === 'drawing.updated') {
+      this.drawingsDataSource.update(message.event as Drawing);
-        this.drawingsDataSource.update(message.event as Drawing);
+    }
-      }
+    if (message.action === 'drawing.deleted') {
-      if (message.action === 'drawing.deleted') {
+      this.drawingsDataSource.remove(message.event as Drawing);
-        this.drawingsDataSource.remove(message.event as Drawing);
+    }
-      }
-    });
-    return subscription;
   }
 }