[Solved] Benutze Socket.io Adapter in React App

[Samuel Assmann 0]

Hi,
ich bin relativ neu dabei und habe eine zweite Anwendung (React) außerhalb von ioBroker die einige States benötigt und diese auch schreiben möchte. Bisher habe ich es mit einem Poll Intervall über den API Adapter gemacht. Jedoch habe ich nun den Websocket Adapter entdeckt und dachte ich könnte ihn nutzen.

Habe das Beispiel im Repo (Github ioBroker.socket.io) gefunden und auch zum laufen bekommen (als eigenständige index.html außerhalb von React), jedoch scheint das von ioBroker bereitgestellte Socket.io Script nicht mit der React Komponente zu Socket.io benutzbar zu sein. Gibt es eine einfache Lösung um den Websocket zu benutzen und nicht alles selbst schreiben zu müssen was in der conn.js im Beispiel drin steht?

Vielen Dank.

[Homoran]

@samuel-assmann-0 Ich hab von der ganzen Sache keine Ahnung, aber es gibt einen neuen Adapter: iobroker.ws

[Samuel Assmann 0]

@homoran vielen Dank für die Info ich werde es mir mal genauer angucken.

[AlCalzone]

@samuel-assmann-0 Ich bin mir zwar nicht sicher, was du mit

der React Komponente zu Socket.io

meinst, aber es gibt ne einfache Lösung, die auch funktioniert: Nutze https://github.com/ioBroker/socket-client/

Meines Wissens sowohl mit dem im web-Adapter eingebauten Socket, als auch mit socket.io und dem ws-Adapter.

Und hier kannst du dir sicher auch ein bisschen was abschauen: https://github.com/AlCalzone/iobroker-react/blob/654698e2ff6fc8f0de1f466640417d28fb235e4f/src/lib/app/IoBrokerApp.tsx#L68-L90

oder direkt auf die IoBrokerApp-Komponente setzen:
https://alcalzone.github.io/iobroker-react/#/

[Samuel Assmann 0]

@alcalzone leider hat mir der Socket Client in meinem React Frontend nichts gebracht da ich das dafür benötigte Script in einer React App nicht einbinden kann. Leider ist auch der ioBroker Adapter zu Socket.io zu schlecht documentiert als das es möglich wäre mit der offiziellen Docu eine Verbindung aufzubauen.

[AlCalzone]

@samuel-assmann-0 sagte in Benutze Socket.io Adapter in React App:

das dafür benötigte Script in einer React App nicht einbinden kann

Meines Wissens soll die nicht eingebunden werden, sondern direkt vom Server geladen. Welcher Pfad das beim socket.io ist, kann ich dir aus dem Kopf aber nicht sagen. Ich selbst nutze den iobroker.web als Gegenstelle, der das entsprechende Skript ausliefert.

Ich frag mal nach, wie das beim socket.io gedacht ist.

[AlCalzone]

@samuel-assmann-0 Gerade nochmal gecheckt... Der socket.io-Adapter liefert unter dem Pfad socket.io/socket.io.js eine kompatible Library aus. Das oben genannte socket-client ist ein Wrapper darum.

Du musst also in deiner Anwendung zusätzlich das folgende Skript laden (Platzhalter ersetzen):

http(s)://<hostname>:<socket-io-port>/socket.io/socket.io.js

Dann sollte das in deiner Anwendung enthaltene socket-client eine Verbindung herstellen.

Siehe z.b. hier
https://github.com/AlCalzone/ioBroker.zwave2/blob/c77bfb1b9be77f1fab2ccdbdfa3e13ed1d1284e2/admin/index_m.html#L5-L8
das ist zwar für web, funktioniert aber genauso.