Eine eigene VIS mit Angular

weggetor

Hallo Ihr,

ich würde gerne eine eigen VIS-Oberfläche mit Angular bauen - also nicht auf eine fertige Visualisierung zurückgreifen.

Was mir fehlt ist die Anbindung an den IOBroker mit socket.io bzw. ws.io. Es gibt im Netz einige Anleitungen / Codebeispiele aber die sind alle schon recht alt (zB. https://github.com/thm-mni-ii/NgxMatIoBrokerConnectorService mit Angular 8 (aktuell sind wir bei 16 und der Code ist nicht kompatibel)).

Hat einer von euch da vielleicht ein Projekt auf dem ich aufbauen könnte ? Wie gesagt, geht mir in erster Linie um die Socket-Kommunikation, am liebsten mit aktuellen Typescript.

Danke schon mal im vorraus!

? Offline

@weggetor sagte in Eine eigene VIS mit Angular:

Danke schon mal im vorraus!

Moin,

so was?
https://socket.io/docs/v4/typescript/

VG
Bernd

weggetor

@dp20eic
Jein... Ich dachte mehr so an ein Rumpf-Angular-Projekt wie die wichtigen socket-Methoden (connect, getState etc. schon implementiert sind)

? Offline

@weggetor sagte in Eine eigene VIS mit Angular:

@dp20eic
Jein... Ich dachte mehr so an ein Rumpf-Angular-Projekt wie die wichtigen socket-Methoden (connect, getState etc. schon implementiert sind)

Moin,

ich bin kein Programmierer, kann über die Qualität nichts sagen, aber ich habe mal Bard gefragt, geht sicherlich auch über ChatGPT

Erstellen eines Angular-Projekts

Zuerst erstellen wir ein neues Angular-Projekt mit dem Befehl ng new socket-demo.

ng new socket-demo

Dadurch wird ein neues Verzeichnis mit dem Namen socket-demo erstellt, das das Projekt enthält.

Installieren des ngx-socket-io-Pakets

Als nächstes installieren wir das ngx-socket-io-Paket, das die Socket.IO-Bibliothek für Angular bereitstellt.

npm install ngx-socket-io --save

Konfigurieren der Socket.IO-Module

Um Socket.IO in unserem Projekt zu verwenden, müssen wir das SocketIoModule und das HttpClientModule in die AppModule importieren.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SocketIoModule } from 'ngx-socket-io';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SocketIoModule.forRoot(),
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Implementieren der Socket-Methoden

In unserem Beispiel verwenden wir die folgenden Socket-Methoden:

connect(): Verbindet den Client mit dem Socket-Server.
getState(): Ruft den aktuellen Zustand des Socket-Servers ab.
emit(): Emitiert ein Event an den Socket-Server.

import { Component, OnInit } from '@angular/core';
import { Socket } from 'ngx-socket-io';

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

  socket: Socket;

  constructor(private socketService: Socket) {}

  ngOnInit() {
    this.socket = this.socketService.connect();
  }

  connect() {
    this.socket.connect();
  }

  getState() {
    return this.socket.getState();
  }

  emit() {
    this.socket.emit('my-event', {
      data: 'Hello, world!'
    });
  }

}

Implementieren des HTML- und CSS-Codes

In unserem Beispiel verwenden wir den folgenden HTML- und CSS-Code, um die Socket-Methoden zu verwenden.

HTML

<h1>Socket.IO Demo</h1>
<button (click)="connect()">Connect</button>
<p>{{getState()}}</p>
<button (click)="emit()">Emit</button>

!!!Verwende Code mit Vorsicht. Weitere Informationen!!!

CSS

h1 {
  font-size: 24px;
}

button {
  margin-bottom: 10px;
}

Verwende Code mit Vorsicht. Weitere Informationen
Ausführen des Projekts

Um das Projekt auszuführen, verwenden wir den Befehl ng serve.

ng serve

Dadurch wird das Projekt auf http://localhost:4200 gestartet.

Ausgabe

Wenn wir das Projekt öffnen, sehen wir den folgenden Text:

Socket.IO Demo
Connect

Wenn wir auf die Schaltfläche "Connect" klicken, wird der Client mit dem Socket-Server verbunden.

Socket.IO Demo
Connected

