新增关注商品功能

关注后通过webSocket时时改变商品价格

auction/src/app/product-detail/product-detail.component.html

@@ -14,6 +14,15 @@ <h4>{{product?.title}}</h4>
     </div>
 </div>
 
+<div class="thumbnail">
+    <button class="btn btn-default btn-lg"
+            [class.active] = "isWatched"
+            (click)="watchProduct()" >
+            {{isWatched?'取消关注':'关注'}}
+    </button>
+    <label>最新出价：{{currentBid | number:'.2-2'}}元</label>
+</div>
+
 <div class="well">
     <div>
         <button class="btn btn-success" (click)="isCommentHidden = !isCommentHidden">发表评论</button>

auction/src/app/product-detail/product-detail.component.ts

@@ -1,6 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {Product, ProductService, Comment} from "../shared/product.service";
+import {WebSocketService} from "../shared/web-socket.service";
+import {any} from "codelyzer/util/function";
+import {Subscription} from "rxjs";
 
 @Component({
     selector: 'app-product-detail',
@@ -13,37 +16,64 @@ export class ProductDetailComponent implements OnInit {
 
     comments: Comment[];
 
-    newRating:number =5;
-    newComment:string = "";
+    newRating: number = 5;
+    newComment: string = "";
 
     isCommentHidden = true;
 
+    isWatched: boolean = false;
+    currentBid: number;
+
+    subscription: Subscription;
+
     constructor(private routeInfo: ActivatedRoute,
-                private productService: ProductService) {
+                private productService: ProductService,
+                private wsService: WebSocketService) {
     }
 
     ngOnInit() {
         let productId: string = this.routeInfo.snapshot.params["productId"];
-        //使用手工订阅的方式
+
         this.productService.getProduct(productId).subscribe(
-            product => this.product = product
+            product => {
+                this.product = product;
+                this.currentBid = product.price;
+            }
         );
         this.productService.getCommentsForProductId(productId).subscribe(
             coments => this.comments = coments
         );
     }
 
-    addComment(){
-        let comment = new Comment(0,this.product.id,new Date().toISOString(),"someone",this.newRating,this.newComment);
+    addComment() {
+        let comment = new Comment(0, this.product.id, new Date().toISOString(), "someone", this.newRating, this.newComment);
         this.comments.unshift(comment);
 
-        //reduce方法需要两个参数(sum,comment) => sum + comment.rating 匿名回调，0 代表初始值
-        //循环comments数组中的所有元素，当第一次循环的时候sum=0，comment是数组中的第一个元素。sum + comment.rating作为返回值，作为下一次循环时的sum
-        let sum = this.comments.reduce((sum,comment) => sum + comment.rating,0);
-        this.product.rating =sum / this.comments.length;
+        let sum = this.comments.reduce((sum, comment) => sum + comment.rating, 0);
+        this.product.rating = sum / this.comments.length;
 
-        this.newComment =null;
+        this.newComment = null;
         this.newRating = 5;
         this.isCommentHidden = true;
     }
+
+    watchProduct() {
+        var _this = this;
+        if (_this.subscription) {
+            _this.subscription.unsubscribe();
+            _this.isWatched = false;
+            _this.subscription = null;
+        } else {
+            _this.isWatched = true;
+            let products: any[];
+            _this.subscription = this.wsService.createObservableSocket("ws://localhost:8085", this.product.id)
+                .subscribe(
+                    function (products1) {
+                        console.log(JSON.parse(products1));
+                        products = JSON.parse(products1);
+                        _this.currentBid = products[0].bid
+                    }
+                );
+        }
+    }
 }

auction/src/app/shared/web-socket.service.ts

@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Observable} from "rxjs";
+import 'rxjs/Rx';
 
 @Injectable({
     providedIn: 'root'
@@ -11,22 +12,21 @@ export class WebSocketService {
     constructor() {
     }
 
-    createObservableSocket(url: string): Observable<any> {
+    createObservableSocket(url: string,id:number): Observable<any> {
         this.ws = new WebSocket(url);
-        return new Observable(
-          observer =>{
-              //什么时候发生下一个元素
-              this.ws.onmessage = (event) => observer.next(event.data);
-              //什么时候抛一个异常
-              this.ws.onerror = (event) => observer.error(event);
-              //什么时候发出流结束的信号
-              this.ws.onclose = (event) => observer.complete();
 
-          }
+        return new Observable<string>(
+            observer =>{
+                this.ws.onmessage = (event) => observer.next(event.data);
+                this.ws.onerror = (event) => observer.error(event);
+                this.ws.onclose = (event) => observer.complete();
+                this.ws.onopen =(event)=> this.sendMessage({productId:id});
+                return () => this.ws.close();
+            }
         );
     }
 
-    sendMessage(message:string){
-        this.ws.send(message);
+    sendMessage(message:any){
+        this.ws.send(JSON.stringify(message));
     }
 }

auction/src/app/web-socket/web-socket.component.ts

@@ -11,12 +11,12 @@ export class WebSocketComponent implements OnInit {
   constructor(private wsService:WebSocketService) { }
 
   ngOnInit() {
-    this.wsService.createObservableSocket("ws://localhost:8085")
-        .subscribe(
-            data => console.log(data),
-            err => console.log(err),
-            () => console.log("流已经结束")
-        )
+    // this.wsService.createObservableSocket("ws://localhost:8085")
+    //     .subscribe(
+    //         data => console.log(data),
+    //         err => console.log(err),
+    //         () => console.log("流已经结束")
+    //     );
   }
 
   sendMessageToserver(){