Websocket实现心跳

最新推荐文章于 2025-11-11 06:30:00 发布

原创最新推荐文章于 2025-11-11 06:30:00 发布 · 980 阅读

1 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Angular应用中实现WebSocket心跳机制，包括在service层的实现和在component组件中如何调用这部分功能。

Angular的实现，分成service部分，以及调用该service的component。

service代码 websocket.service.ts

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {

  constructor() {
  }

  createWebSocket(url: string, ws, reconnectLock, messageHandler) {
    if (url.startsWith("/")) {
      if (window.location.protocol === "https:") {
        url = "wss://" + window.location.host + url;
      } else {
        url = "ws://" + window.location.host + url;
      }
    }

    ws = new WebSocket(url);
    this.initWebSocket(url, ws, reconnectLock, messageHandler);
  }

  private initWebSocket(url, ws, reconnectLock, messageHandler) {
    ws.onopen = (event) => {
      console.log("WebSocket onopent");
      ws.send("Heart beat message.");
      this.heartBeatCheck.start(ws);
    }

    ws.onmessage = (event) => {
      console.log("WebSocket onmessage");
      messageHandler.onMessage(event);
      this.heartBeatCheck.start(ws);
    }

    ws.onclose = (event) => {
      console.log("WebSocket onclose");
      this.reconnect(url, ws, reconnectLock, messageHandler);
    }

    ws.onerror = (event) => {
      console.log("WebSocket onerror");
      this.reconnect(url, ws, reconnectLock, messageHandler);
    }
  }

  private reconnect(url, ws, reconnectLock, messageHandler) {
    if (reconnectLock.lock) {
      return;
    }

    reconnectLock.lock = true;

    let self = this;
    setTimeout(function () {
      self.createWebSocket(url, ws, reconnectLock, messageHandler);
      reconnectLock.lock = false;
    }, 30000);
  }

  private heartBeatCheck = {
    heartBeatTimeout: 30000,
    heartBeatObj: null,
    serverResponseTimeout: 10000,
    serverResponseObj: null,
    start: function (ws) {
      let self = this;
      self.heartBeatObj && clearTimeout(self.heartBeatObj);
      self.serverResponseObj && clearTimeout(self.serverResponseObj);

      self.heartBeatObj = setTimeout(function () {
        ws.send("Heart beat message.");

        self.serverResponseObj = setTimeout(function () {
          ws.close();
        }, self.serverResponseTimeout);
      }, self.heartBeatTimeout);
    }
  }
}

conponent代码 dashboard.component.ts

import {Component, OnInit} from '@angular/core';

import {MonitorService} from "../../services/monitor.service";
import {AppEditType} from "../app-edit/app-edit-type";
import {WebSocketService} from "../../services/websocket.service";
import {environment} from "../../../environments/environment";
import {MonitoredApplication} from "../../entities/monitored-application";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  appEditTypes = AppEditType;
  wsUrl = environment.wsUrl;
  webSocket = null;
  reconnectLock = {lock: false};

  constructor(private monitorService: MonitorService,
              private webSocketService: WebSocketService) {
  }

  ngOnInit() {
    this.webSocketService.createWebSocket(this.wsUrl, this.webSocket, this.reconnectLock, this.messageHandler);
  }

  private messageHandler = {
    context: {
      service: this.monitorService
    },
    onMessage : function(event){
      if (event.data == "HeartBeatOK") return;

      let apps = JSON.parse(event.data) as Array<MonitoredApplication>;
      this.context.service.refreshAllApplications(apps);
    }
  }
}