Angular 学习（十一）：Angular 通讯服务

Angular的通讯服务

使用 Nodejs 创建简单 Web 服务器

初始化项目

1. npm init -y : 创建一个包含默认配置的 package.json 文件。

2. npm install --save @types/node : 安装 node 的 TypeScript 的类型定义文件，使用 TypeScript 语言进行开发。

3. 由于 Node 本身是不认识 TypeScript 的，故需要 TypeScript 编译成 JavaScript。

在执行编译时，需要设置 tsconfig.json 配置文件。

{  "compileOnSave": false,  
// 编译器配置 
 "compilerOptions": {   
     "declaration": false,    "module": "commonjs", // 模块规范是 commonjs   
     "emitDecoratorMetadata": true,   
     "experimentalDecorators": true,    
     "noUnusedLocals": true,    
     "noUnusedParameters": true,    
     "target": "es5", // 编译成 es5 规范的脚本    
     "outDir": "./build", // 编译的文件放到 build 文件夹里   
     "lib": [      "es6"    ]  
     },  
     "exclude":[    "node_modules"  ]
 }

使用 Express 创建 restful 的 http 服务

1. npm install --save express : 安装 express 框架，包含 web 应用的常用功能(get、post、put、delete等)。

2. npm install --save @types/express ： 安装 express 的 TypeScript 类型定义文件。
   使用：

// 引入服务import * as express from 'express';
const app = express();
// 调用get服务
app.get('/', (req, res) => {  
    res.send('Hello Express!');
})
// 监听8000端口
app.listen(8000, "localhost", () => {  
    console.log('服务器已启动，地址是：http://localhost:8000');
}

4. npm install -g nodemon：安装 node monitor 工具,实现热部署。

Http 协议与 Websocket 协议

Http 协议

在使用 Http 协议进行通讯时，在同一时间数据的传输方向是单向的。也就是说，要么在发送请求数据，要么在接收响应数据，是不能同时既发送请求数据，又接收响应数据的。

Websocket 协议

Websocket 是一种低负载的二进制协议，目前主流的浏览器都已经内置了对 Websocket 的支持。Websocket 协议允许在同一连接中同时间进行双方向的数据传递。也就是说，在发送请求数据的时候，同时还可以接收数据。
另外 Websocket 协议是一个长连接协议，不需要在每次发送和接收数据时建立连接，所以Websocket 通讯时的延迟要比 Http 的要低。而且由于长连接的存在，不需要在每次请求时都携带一些连接相关的信息，比如 Http 请求头中的信息就是与连接相关的一些信息，但是在Websocket 中是不需要带这些信息的，所以使用 Websocket 协议通讯传递的消息数据比 Http 协议的要少。

Websocket 服务端实现

import { Server } from 'ws';
const wsServer = new Server({ port: 8085 });
wsServer.on('connection', websocket => {  
    websocket.send('这个是服务器主动推送的消息！');  
    websocket.on('message', message => {    
    console.log('接收到的消息：' + message); 
   });
});
setInterval(() => {  
   if (wsServer.clients) {   
      wsServer.clients.forEach( client => {     
      client.send('这是定时推送！');   
     });  
}}, 2000);

Websocket 客户端实现

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable()
export class WebSocketService {
  ws: WebSocket;
  constructor() { }
  url = 'ws://localhost:8085';
  /** 创建可观察的 socket */  
  createObersvableSocket(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);        
         // websocket 连接关闭时       
         this.ws.onclose = (event) => observer.complete();
         } );  
    }
   /** 发送数据流 */  
  sendMessage(message: string): void {    
      console.log('client');   
      this.ws.send(message); 
   }
}