Tablet UI auf PHP-Server funktioniert nicht richtig

[Matthias1912]

Hallo, bin neu hier und hoffe ihr könnt mir helfen.

Ich habe Fhem auf dem Pi3 laufen und wollte das Tablet UI auf dem php Server im Pi laufen lassen.
Das Demo UI wird schon soweit angezeigt, allerdings bekomme ich folgenden Fehler in einer roten Popup Box angezeigt:

Error
ShortPoll Request Failed, will retry in 3s
parsererror, SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Wie kann ich dieses Problem lösen und was löst es aus?

Meine Schritte:

Code Auswählen Erweitern


Tablet UI in FHEM downloaden:
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
shutdown restart
update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt
shutdown restart

Tablet UI per SSH auf den PHP Server kopieren:
sudo cp -avr /opt/fhem/www/tablet /var/www/html/fhem/ftui

pgm2 aus Fhem im PHP Verzeichnis linken
cd /var/www/html/fhem
sudo ln -s /opt/fhem/www/pgm2/ .
Muss ich hier noch ein anderes Verzeichnis aus fhem/www linken?

In FHEM Gerät anlegen:
define TABLETUI HTTPSRV ftui/ /var/www/html/fhem/ftui Tablet-UI

Tablet UI per Browser aufrufen:
http://IP_des_Pi/fhem/ftui/index-example.html


[Matthias1912]

So ich habe die Konfiguration noch einmal geändert.

Habe das Tablet UI jetzt wie empfohlen in /opt/fhem/www/tablet installiert und das device neu in fhem deklariert:

Code Auswählen Erweitern


define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI


Für den Apache habe ich einfach das ganze www Verzeichnis von fhem verlinkt

Code Auswählen Erweitern


sudo mkdir /var/www/html/fhem
cd /var/www/html/fhem
sudo ln -s /opt/fhem/www/ .


Somit kann ich ftui wie folgt aufrufen: http://Pi_IP/fhem/www/tablet/index.html

Ich bekomme allerdings immernoch nen Fehler: ShortPoll Request Failed (siehe Bild)

Wie bekomme ich diesen Fehler weg?

[setstate]

Du musst im HTML Header folgenden Tag einfügen und die URL entsprechend anpassen

Code Auswählen Erweitern

<meta name="fhemweb_url" content="/fhem/">

[CoolTux]

Was ich nicht verstehe. Wenn Du sowieso den Apache verwendest, wieso dann noch in FHEM eine HTTP Server Instanz definieren?

[Matthias1912]

Hi danke für die Antworten, es hat aber leider nicht funktioniert bzw. mache ich vielleicht was falsch?
Habe folgendes unter allen anderen meta daten in den html file eingefügt:

<meta name="https://192.168.2.109:8083/fhem" content="/fhem/">

Wie sieht es eigentlich mit den basicAuth Daten aus? Muss ich auch noch user:pw@ zu beginn mit einfügen?

Zu der Frage wegen dem Apache. Ich lasse auf dem Apache/PHP Server (Raspberry Pi 3) auch noch andere Skripte laufen.
Ich persönlich würde es sogar bevorzugen, wenn ich FHEM und Tablet UI auf meinem Apache laufen lassen kann, da ich für das Tablet UI auch gern PHP zum programmieren verwenden möchte.
Wenn ihr mir sagen könntet wie ich FHEM und Tablet UI so modifizieren kann, das es komplett auf meinem Apache in /var/www/html/fhem laufen würde, so das ich für das Tablet UI PHP verwenden kann, wäre ich euch sehr dankbar.

[klausw]

Ich habe das wie folgt gelöst:

fhem läuft bei mir ohne tls und login auf Port 8082 und auf dem selben System wie der Apache
HTTPS macht dann der Apache

- Proxy für FHEM im Apache definieren (incl. login):

Code Auswählen Erweitern

<Location /fhem>
  # ProxyPass/ProxyPassReverse leitet HTTP requests auf eine andere URL um
  ProxyPass http://localhost:8082/fhem
  ProxyPassReverse http://localhost:8082/fhem
  # ProxyHTMLURLMap passt Links im HTML/JavaScript Source an
  ProxyHTMLURLMap /        /fhem/
  ProxyHTMLURLMap /fhem/     /fhem/
  AuthType Basic
  AuthName "Password Required"
  AuthUserFile /etc/fhem-htpasswd
  Require valid-user
  Order deny,allow
  Allow from all
