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

拼搏现实的明天。 2021-09-29 15:04 432阅读 0赞

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

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

### Http 协议与 Websocket 协议 ###

##### Http 协议 #####

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

##### Websocket 协议 #####

![websocket协议][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); 
       }
    }

[http]: /images/20210920/dcfd79d40ad9438fbbae90a736c32051.png
[websocket]: /images/20210920/c6295c1880dc4d32b1065a940b329d89.png