Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Eine eigene VIS mit Angular

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Eine eigene VIS mit Angular

    This topic has been deleted. Only users with topic management privileges can see it.
    • W
      weggetor Developer last edited by

      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!

      ? 1 Reply Last reply Reply Quote 0
      • ?
        A Former User @weggetor last edited by

        @weggetor sagte in Eine eigene VIS mit Angular:

        Danke schon mal im vorraus!

        Moin,

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

        VG
        Bernd

        W 1 Reply Last reply Reply Quote 0
        • W
          weggetor Developer @Guest last edited by

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

          ? 1 Reply Last reply Reply Quote 0
          • ?
            A Former User @weggetor last edited by A Former User

            @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

            • www.pluralsight.com/guides/conceptualizing-the-purpose-of-an-angular-module
            • github.com/ffalt/hookayunterliegt Lizenz (MIT)
            • github.com/khelilAppinio/m4dti_client_angular_for_test
            • www.telerik.com/blogs/building-a-data-visualization-dashboard-kendo-ui-angular-socket-io
            • developer.okta.com/blog/2018/11/30/web-app-with-express-angular-graphql


            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.


            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.

            VG
            Bernd
            1 Reply Last reply Reply Quote 0
            • First post
              Last post

            Support us

            ioBroker
            Community Adapters
            Donate

            766
            Online

            31.9k
            Users

            80.2k
            Topics

            1.3m
            Posts

            2
            4
            349
            Loading More Posts
            • Oldest to Newest
            • Newest to Oldest
            • Most Votes
            Reply
            • Reply as topic
            Log in to reply
            Community
            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
            The ioBroker Community 2014-2023
            logo