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); }
}