angular使用websocket和Rxjs

---

前言

最近在项目中需要使用到websocket进行前后端通信,由此我们将讨论如何使用WebSocket和RxJS在Angular应用程序中实现此功能。

---

一、Websocket是什么？

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。详细介绍

二、在服务端搭建websocket服务

用nodejs可以简单搭建一个websocket服务

const WebSocket = require('ws');
const wss = new WebSocket.Server({
    port: 8081 });
 
wss.on('connection', ws => {
   
  onConnection(ws);
  ws.on('message', message => {
   
    onMessage(message, ws);
  });
  ws.on('error', error => {
   
    OnError(error);
  });
   ws.on('close', ws=> {
   
    onClose();
})
});

三.使用rxjs中的websocketsubject

1.使用websocket

在前端建立websocket有许多方法,可以用浏览器自带webApi技术,也可以使用第三方库,这次我们选择使用与angular生态联系最紧密的Rxjs,Rxj附带一种特殊主题WebSocketSubject,它是浏览器中w3c-webSocket对象的包装

import {
    webSocket, WebSocketSubject } from 'rxjs/webSocket';
const subject = webSocket("ws://localhost:8081");

这样,只要订阅主题,即可与后端服务建立连接,接受与发送信息.因为websocketSubject是rxjs中的subject(主题), 可以将它视为observable与observer,所以你既可以使用next()发送消息,也可以注册回调函数接受返回消息

2.搭建服务

与websocket交互都应该隔离,所以需要使用到服务,下面给出全部代码

import {
    Injectable