创建Web服务器
使用Nodejs创建服务器
使用typescript语言开发服务器
配置开发环境
1.
–> npm init -y
初始化文件夹,-y:建立包含默认配置的package.json文件
2.
–> npm i @types/node --save
引入node的类型定义文件
类型定义文件:让开发者在typescript中使用已有的javascript写成的库
3.
node本身不认typescript,将typescript编译为javascript
–> new tsconfig.json
/*编译器如何将typescript编译为javascript*/
{
"compilerOptions":{//编译器的配置
"target": "es5",//目标es5规范的脚本
"module": "commonjs",
"emitDecoratorMetadata": true, //装饰器相关
"experimentalDecorators": true,//装饰器相关
"outDir": "build",//编译完放build的文件里
"lib": ["es6"]//开发使用es6的语法
},
"exclude": [//排除
"node_modules"//第三方的包
]
}
使用此配置文件作为配置来编译typescript
创建服务器
import * as http from 'http'
const server = http.createServer((request, response) => {
response.end("hello Node!");
})
server.listen(8000);
启动服务器
–> node build/help_server.js
使用Express创建restful的http服务
===
1.
–> npm install express --save
在原始node上开发需要手工处理很多问题:读取文件,路由请求,处理各种请求类型
简化开发,减少手工编码量,安装Express框架
2.
–> npm install @types/express --save
引入Express的类型定义文件
3.
import * as express from 'express'
/*app :声明服务器端提供的http服务的*/
const app = express();
app.get('/',(req, res) => {
res.send("Hello Express!")
});
app.get('/products',(req, res) => {
res.send("接收到商品查询请求!")
});
const server = app.listen(8000,"localhost",() => {
console.log("服务器已经启动,地址是:http://localhost:8000");
});
启动服务器
–> node build/auction_server.js
4.
import * as express from 'express'
/*app :声明服务器端提供的http服务的*/
const app = express();
app.get('/',(req, res) => {
res.send("Hello Express!")
});
app.get('/products',(req, res) => {
res.send("接收到商品查询请求!!!")
});
const server = app.listen(8000,"localhost",() => {
console.log("服务器已经启动,地址是:http://localhost:8000");
});
停止:ctrl+shift+c
重启:–> node build/auction_server.js
监控服务器文件的变化
===
1.
–> npm install -g nodemon
监控源代码,改变时自动重启服务器,并加载最新的代码
2.
–> nodemon build/auction_server.js
在线竞拍商品
import * as express from 'express'
/*app :声明服务器端提供的http服务的*/
const app = express();
export class Product {
constructor(
public id: number,
public title: string,
public price: number,
public rating: number,
public desc: string,
public categories: Array<string>
) {
}
}
const products: Product[] = [
new Product(1, '第一个商品', 1.99, 2.5, '这是第一个商品', ['电子产品', '硬件设备']),
new Product(2, '第二个商品', 2.99, 3.5, '这是第二个商品', ['图书']),
new Product(3, '第三个商品', 3.99, 4.5, '这是第三个商品', ['硬件设备']),
new Product(4, '第四个商品', 4.99, 3.5, '这是第四个商品', ['电子产品', '硬件设备']),
new Product(5, '第五个商品', 5.99, 2.5, '这是第五个商品', ['电子产品']),
new Product(6, '第六个商品', 6.99, 3.5, '这是第六个商品', ['图书'])
];
app.get('/',(req, res) => {
res.send("Hello Express!")
});
app.get('/products',(req, res) => {
res.json(products)
});
app.get('/product/:id',(req, res) => {
res.json(products.find((product) => product.id == req.params.id))
});
const server = app.listen(8000,"localhost",() => {
console.log("服务器已经启动,地址是:http://localhost:8000");
});
Http通讯
了解angular的http服务
发送http请求
处理http响应
look this :https://majing.io/posts/10000020421171
app.module.ts
import {HttpClientModule} from '@angular/common/http';
...
imports: [
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
proxy.conf.json
{
"/api":{
"target":"http://localhost:8000"
}
}
package.json start
{
"name": "demo1",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
...
product.component.ts
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/index';
/*import { map } from 'rxjs/operators';*/
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
/*Observable:响应式编程的流,接收http服务返回的流*/
dataSource: Observable<any>;
/*和模板数据绑定*/
products: Array<any> = [];
constructor(private http: HttpClient) {
/*this.dataSource = this.http.get('/api/products').pipe(map(res => (<Response>res).json()));*/
this.dataSource = this.http.get('/api/products');
}
ngOnInit() {
/*订阅到的数据传给products属性*/
this.dataSource.subscribe((data) => this.products = data);
}
}
product.component.html
<div>商品信息</div>
<ul>
<li *ngFor="let product of products">{{product.title}}</li>
</ul>
app.component.html
<app-product></app-product>
product.component.ts
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/index';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
/*Observable:响应式编程的流,接收http服务返回的流*/
products:: Observable<any>;
constructor(private http: HttpClient) {
this.products: = this.http.get('/api/products');
}
ngOnInit() {
}
}
product.component.html
<div>商品信息</div>
<ul>
<!--async管道:接收流作为参数,自动订阅流-->
<li *ngFor="let product of products | async">{{product.title}}</li>
</ul>
angular:httpclient设置header
product.component.ts
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/index';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
/*Observable:响应式编程的流,接收http服务返回的流*/
products:: Observable<any>;
constructor(private http: HttpClient) {
const myHeaders = new HttpHeaders().set('Authorization', 'Basic 123456');
this.products = this.http.get('/api/products', {headers: myHeaders});
}
ngOnInit() {
}
}
WebSocket通讯
了解WebSocket协议
创建WebSocket服务器
使用WebSocket协议通讯
1.
安装ws
–> npm install ws --save
类型定义文件
–> npm install @types/ws --save-dev
2.
/**
* Created by Administrator on 2019/1/4/004.
*/
import * as express from 'express'
import {Server} from "ws";
...
const wsServer = new Server({port:8085});
wsServer.on("connection",websocket => {
websocket.send("这个消息是服务器主动推送的");
})
2. 生成服务
–> ng g service shared/webSocket
web-socket.service.ts
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/index';
@Injectable({
providedIn: 'root'
})
export class WebSocketService {
ws: WebSocket;
constructor() { }
createObservableSocket(url: string): Observable<any> {
this.ws = new WebSocket(url);
return new Observable(
observable => {
this.ws.onmessage = (event) => observable.next(event.data);
this.ws.onerror = (event) => observable.error(event);
this.ws.onclose = (event) => observable.complete();
}
);
}
sendMessage(message: string) {
this.ws.send(message);
}
}
- 生成组件
–> ng g component web-socket
app.module.ts声明提供器
...
providers: [WebSocketService],
...
})
export class AppModule { }
web-socket.service.ts
import { Component, OnInit } from '@angular/core';
import {WebSocketService} from '../shared/web-socket.service';
@Component({
selector: 'app-web-socket',
templateUrl: './web-socket.component.html',
styleUrls: ['./web-socket.component.css']
})
export class WebSocketComponent implements OnInit {
/*依赖注入*/
constructor(private wsService: WebSocketService) { }
ngOnInit() {
/*订阅服务的方法的返回的流*/
this.wsService.createObservableSocket('ws://localhost:8085')/*ws:webSocket协议*/
.subscribe(
data => console.log(data),
err => console.log(err),
() => console.log('流已经结束!')
);
}
sendMessageToServer() {
this.wsService.sendMessage('hello from client!');
}
}
/*定时推送*/
setInterval(() => {
if(wsServer.clients){
wsServer.clients.forEach(client => {
client.send("这是定时推送");
})
}
},2000);