</Location>

jetzt sollte schon einmal fhem unter http(s)://<deinserver>/fhem erreichbar sein.

- /opt/fhem/www/tablet (und auch die benötigten Dateien aus pgm2) nach /var/www/html/tablet (oder wie auch immer) kopieren bzw. einen link erstellen

- deine html Dateien anpassen
<meta name="fhemweb_url" content="/fhem">
(fhemweb_url nicht verändern)
alle links zu css und js Dateien anpassen (link sollte relativ zum speicherort deiner html Datei sein)

[Matthias1912]

Hi, danke für die Antwort, leider funktioniert es immernoch nicht.
Bin langsam am verzweifeln.

Also ich schreib jetzt mal wie ich alles momentan habe:
Ich habe jetzt https von FHEM komplett deaktiviert und zu testzwecken FHEM basicAuth für WEB, WEBphone und WEBtablet jeweils auf User: fhem und PW: fhem gelegt
WEB läuft auf Port 8083
WEBphone auf 8084
WEBtablet auf 8085

Fhem läuft und funktioniert super mit meinen Homematic Teilen und kann local über http://192.168.2.109:8083/fhem erreicht werden.

Das Tablet UI ist auch installiert und läuft local über http://192.168.2.109:8083/fhem/tablet/index.html (allerdings hier ohne php Unterstützung)
Die html Dateien sowie mein php Testfile für das Tablet UI liegen in /opt/fhem/www/tablet/

Für den Apache habe das www Verzeichnis von FHEM komplett unter dem selben Namen ins Apache Verzeichnis verlinkt

Code Auswählen Erweitern


sudo ln -s /opt/fhem/www/ /var/www/html/fhem

Somit erreiche ich das Tablet UI auch local über den Apache http://192.168.2.109/fhem/tablet/index.html (hier über den apache mit php Unterstützung), allerdings habe ich hier die JSON Fehler und es geht halt nix.

Dann habe ich in meine index.html folgendes eingefügt:

Code Auswählen Erweitern


<meta name="fhemweb_url" content="/fhem">


per SSH habe ich dann die Module installiert und deinen Code eingefügt, allerdings mit der Änderung auf Port 8083

Code Auswählen Erweitern


sudo apt-get install libapache2-mod-proxy-html
sudo a2enmod proxy
sudo a2enmod proxy_http

sudo nano /etc/apache2/conf-available/fhem.conf
<Location /fhem>
  # ProxyPass/ProxyPassReverse leitet HTTP requests auf eine andere URL um
  ProxyPass http://localhost:8083/fhem
  ProxyPassReverse http://localhost:8083/fhem
  # ProxyHTMLURLMap passt Links im HTML/JavaScript Source an
  ProxyHTMLURLMap / /fhem/
  ProxyHTMLURLMap /fhem/ /fhem/
  AuthType Basic
  AuthName "Password Required"
  AuthUserFile /etc/fhem-htpasswd
  Require valid-user
  Order deny,allow
  Allow from all
</Location>


dann noch den Benutzer fhem:fhem angelegt:

Code Auswählen Erweitern


sudo htpasswd -c -s /etc/fhem-htpasswd fhem


Jetzt habe ich das ganze System einfach mal neu gestart und versucht FHEM über
http://192.168.2.109/fhem
bzw. das Tablet UI über
http://192.168.2.109/fhem/tablet/index.html
zu erreichen.

Also FHEM konnte ich damit nicht erreichen. Das Tablet UI ging ja schon unter der Adresse, allerdings kommt immernoch der JSON.parse Error und somit auch keine Werte.

Hui, is ganz schön viel Text geworden 
Ich hoffe ihr könnt mir sagen wo mein Fehler liegt.

[redlav]

Hallo,

ich nutze auch einen lokalen Apache + PHP und habe folgendes in der Config eingetragen:

Code Auswählen Erweitern

