Angular的通讯服务
使用 Nodejs 创建简单 Web 服务器
初始化项目
-
npm init -y
: 创建一个包含默认配置的 package.json 文件。 -
npm install --save @types/node
: 安装 node 的 TypeScript 的类型定义文件,使用 TypeScript 语言进行开发。 -
由于 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 服务
-
npm install --save express
: 安装 express 框架,包含 web 应用的常用功能(get、post、put、delete等)。 -
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');
}
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);
}
}