WeSocket通讯和从服务器将数据传输到客户端

WeSocket通讯

  1. WeSocket协议:低负载二进制协议,允许在同一个连接中同时双方向的数据传递,在发送请求的同时还能接受数据,所以WeSocket协议通讯时延迟低,而且由于常连接的存在,不需要每次请求时都需要携带一些连接相关的信息
    http协议进行通讯时,客户端和服务器的连接在同一时间只能有一个发送请求和服务器响应不能同时进行
  2. 安装WeSocket依赖库和类型定义文件

npm i ws --save
npm i @types/ws --save-dev

  1. 在8085端口创建一个服务器,当有客户端连接到这个服务器时给这个客户端推送一个消息
import  {Server} from  'ws'

const wsServer =new Server({port:8085});
wsServer.on("connection",websocket=>{
    websocket.send("服务器主动推送消息");
    websocket.on("message",message=>{
        console.log("接收"+message);
    })
});

  1. 在需要连接的客户端中生成一个service
ng g service shared/webSocket
export class WebSocketService {

  ws:WebSocket;

  constructor() { }
  createObservableSocket(url:string):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();
      }
    );
  }
  sendMessage(message:string){
    this.ws.send(message);
  }

}


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("流已经结束")
      );
  }
  sendMessageToserver(){
    this.wsService.sendMessage("hello from client");
  }

}
  1. 定时向所有客户端推送消息
setInterval(()=>{
    if(wsServer.clients){
        wsServer.clients.forEach(client=>{
            client.send("定时推送");
        })
    }
},2000);

从服务器将数据传输到客户端使用

  1. 将商品服务中的商品数组和评论数组放入到node服务器中,从服务器中获取数据,将方法中的商品数组,和评论数组使用一个流Observable来引用
getProducts(): Observable<Product[]> {
  return this.http.get("/api/products").map(res=>res.json());
}
getProduct(id:number): Observable<Product> {
  return this.http.get("/api/product"+id).map(res=>res.json());
}

getCommentsForProductId(id: number):Observable<Comment[]>  {
  return this.http.get("/api/product"+id+"/comments").map(res=>res.json());

}

  1. 在商品组件中同样执行相同的操作使用Observable,并且在模板中将管道过滤器改为使用异步管道async
<div class="col-md-4 col-sm-4 col-lg-4" *ngFor="let product of products | async">
  1. 在商品详情组件中将服务器获取的两个数组的流转化成数组以便使用
ngOnInit() {
  let productId:number = this.routeInfo.snapshot.params["productId"];
 this.productService.getProduct(productId).subscribe(
   product=>this.product=product
 );
  this.productService.getCommentsForProductId(productId).subscribe(
    comments=>this.comments=comments
  )
}
  1. 在界面中有属性不能读取,说明有数据属于undefined,因为现在的服务都是通过http,这就是一个异步服务,在组件中还没有获取到数据时就属于undefined需要将模板中的product和comment后加上?,但是for循环中的comment不需要更改,因为ngFor是会自动检测数据是否为空,这样就完成了数据从服务器到客户端的传输
<div class="thumbnail">
  <img  src="http://placehold.it/820x230" >
  <div>
    <h4 class="pull-right">{{product?.price}}元</h4>
    <h4>{{product?.title}}</h4>
    <p>{{product?.desc}}</p>
  </div>
  <div>
    <p class="pull-right">评论 {{comments?.length}} 条</p>
    <p>
      <app-start [rating]="product?.rating" ></app-start>
    </p>
  </div>
</div>

<div class="well">
<div>
  <button class="btn btn-success" (click)="isCommentHidden=!isCommentHidden">评论</button>
</div>

  <div [hidden]="isCommentHidden">
    <div><app-start [(rating)]="newRating" [readonly]="false"></app-start></div>
    <div>
      <textarea [(ngModel)]="newComment"></textarea>
    </div>
    <button class="btn" (click)="addComment()">发表</button>
  </div>

  <div class="row" *ngFor="let comment of comments">
    <hr>
    <div>
      <div class="col-md-12">
        <app-start [rating]="comment?.rating"></app-start>
        <span>用户名:{{comment.user}}</span>
        <span class="pull-right">{{comment.timestamp}}</span>
        <p></p>
        <p>
          {{comment.content}}
        </p>
      </div>
    </div>
  </div>
</div>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容

  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 31,872评论 2 89
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,841评论 6 13
  • 计算机网络概述 网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据传输。 按照计算机网络的定义,通过一定...
    蛋炒饭_By阅读 1,203评论 0 10
  • 会寻思,过中年便赋去来词。 为甚等闲间不肯来城市? 只怕俗却新诗。 对着这落花村,流水堤,柴门闭,柳外山横翠。 便...
    待熹楚阅读 351评论 1 1
  • 孙子快6岁了,那天从家里捡到了一毛钱,放到口袋里,说要给他妈妈。我说,太少了……孙子说,一毛钱给妈妈,她就会多一毛...
    心如莲花_fea1阅读 862评论 2 5