最后一個了 websocket，我還沒有在項目中使用過webscoket —— 馬丁路德.東
1.我們之前做過一個websocket的服務（在根模塊的providers中聲明他）
import { Injectable } from '@angular/core';
import {Observable} from "rxjs/Observable";
import 'rxjs/RX';
@Injectable()
export class WebSocketService {
ws:WebSocket;
constructor() { }
createObserverbleSocket(url:string,id:number): Observable<any> {
this.ws = new WebSocket(url);
return new Observable<string>(
observer => {
//接受到消息
this.ws.onmessage = (event) => observer.next(event.data);
//ws出錯
this.ws.onerror = (event) => observer.error(event);
//ws打開時
this.ws.onopen = (event) => this.sendMessage({productId:id});
//ws流關閉
this.ws.onclose = (event) => observer.complete();
//如果取消關注，就斷開ws
return () => this.ws.close();
).map(message => {
console.log(message);
return JSON.parse(message);
});;
}
//服務器主動發送消息
sendMessage(message:any){
this.ws.send(JSON.stringify(message));
}
}
2.在商品詳情的控制器里注入服務（在構造函數中哦）
在HTMl上有一些綁定的數據
<div class="thumbnail">
<button class="btn btn-default btn-lg"[class.active]="isWatched"
(click)="watchProduct()" >
{{isWatched?'取消關注':'關注'}}
</button>
<label>最新出價{{currentBid | number: '.2-2'}}元</label>
</div>
1.控制器里(建立ws連接，發送請求)
！只能發字符串哦
this.subscription = this.wsServer.createObserverbleSocket('ws://localhost:8085',this.product.id)
找到自己所要的價格做一次查詢
this.subscription = this.wsServer.createObserverbleSocket('ws://localhost:8085',this.product.id)
.subscribe(
products => {
let product = products.find(p => p.productId === this.product.id)
this.currentBid = product.bid;
console.log(product.bid);
}
);
3.服務器端代碼，
const subscription = new Map<any,number[]>();
const wsServer = new Server({port:8085});
wsServer.on("connection",websocket => {
// websocket.send("消息為服務器主動發送");
websocket.on("message",messsge => {
//字符串轉化為json
let messageObj = JSON.parse(messsge);
//取出客戶端之前訂閱的商品
let productIds = subscription.get(websocket) || [];
//將數據一起放在集合中
subscription.set(websocket,[...productIds,messageObj.productId]);
})
});
3.1服務器發送請求
const currenBids = new Map<number,number>();
setInterval(() => {
products.forEach( p => {
//獲取最新價格，不然就取原價格。
let currenBid = currenBids.get(p.id) || p.price;
//生成最新的價格
let newBid = currenBid + Math.random() * 5;
//將新價格放入集合
currenBids.set(p.id, newBid);
});
subscription.forEach((productIds:number[], ws) =>{
//判斷是否連接
if(ws.readyState === 1){
//將所需要的數據，整理為對象
let newBides = productIds.map( pid => ({
productId:pid,
bid:currenBids.get(pid)
}));
//轉化為字符串，發送出去。
ws.send(JSON.stringify(newBides));
}else{
//如果沒有連接，就從數組中刪除
subscription.delete(ws);
}
})
},2000)
4.取消關注（流會返回一個的對象，我們以此判斷是否關注）
屬性就是
subscription:Subscription;
訂閱是去承接對象
this.subscription = this.wsServer.createObserverbleSocket('ws://localhost:8085',this.product.id)
.subscribe(
products => {
let product = products.find(p => p.productId === this.product.id)
this.currentBid = product.bid;
console.log(product.bid);
}
);
根據是否訂閱來執行相應的操作。
if(this.subscription ){
//取消訂閱
this.subscription.unsubscribe();
this.isWatched = false;
this.subscription = null;
}else{
this.isWatched = true;
this.subscription = this.wsServer.createObserverbleSocket('ws://localhost:8085',this.product.id)
.subscribe(
products => {
let product = products.find(p => p.productId === this.product.id)
this.currentBid = product.bid;
console.log(product.bid);
}
);
}