<Location /fhem>
  # ProxyPass/ProxyPassReverse leitet HTTP requests auf eine andere URL um
  ProxyPass http://localhost:8084/fhem
  ProxyPassReverse http://localhost:8084/fhem
  # ProxyHTMLURLMap passt Links im HTML/JavaScript Source an
  Allow from all
</Location>

Ich nutze deshalb die Webinstanz mit Port 8084, weil ich dort Cors=1 gesetzt habe.  Kann mich nicht mehr daran erinnern,
was der Fehler war es hat aber auf jeden Fall mit diesem Attribut dann funktioniert.

Meine php-Dateien liegen unter /var/www/tablet. Der Aufruf erfolgt mit http://<server>/tablet/index.php
Soweit die Info, dass es bei mir (nur http) läuft

Was genau sagt den dein parse-Error? Kannst du mal in den Entwicklertools (F12) des Browsers in die Konsole gucken und die
Fehlermeldung posten?

Gruß Norbert

[Matthias1912]

Moin,

so habe das auch probiert, funktioniert aber auch nicht.
Was macht dieses Cors eigentlich?

Müssen die Proxy Daten eigentlich in /etc/apache2/conf-available/fhem.conf eingetragen werden?
Muss diese conf dann noch irgendwo geladen werden, oder macht das der Apache von selbst.

In der Browser Console kommt folgendes

Code Auswählen Erweitern


start shortpoll  fhem-tablet-ui.js:1288:13
get jsonlist2: Timer gestartetfhem-tablet-ui.js:515
start shortpoll in (ms):30000  fhem-tablet-ui.js:1288:13
shortPoll request failed: parsererror, SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data  fhem-tablet-ui.js:1288:13
start shortpoll in (ms):3000  fhem-tablet-ui.js:1288:13
start shortpoll  fhem-tablet-ui.js:1288:13
.....


Also langsam glaub ich das der Eintrag in der Tablet UI Wiki von wenig in nervig viel geändert werden sollte

... Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben ...

Hat noch jemand ne Idee wie ich das Tablet UI auf dem Apache/PHP Server zum laufen bekomme?

[CoolTux]

Ich nicht, aber andere dessen Vorschläge man hier im Forum findet

https://forum.fhem.de/index.php/topic,55132.msg470924.html#msg470924
https://forum.fhem.de/index.php/topic,62483.msg539049.html#msg539049


Hier ist ein Beispiel für NGINX
https://forum.fhem.de/index.php/topic,51235.msg428936.html#msg428936

[redlav]

Ich habe die genannten Zeilen in der /etc/apache2/conf-available/fhem.conf stehen.

Habe jetzt nochmal alles durchsucht und habe in der /etc/apache2/sites-available/000-default.conf
noch die folgenden Zeilen gefunden:

Code Auswählen Erweitern

<VirtualHost *:80>
<Location /fhem>
  # ProxyPass/ProxyPassReverse leitet HTTP requests auf eine andere URL um
  ProxyPass  http://192.168.1.59:8084/fhem
  ProxyPassReverse  http://192.168.1.59:8084/fhem
  # ProxyHTMLEnable On
  # ProxyHTMLURLMap passt Links im HTML/JavaScript Source an
  ProxyHTMLURLMap /        /fhem/
  ProxyHTMLURLMap /fhem/     /fhem/
  Require all granted
</Location>
</VirtualHost>

Ich muss zugeben, das ich damals das ganze per try & error solange probiert habe bis es ging.
Ein wirklicher Apachenhäuptling bin ich aber nicht 

Cors: https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

[CoolTux]

Und hast Du die available Seite auch aktiviert?

[redlav]

Und hast Du die available Seite auch aktiviert?

Wenn ich die apache2.conf richtig verstehe passiert das automatisch:

Code Auswählen Erweitern

# Include generic snippets of statements
IncludeOptional conf-enabled/*.conf
# Include the virtual host configurations:
IncludeOptional sites-enabled/*.conf

[CoolTux]

Nein. Du musst das erst noch aktivieren.
Aber sowas sieht man ja auch ganz gut im Logfile von Apache

[Matthias1912]

Und wie aktiviere ich jetzt die fhem.conf, einfach einen link im conf-enabled erstellen?

Code Auswählen Erweitern


sudo ln -s /etc/apache2/conf-available/fhem.conf /etc/apache2/conf-enabled/fhem.conf