Wenn wir auf die Schaltfläche "Get State" klicken, wird der aktuelle Zustand des Socket-Servers abgerufen.

Socket.IO Demo
Connected
{
  connected: true
}

Wenn wir auf die Schaltfläche "Emit" klicken, wird ein Event an den Socket-Server emittiert.

Socket.IO Demo
Connected
{
  connected: true
}
Hello, world!

Erweiterung des Beispiels

In diesem Beispiel haben wir nur die grundlegenden Socket-Methoden implementiert. Um das Beispiel zu erweitern, können wir folgende Dinge tun:

Erweiterte Socket-Methoden implementieren: Neben den grundlegenden Socket
Quellen

In Ordnung, hier ist ein Angular Projekt mit den Socket-Methoden connect, getState usw. enthalten:

Server-Code

Zuerst erstellen wir einen Server, mit dem wir die Socket-Verbindungen verwalten können. Dazu verwenden wir den Node.js-Webserver Express und das Socket.IO-Framework.

const express = require("express");
const socketio = require("socket.io");

const app = express();
const server = app.listen(3000);

const io = socketio(server);

io.on("connection", (socket) => {
  console.log("Ein neuer Client hat sich verbunden");

  // Socket verbinden
  socket.connect();

  // Socket-Status abfragen
  socket.on("getState", () => {
    socket.emit("state", {
      connected: true,
    });
  });

  // Socket-Nachricht senden
  socket.emit("message", "Hallo Welt!");
});

Dieser Server erstellt einen Socket.IO-Server auf dem Port 3000. Wenn sich ein Client mit dem Server verbindet, wird der connect()-Handler aufgerufen. In diesem Handler wird der Socket verbunden und der getState()-Handler abonniert. Der getState()-Handler wird aufgerufen, wenn der Client den getState-Event empfängt. In diesem Handler wird der aktuelle Socket-Status zurückgegeben.

Client-Code

Um mit dem Server zu kommunizieren, erstellen wir einen Angular-Client. Dazu verwenden wir das ngx-socket-io-Modul.

npm install @ngx-socket-io/client

In unserer App-Komponente importieren wir das Socket-Service und konfigurieren es mit der URL des Socket-Servers.

import { Component, OnInit } from "@angular/core";
import { Socket } from "@ngx-socket-io/client";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  constructor(private socket: Socket) {}

  ngOnInit() {
    this.socket.connect();
  }
}

In der ngOnInit()-Methode verbinden wir den Socket mit dem Server.

Um den Socket-Status abzufragen, verwenden wir den getState()-Methode.

import { Component, OnInit } from "@angular/core";
import { Socket } from "@ngx-socket-io/client";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  constructor(private socket: Socket) {}

  ngOnInit() {
    this.socket.connect();

    // Socket-Status abfragen
    this.socket.getState().subscribe((state) => {
      console.log("Socket-Status:", state);
    });
  }
}

Dieser Code abonniert das getState()-Event und gibt den empfangenen Status in die Konsole aus.

Beispiel-Ausgabe

Socket-Status: { connected: true }

Fertigstellung

Um das Projekt zu testen, starten wir den Server mit dem Befehl node server.js. Anschließend starten wir den Client mit dem Befehl ng serve.

Wenn wir die App öffnen, sollte der Socket-Status in der Konsole ausgegeben werden.

Verbesserungen

Dieses Projekt ist nur ein einfaches Beispiel für die Verwendung von Socket.IO in Angular. Es gibt noch viele weitere Möglichkeiten, die Socket-Methoden zu verwenden. Zum Beispiel können wir den Socket verwenden, um Nachrichten zwischen Clients zu senden oder um Daten von einem Server abzurufen.

Hier sind einige Beispiele für Verbesserungen:

Socket-Nachrichten senden: Wir können den Socket verwenden, um Nachrichten zwischen Clients zu senden. Dazu verwenden wir die emit()-Methode.
Daten von einem Server abrufen: Wir können den Socket verwenden, um Daten von einem Server abzurufen. Dazu verwenden wir die on()-Methode, um den gewünschten Event zu abonnieren.
Socket-Sicherheit: Wir sollten die Socket-Verbindungen sichern, um sie vor unbefugtem Zugriff zu schützen. Dazu können wir TLS/SSL verwenden.