v3.18.0

README.md

@@ -35,12 +35,13 @@ Kopiert einfach alle Dateien und Unterverzeichnisse aus dem Ordner [www/fhemapp]
 Die Grundkonfiguration von **FHEMApp** befindet sich in der Datei `config.json` im Verzeichnis `.../fhemapp/cfg`. In dieser können bei Bedarf Anpassungen vorgenommen werden. Dies ist insbesondere wichtig, wenn ihr **FHEMApp** auf einem separaten Webserver installiert. Die Konfigurationsdatei könnt ihr über einen normalen Texteditor bearbeiten, um die folgenden Einstellungen zu verändern.
 
 ### Verbindungseinstellung für FHEM (optional)
-Wenn ihr **FHEMApp** unter *opt/fhem/www/fhemapp* abgelegt habt, müssen keine Verbindungseinstellungen in der `config.json` hinterlegt werden. Solltet ihr **FHEMApp** auf einem separaten Webserver (z.B. apache) betreiben, dann sind diese Angaben notwendig. Das folgende Beispiel zeigt die Verbindungseinstellungen für eine Standard FHEM-Installation.
+Wenn ihr **FHEMApp** unter *opt/fhem/www/fhemapp* abgelegt habt, müssen keine Verbindungseinstellungen in der `config.json` hinterlegt werden. Einige Browser stellen keine websocket Verbindung zu FHEM her. In diesem Fall kann der Verbindungstyp über den Parameter `type` auf `longpoll` geändert werden. Solltet ihr **FHEMApp** auf einem separaten Webserver (z.B. apache) betreiben, dann sind die Angaben `location`, `port` und `path` notwendig. Das folgende Beispiel zeigt die Verbindungseinstellungen für eine Standard FHEM-Installation.
 ```
 "connection": {
   "location": "http://fhem",
   "port": "8083",
-  "path": "fhem"
+  "path": "fhem",
+  "type": "websocket"
 },
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhemapp",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "private": true,
   "author": "jemu75",
   "scripts": {

src/plugins/fhem.js

@@ -8,9 +8,11 @@ class Fhem extends EventEmitter {
       connection: {
         location: window.location.protocol + '//' + window.location.hostname,
         port: window.location.port,
-        path: 'fhem' //root path
+        path: 'fhem', //root path
+        type: 'websocket' // default connection type
       },
-      socket: null,
+      conn: null, // WebSocket or XMLHttpRequest Object
+      connOffset: 0,
       session: {
         connect: false,
         ready: false,
@@ -670,9 +672,20 @@ class Fhem extends EventEmitter {
     return result;
   }
 
-  // subFunction: calls after websockt message
+  // subFunction: calls after message from FHEM-Server
   doUpdate(message) {
-    let lines = message.data.split('\n');
+    let lines = [];
+
+    if(this.app.connection.type === 'websocket') {
+      lines = message.data.split('\n');
+    } else {
+      let response = this.app.conn.responseText;
+
+      if(response && response.slice(-2).match(']')) {
+        lines = response.substr(this.app.connOffset, response.length - this.app.connOffset).split('\n');
+        this.app.connOffset = response.length;
+      }
+    }
 
     for(const line of lines) {
       if(line.length > 0)  {
@@ -721,8 +734,8 @@ class Fhem extends EventEmitter {
     }
   }
 
-  // subFunction: calls after websocket is opened
-  async wsOpen() {
+  // subFunction: calls after Connection is opened
+  async connOpen() {
     this.app.session.connect = true;
     this.app.session.restartCnt = 0;
 
@@ -734,12 +747,12 @@ class Fhem extends EventEmitter {
     this.loadStructure();
   }
 
-  // subFunction: calls after websocket is closed
-  async wsClose(evt) {
+  // subFunction: calls after connection was closed
+  async connClose(evt) {
     this.app.session.connect = false;
     this.app.session.csrf = null;
     this.app.session.ready = false;
-    this.app.session.socket = null;
+    this.app.conn = null;
 
     if(!this.app.session.restart) {
       let msecs = this.app.session.restartCnt == 0 ? 1 : 3000;
@@ -748,42 +761,40 @@ class Fhem extends EventEmitter {
       setTimeout(() => {
         this.app.session.restart = false;
         this.app.session.restartCnt ++;
-        this.wsStart()
+        this.connStart()
       }, msecs);
 
       let meta = {
-        info: 'Websocket was closed.',
-        errCode: evt.code,
-        readyState: this.app.socket.readyState
-      }
+        info: 'Connection (' + this.app.connection.type + ') ' + (evt ? 'failed.' : 'was closed.'),
+        errCode: evt.errCode || ''
+      };
 
       this.log({ lvl: 2, msg: 'Connection with FHEM was closed. Try to Reconnect in ' + (msecs / 1000) + ' seconds...', meta: meta })
       this.loading = false;
     }
   }
 
-  // coreFuntion: open a websocket to FHEM-Server
-  async wsStart() {
+  // coreFunction: open a Connection to FHEM-Server
+  async connStart() {
     let params = [ { param: 'inform', value: 'type=status;filter=.*;fmt=JSON' }, { param: 'XHR', value: '1' } ];
-    let url = this.createURL(params).replace(/^http/i,'ws');
-
-    this.app.socket = new WebSocket(url);
-    this.app.socket.onopen = () => this.wsOpen();
-    this.app.socket.onmessage = (message) => this.doUpdate(message);
-    this.app.socket.onclose = (evt) => this.wsClose(evt);
-
-    /*
-    let pollConn = new XMLHttpRequest();
-    pollConn.open("GET", this.createURL(params), true);
-    if(pollConn.overrideMimeType)    // Win 8.1, #66004
-      pollConn.overrideMimeType("application/json");
-    pollConn.onreadystatechange = () => {
-      let lines = pollConn.responseText.split('\n');
-      console.log(lines);
+    let url = this.createURL(params);
+
+    if(this.app.connection.type === 'websocket') {
+      this.app.conn = new WebSocket(url.replace(/^http/i,'ws'));
+      this.app.conn.onopen = () => this.connOpen();
+      this.app.conn.onmessage = (message) => this.doUpdate(message);
+      this.app.conn.onclose = () => this.connClose();
+      this.app.conn.onerror = (err) => this.connClose(err);
+    } else {
+      this.app.conn = new XMLHttpRequest();
+      this.app.conn.open("GET", url, true);
+      this.app.conn.onreadystatechange = () => {
+        if(this.app.conn.status === 200 && this.app.conn.readyState === 2) this.connOpen();
+        if(this.app.conn.status === 200 && this.app.conn.readyState === 3) this.doUpdate();
+      }
+      this.app.conn.onerror = (err) => this.connClose(err);
+      this.app.conn.send();
     }
-    pollConn.send(null);
-    */
-
   }
 
   // subFunction: set the actual timestamp for menubar
@@ -801,7 +812,7 @@ class Fhem extends EventEmitter {
     this.loading = true;
 
     await this.readConfig('./cfg/config.json');
-    this.wsStart();
+    this.connStart();
 
     if(vuetify && this.app.theme) {
       if(this.app.theme.dark != -1) Object.assign(vuetify.framework.theme, { dark: this.app.theme.dark })

www/fhemapp/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="icon" href="favicon.png"><link rel="apple-touch-icon" href="apple-touch-icon.png"><title>fhemapp</title><link href="css/chunk-03454508.55c011d2.css" rel="prefetch"><link href="css/chunk-0c5af406.081c6f8a.css" rel="prefetch"><link href="css/chunk-12e7f05c.803d1e0c.css" rel="prefetch"><link href="css/chunk-1444c05b.460ac60a.css" rel="prefetch"><link href="css/chunk-15fa718e.55c011d2.css" rel="prefetch"><link href="css/chunk-325da004.d6669d5e.css" rel="prefetch"><link href="css/chunk-3f927a46.5748bcdf.css" rel="prefetch"><link href="css/chunk-4afc494e.565fad0d.css" rel="prefetch"><link href="css/chunk-5431abb0.c25d033e.css" rel="prefetch"><link href="css/chunk-97aef864.ab3894ae.css" rel="prefetch"><link href="css/chunk-f4627bcc.960cfd96.css" rel="prefetch"><link href="css/chunk-f50a30ec.564db786.css" rel="prefetch"><link href="js/chunk-03454508.94b22464.js" rel="prefetch"><link href="js/chunk-0c5af406.8ee57f1a.js" rel="prefetch"><link href="js/chunk-12e7f05c.19ea5393.js" rel="prefetch"><link href="js/chunk-1444c05b.61a95841.js" rel="prefetch"><link href="js/chunk-15fa718e.8e403831.js" rel="prefetch"><link href="js/chunk-21b07e80.58d01134.js" rel="prefetch"><link href="js/chunk-2d212bf1.05923723.js" rel="prefetch"><link href="js/chunk-2d22937e.a4bfc1c6.js" rel="prefetch"><link href="js/chunk-2d22d812.b8e39b67.js" rel="prefetch"><link href="js/chunk-325da004.d74d4e89.js" rel="prefetch"><link href="js/chunk-3f927a46.5bd9464d.js" rel="prefetch"><link href="js/chunk-4afc494e.615d8c27.js" rel="prefetch"><link href="js/chunk-5431abb0.be96376e.js" rel="prefetch"><link href="js/chunk-97aef864.913bc4f2.js" rel="prefetch"><link href="js/chunk-f4627bcc.d0b9bd7b.js" rel="prefetch"><link href="js/chunk-f50a30ec.9bf5abba.js" rel="prefetch"><link href="css/app.27c949a3.css" rel="preload" as="style"><link href="css/chunk-vendors.95431e8e.css" rel="preload" as="style"><link href="js/app.859a785e.js" rel="preload" as="script"><link href="js/chunk-vendors.b9a283db.js" rel="preload" as="script"><link href="css/chunk-vendors.95431e8e.css" rel="stylesheet"><link href="css/app.27c949a3.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but fhemapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.b9a283db.js"></script><script src="js/app.859a785e.js"></script></body></html>
+<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="icon" href="favicon.png"><link rel="apple-touch-icon" href="apple-touch-icon.png"><title>fhemapp</title><link href="css/chunk-03454508.55c011d2.css" rel="prefetch"><link href="css/chunk-0c5af406.081c6f8a.css" rel="prefetch"><link href="css/chunk-12e7f05c.803d1e0c.css" rel="prefetch"><link href="css/chunk-1444c05b.460ac60a.css" rel="prefetch"><link href="css/chunk-15fa718e.55c011d2.css" rel="prefetch"><link href="css/chunk-325da004.d6669d5e.css" rel="prefetch"><link href="css/chunk-3f927a46.5748bcdf.css" rel="prefetch"><link href="css/chunk-4afc494e.565fad0d.css" rel="prefetch"><link href="css/chunk-5431abb0.c25d033e.css" rel="prefetch"><link href="css/chunk-97aef864.ab3894ae.css" rel="prefetch"><link href="css/chunk-f4627bcc.960cfd96.css" rel="prefetch"><link href="css/chunk-f50a30ec.564db786.css" rel="prefetch"><link href="js/chunk-03454508.94b22464.js" rel="prefetch"><link href="js/chunk-0c5af406.8ee57f1a.js" rel="prefetch"><link href="js/chunk-12e7f05c.19ea5393.js" rel="prefetch"><link href="js/chunk-1444c05b.61a95841.js" rel="prefetch"><link href="js/chunk-15fa718e.8e403831.js" rel="prefetch"><link href="js/chunk-21b07e80.58d01134.js" rel="prefetch"><link href="js/chunk-2d212bf1.05923723.js" rel="prefetch"><link href="js/chunk-2d22937e.a4bfc1c6.js" rel="prefetch"><link href="js/chunk-2d22d812.b8e39b67.js" rel="prefetch"><link href="js/chunk-325da004.d74d4e89.js" rel="prefetch"><link href="js/chunk-3f927a46.5bd9464d.js" rel="prefetch"><link href="js/chunk-4afc494e.615d8c27.js" rel="prefetch"><link href="js/chunk-5431abb0.be96376e.js" rel="prefetch"><link href="js/chunk-97aef864.913bc4f2.js" rel="prefetch"><link href="js/chunk-f4627bcc.d0b9bd7b.js" rel="prefetch"><link href="js/chunk-f50a30ec.9bf5abba.js" rel="prefetch"><link href="css/app.27c949a3.css" rel="preload" as="style"><link href="css/chunk-vendors.95431e8e.css" rel="preload" as="style"><link href="js/app.e700a910.js" rel="preload" as="script"><link href="js/chunk-vendors.b9a283db.js" rel="preload" as="script"><link href="css/chunk-vendors.95431e8e.css" rel="stylesheet"><link href="css/app.27c949a3.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but fhemapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.b9a283db.js"></script><script src="js/app.e700a910.js"></script></body></html>