Angular4总结(七)—— 与服务器通信

  1. 云栖社区>
  2. 博客>
  3. 正文

Angular4总结(七)—— 与服务器通信

luckyharry4 2019-11-10 18:38:52 浏览639
展开阅读全文

创建web服务器

使用express搭建
  1. 通过npm init -y 命令会创建一个含有默认配置的 package.json的文件
  2. 为了让nodejs支持typescript 使用命令:npm i @types/node —save
  3. 创建tsconfig.json文件:

    {
        "compilerOptions": {
            "target": "es5",
            "module": "commonjs",
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "outDir": "build",
            "lib": ["es6"]
    
        },
        "exclude": ["node_modules"]
    }
  4. 然后安装express相关插件 npm install express —save
  5. 同样需要让他支持typescript npm i @types/express —save
  6. 编译过后(我使用的是VS code, 通过run task,进行编译), 通过 node build/编译出来的文件。执行就行。执行命令为node build/auction_server.js
  7. 如果需要热部署可以安装nodemon 命令为 npm install nodemon -g

下面贴出服务器端代码的样例:

//引入Express包的相关引用
import * as express from 'express'

//引入WebSocket的包
import {Server} from 'ws'
import bodyParser = require('body-parser');

/**
 * 通过express对象,拿到具体属性
 */
const app = express();
//如果需要post请求,一定要加入这段代码,否则会request body会是undefined
app.use(bodyParser.json());

/**
 * 这个类作为一个 product的实体类,被用来承接从后台发过来的数据。
 */
// tslint:disable-next-line: class-name
export class productModel {
    constructor(
      public id: number,
      public title: string,
      public price: number,
      public rating: number,
      public desc: string,
      public categories: Array<string>
    ) {}
  }
  
  const products: productModel[] = [ 
    new productModel(1,"title1",1,1,"Description1,Description1,Description1,Description1",["图书","电子书"]),
    new productModel(2,"title2",2,2,"Description2,Description2,Description2,Description2",["手机","电子书"]),
    new productModel(3,"title2",2,3,"Description3,Description3,Description3,Description3",["pad","笔记本"]),
    new productModel(4,"title2",2,4,"Description4,Description4,Description4,Description4",["手机","笔记本"]),
    new productModel(5,"title2",2,5,"Description5,Description4,Description4,Description4",["笔记本","图书"]),
    new productModel(6,"title6",6,5,"Description6,Description6,Description6,Description6",["pad","手机"])
  ];


  // tslint:disable-next-line: class-name
export class commentModel {
  constructor(
    public id: number,
    public productId: number,
    public title: string,
    public rating: number,
    public desc: string
  ) {}
}

 const comments: Array<commentModel> = [
  // tslint:disable-next-line: no-use-before-declare
  new commentModel(1, 1, "title1", 1, "Comment1"),
  // tslint:disable-next-line: no-use-before-declare
  new commentModel(2, 1, "title2", 2, "Comment2"),
  // tslint:disable-next-line: no-use-before-declare
  new commentModel(3, 1, "title3", 3, "Comment3"),
];

/**
 * 定义一个get请求的API
 */
app.get('/', (request, response) => {
    response.send('Hello Express');
});

/**
 * 定义一个get请求的API,为了获取商品信息。
 */
app.get('/api/product', (request, response) => {
    response.json(products);
});

app.get('/api/product/:id', (request, response) => {
    response.json(products.find((product) => product.id == request.params.id));
});

app.get('/api/comments', (request, response) => {
  response.json(comments);
});

app.get('/api/comments/:productId', (request, response) => {
  response.json(comments.filter(comment => comment.productId == request.params.productId));
});

app.post('/api/products/condition', (req, res) => {
  console.log(req.body);
  res.json(products);
});

/**
 * 让服务器监听8000端口,并且开启服务。
 */
app.listen(8000, 'localhost', () => {
    console.log('node js 服务器已经启动!!');
});
通过express-generator搭建
  1. 通过命令安装 npm install express-generator —save -g
  2. 下载好后,直接express 项目名 即可。
  3. 然后通过命令 npm install 安装相应的包
  4. 如果想运行 通过命令 npm start。

Http通讯

