在上一篇文章中,我们创建了server服务,在那个项目中我们继续添加websocket服务
npm install ws –save
然后安装types格式的
npm install @types/ws –save-dev
实现场景
编写服务端
auction_server.js
"use strict";
var express = require("express");
var ws_1 = require('ws');
var app = express();
var Product = (function () {
function Product(id, title, price, rating, desc, categories) {
this.id = id;
this.title = title;
this.price = price;
this.rating = rating;
this.desc = desc;
this.categories = categories;
}
return Product;
}());
exports.Product = Product;
var products = [
new Product(1, '第一个商品', 1.99, 3.5, "这是第一商品,asdxc奥术大师多撒", ["电子产品", "硬件设备", "其他"]),
new Product(2, '第二个商品', 2.99, 2.5, "这是第二商品,奥术大师多驱蚊器二无", ["硬件设备", "其他"]),
new Product(3, '第三个商品', 3.99, 1.5, "这是第三商品,请问驱蚊器翁群翁", ["电子产品", "硬件设备"]),
new Product(4, '第四个商品', 4.99, 2.0, "这是第四商品,切勿驱蚊器翁", ["电子产品", "其他"]),
new Product(5, '第五个商品', 5.99, 3.5, "这是第五商品,213123123", ["电子产品", "硬件设备", "其他"]),
new Product(6, '第六个商品', 6.99, 4.5, "这是第六商品,啊多少大所多多", ["电子产品", "硬件设备", "其他"])
];
app.get('/', function (req, res) {
res.send("Hello Express");
});
app.get('/products', function (req, res) {
res.json(products);
});
app.get('/products/:id', function (req, res) {
res.json(products.find(function (product) { return product.id == req.params.id; }));
});
var server = app.listen(8000, "localhost", function () {
console.log("服务器已启动,地址是:http://localhost:8000");
});
var wsServer = new ws_1.Server({ port: 8085 });
wsServer.on("connection", function (websocket) {
websocket.send("这个消息是服务器主动推送的");
websocket.on("message", function (message) {
console.log("接收到消息:" + message);
});
});
然后编写客户端,注意是客户端,跟服务端不是一个项目!!
ng g service shared/webSocket
web-socket.service.ts
import {Injectable} from '@angular/core';
import {Observable} from "rxjs";
@Injectable({
providedIn: 'root'
})
export class WebSocketService {
ws: WebSocket;
constructor() {
}
createObservableSocket(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);
//什么时候发出流结束的信号
this.ws.onclose = (event) => observer.complete();
}
);
}
sendMessage(message:string){
this.ws.send(message);
}
}
写完客户端服务,开始写组件
ng g component webSocket
在app.module.ts声明服务的提供器
providers: [WebSocketService],
web-socket.component.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")
.subscribe(
data => console.log(data),
err => console.log(err),
() => console.log("流已经结束")
)
}
sendMessageToserver(){
this.wsService.sendMessage("Hello from client");
}
}
web-socket.component.html
<button (click)="sendMessageToserver()">点击发送webSocket消息</button>
让应用调用webSocket组件
app.component.html
<app-web-socket></app-web-socket>
新建配置文件proxy.conf.json
{
"/api":{
"target":"http://localhost:8000"
}
}
修改package.json
"start": "ng serve --proxy-config proxy.conf.json",
修改服务端server项目
auction_server.js
"use strict";
var express = require("express");
var ws_1 = require('ws');
var app = express();
var Product = (function () {
function Product(id, title, price, rating, desc, categories) {
this.id = id;
this.title = title;
this.price = price;
this.rating = rating;
this.desc = desc;
this.categories = categories;
}
return Product;
}());
exports.Product = Product;
var products = [
new Product(1, '第一个商品', 1.99, 3.5, "这是第一商品,asdxc奥术大师多撒", ["电子产品", "硬件设备", "其他"]),
new Product(2, '第二个商品', 2.99, 2.5, "这是第二商品,奥术大师多驱蚊器二无", ["硬件设备", "其他"]),
new Product(3, '第三个商品', 3.99, 1.5, "这是第三商品,请问驱蚊器翁群翁", ["电子产品", "硬件设备"]),
new Product(4, '第四个商品', 4.99, 2.0, "这是第四商品,切勿驱蚊器翁", ["电子产品", "其他"]),
new Product(5, '第五个商品', 5.99, 3.5, "这是第五商品,213123123", ["电子产品", "硬件设备", "其他"]),
new Product(6, '第六个商品', 6.99, 4.5, "这是第六商品,啊多少大所多多", ["电子产品", "硬件设备", "其他"])
];
app.get('/', function (req, res) {
res.send("Hello Express");
});
app.get('/api/products', function (req, res) {
res.json(products);
});
app.get('/api/products/:id', function (req, res) {
res.json(products.find(function (product) { return product.id == req.params.id; }));
});
var server = app.listen(8000, "localhost", function () {
console.log("服务器已启动,地址是:http://localhost:8000");
});
var wsServer = new ws_1.Server({ port: 8085 });
wsServer.on("connection", function (websocket) {
websocket.send("这个消息是服务器主动推送的");
websocket.on("message", function (message) {
console.log("接收到消息:" + message);
});
});
//定时给所有客户端推送消息
setInterval(function () {
if (wsServer.clients) {
wsServer.clients.forEach(function (client) {
client.send("这是定时推送");
});
}
}, 2000);