网上找的websocket的前期参考代码,存一份,侵删
import {Injectable} from '@angular/core'; import {interval, Subject} from 'rxjs'; /** * websocket服务 * @author LiQun * @date 2019/1/25 */ @Injectable({ providedIn: 'root' }) export class WebsocketService { messageSubject; // subject对象,用于发送事件 private url; // 默认请求的url private webSocket: WebSocket; // websocket对象 connectSuccess = false; // websocket 连接成功 period = 60 * 1000 * 10; // 10分钟检查一次 serverTimeoutSubscription = null; // 定时检测连接对象 reconnectFlag = false; // 重连 reconnectPeriod = 5 * 1000; // 重连失败,则5秒钟重连一次 reconnectSubscription = null; // 重连订阅对象 runTimeSubscription; // 记录运行连接subscription runTimePeriod = 60 * 10000; // 记录运行连接时间 constructor() { this.messageSubject = new Subject(); console.log('开始心跳检测'); // 进入程序就进行心跳检测,避免出现开始就连接中断,后续不重连 this.heartCheckStart(); this.calcRunTime(); } /** * 发送消息 * @author LiQun * @date 2019/1/22 * @param message 发送消息 */ sendMessage(message) { this.webSocket.send(message); } /** * 创建新连接 * @author LiQun * @date 2019/1/22 * @param url 要连接的url */ connect(url) { if (!!url) { this.url = url; } // 创建websocket对象 this.createWebSocket(); } /** * 创建连接 * @author LiQun * @date 2019/1/22 */ createWebSocket() { // 如果没有建立过连接,才建立连接并且添加时间监听 this.webSocket = new WebSocket(this.url); // 建立连接成功 this.webSocket.onopen = (e) => this.onOpen(e); // 接收到消息 this.webSocket.onmessage = (e) => this.onMessage(e); // 连接关闭 this.webSocket.onclose = (e) => this.onClose(e); // 异常 this.webSocket.onerror = (e) => this.onError(e); } /** * 连接打开 * @author LiQun * @date 2019/1/22 * @param e 打开事件 */ onOpen(e) { console.log('websocket 已连接'); // 设置连接成功 this.connectSuccess = true; // 如果是重连中 if (this.reconnectFlag) { // 1.停止重连 this.stopReconnect(); // 2.重新开启心跳 this.heartCheckStart(); // 3.重新开始计算运行时间 this.calcRunTime(); } } /** * 接受到消息 * @author LiQun * @date 2019/1/22 * @param event 接受消息事件 */ onMessage(event) { console.log('接收到的消息', event.data); // 将接受到的消息发布出去 const message = JSON.parse(event.data); console.log('接收到消息时间', new Date().getTime()); this.messageSubject.next(message); } /** * 连接关闭 * @author LiQun * @date 2019/1/22 */ private onClose(e) { console.log('连接关闭', e); this.connectSuccess = false; this.webSocket.close(); // 关闭时开始重连 this.reconnect(); this.stopRunTime(); // throw new Error('webSocket connection closed:)'); } /** * 连接异常 * @author LiQun * @date 2019/1/22 */ private onError(e) { // 出现异常时一定会进onClose,所以只在onClose做一次重连动作 console.log('连接异常', e); this.connectSuccess = false; // throw new Error('webSocket connection error:)'); } /** * 开始重新连接 * @author LiQun * @date 2019/1/22 */ reconnect() { // 如果已重连,则直接return,避免重复连接 if (this.connectSuccess) { this.stopReconnect(); console.log('已经连接成功,停止重连'); return; } // 如果正在连接中,则直接return,避免产生多个轮训事件 if (this.reconnectFlag) { console.log('正在重连,直接返回'); return; } // 开始重连 this.reconnectFlag = true; // 如果没能成功连接,则定时重连 this.reconnectSubscription = interval(this.reconnectPeriod).subscribe(async (val) => { console.log(`重连:${val}次`); const url = this.url; // 重新连接 this.connect(url); }); } /** * 停止重连 * @author LiQun * @date 2019/1/22 */ stopReconnect() { // 连接标识置为false this.reconnectFlag = false; // 取消订阅 if (typeof this.reconnectSubscription !== 'undefined' && this.reconnectSubscription != null) { this.reconnectSubscription.unsubscribe(); } } /** * 开始心跳检测 * @author LiQun * @date 2019/1/22 */ heartCheckStart() { this.serverTimeoutSubscription = interval(this.period).subscribe((val) => { // 保持连接状态,重置下 if (this.webSocket != null && this.webSocket.readyState === 1) { console.log(val, '连接状态,发送消息保持连接'); } else { // 停止心跳 this.heartCheckStop(); // 开始重连 this.reconnect(); console.log('连接已断开,重新连接'); } }); } /** * 停止心跳检测 * @author LiQun * @date 2019/1/22 */ heartCheckStop() { // 取消订阅停止心跳 if (typeof this.serverTimeoutSubscription !== 'undefined' && this.serverTimeoutSubscription != null) { this.serverTimeoutSubscription.unsubscribe(); } } /** * 开始计算运行时间 * @author LiQun * @date 2019/1/25 */ calcRunTime() { this.runTimeSubscription = interval(this.runTimePeriod).subscribe(period => { console.log('运行时间', `${period}分钟`); }); } /** * 停止计算运行时间 * @author LiQun * @date 2019/1/25 */ stopRunTime() { if (typeof this.runTimeSubscription !== 'undefined' && this.runTimeSubscription !== null) { this.runTimeSubscription.unsubscribe(); } } }