要想使用angular的http请求,请按照如下几步操作来做:

  1. 在app.module.ts imports中添加上HttpClientModule模块

    import { HttpClientModule } from '@angular/common/http';
  1. 在需要使用的地方,引入Obserable,和HttpClient包

    import { Observable } from 'rxjs';
    import { HttpClient } from '@angular/common/http';
  2. 将HttpClient依赖注入进来,然后定义我们想要的请求:

    constructor(private http: HttpClient) {
        this.dataObservable = http.get('api/product');
       }
  3. 然后在想要发送请求的地方,直接订阅我们刚刚定义的那个请求:

    this.dataObservable.subscribe((response) => {
            console.log(response);
            this.products = response;
        });

️请求是在这里subscribe的时候,才会真正的发送出去。

下面给出完整的代码:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private dataObservable: Observable<any>;
  private products: Array<any>;

  constructor(private http: HttpClient) {
    this.dataObservable = http.get('api/product');
   }

  ngOnInit() {
    this.dataObservable.subscribe((response) => {
        console.log(response);
        this.products = response;
    });
  }

}

然后需要着重说一下的是,这样虽然说定义好了,但是请求还是发不出去的,因为我们要访问的不可能是在当面的这个项目中的,一定是开在了别的某台机器上的某个项目里。

那这应该怎么办呢?

我们需要定一个文件,告诉angular这些情况,我们定义一个proxy.config.json,文件内容如下:

{
    "/api": {
        "target": "http://localhost:8000"
    }
}

这段代码的意思是告诉angular如果是api前缀的URL,我们应该去本地的8000端口中去寻找。

最后将package.json中的 scripts中的start指令改为如下的命令即可:

"start": "ng serve --proxy-config proxy.conf.json"

WebSocket通讯

webSocket协议

传统的Http协议,只能是在发送请求状态和接收响应状态相互交换。而webSocket可以在一个连接点进行交换数据。

webSocket是一个长连接。

webSocket协议相对于http协议携带的数据更少。

安装webSocket在nodejs中

通过命令:

npm install ws --save
npm install @types/ws --save
服务端websocket

websocket的服务器端和Http服务器的搭建特别类似:

  1. 引入WebSocket包

    //引入WebSocket的包
    import {Server} from 'ws'
  2. 监听WebSocket连接时间,然后作出对应的处理

    webSocket.on('connection', websocket => {
      //从服务器端推送一个消息返回给客户端
      websocket.send("客户端连接后,响应给客户端的消息");
      //接收从客户端端发来的消息
      websocket.on('message', message => console.log(message));
    });
  3. 有的时候我们也有服务器端在一段时间间隔内,不断向客户端推送的需要:

    **
     * 定时向客户端推送消息,间隔为三秒
     */
    setInterval(function(){
      if (webSocket.clients) {
        webSocket.clients.forEach(client => {
          client.send('定时发送消息');
        });
      }
    }, 3000);
客户端websocket

封装两个方法用于以后的使用:

首先定义一个变量 ws: WebSocket;

  1. 建立与服务器端的连接

    /**
    * 这个方法用于当我们发送一个连接的方法
    * @param url
    */
      createObserableWebSocket(url: string): Observable<any> {
     this.ws = new WebSocket(url);
     return new Observable(
    obserer => {
      //当有消息发送过来时候的一个监听。
      this.ws.onmessage = (event) => obserer.next(event.data);
      //当有错误的时候一个监听。
      this.ws.onerror = (event) => obserer.error(event);
      //当结束的时候一个监听。
      this.ws.onclose = (event) => obserer.complete();
     });
      }
  1. 向服务器端推送消息

      /**
    * 通过websocket发送消息
    */
      sendMessage(msg: string) {
     this.ws.send(msg);
      }

然后就可以通过使用这两个方法进行与websocket服务端的通信。

在需要建立websocket的地方写如下的代码,一般会写在ngOnInit方法中,也就是说在组件刚开始创建的时候,就会建立连接:

this.wsService.createObserableWebSocket('ws://localhost:8085')
    .subscribe(
      data => console.log(data),
      error => console.log(error),
      () => console.log('连接完成')
    );

如果需要发送消息,可以写如下代码:

this.wsService.sendMessage('从客户端发送的消息');

网友评论

登录后评论
0/500
评论
luckyharry4
+ 关注