创建webSocketServer(服务器端)
webSocket 是一种低负载的二进制协议，目前主流的浏览器都支持了webSocket协议，在node.js的生态圈中很多项目都实现了webSocket协议，本次使用的是ws，也就是说用wsl来实现一个webSocket服务器
const Ws = require('ws')
const wsServer = new Ws.Server({port:8085});
// 建立连接
wsServer.on("connection",websocket => {
websocket.send("这个消息是服务器主动推送的");
//将客户端发过来的消息直接返回回去
websocket.on('message', message => {
websocket.send('返回给客户端'+ message)
console.log('客户端发来的消息'+ message)
})
});
在客户端创建webSocketService
- 创建一个服务，服务中声明一个webSocket
ng g service shared/webSocket
- 写两个方法：接收服务器端的消息 和 发送消息到服务器
import { Observable } from 'rxjs';
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: any) {
this.ws.send(JSON.stringify(message));
}
}
- 在组件中使用
// 引入服务
import { WebSocketService } from '../shared/web-socket.service';
export class WebSocketComponent implements OnInit {
public messages: Array<string> =[]
// 注入服务 也叫声明
constructor(private wsService: WebSocketService) { }
ngOnInit() {
// 订阅了服务器发送过来的消息 连接websocket
this.wsService.createObservableSocket("ws://localhost:8085")
.subscribe(
data => this.messages.push(data),
err => console.log(err),
() => console.log("流已经结束")
);
}
//此方法需要在html模板中写明
sendMessageToServer(){
this.wsService.sendMessage("hello from client");
}
}
