Merge pull request #284 from 67P/feature/dynamic_sockethub_loading

Load Sockethub dynamically, inform when unavailable
67P · Mar 7, 2022 · 62b065b · 62b065b
2 parents fdc867f + 348443e
commit 62b065b
Show file tree

Hide file tree

Showing 17 changed files with 144 additions and 59 deletions.
diff --git a/app/components/date-headline/component.js b/app/components/date-headline/component.js
@@ -1,9 +1,9 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { later } from '@ember/runloop';
 import { tracked } from '@glimmer/tracking';
 import moment from 'moment';
-import config from '../../config/environment';
-import { action } from '@ember/object';
+import config from 'hyperchannel/config/environment';
 
 export default class DateHeadlineComponent extends Component {
 

diff --git a/app/index.html b/app/index.html
@@ -17,8 +17,6 @@
   <body>
     {{content-for "body"}}
 
-    {{content-for "sockethub-assets"}}
-
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/hyperchannel.js"></script>
 

diff --git a/app/initializers/sockethub.js b/app/initializers/sockethub.js
diff --git a/app/router.js b/app/router.js
@@ -15,4 +15,5 @@ Router.map(function() {
 
   this.route('welcome');
   this.route('add-account', function() {});
+  this.route('configure-sockethub');
 });
diff --git a/app/routes/application.js b/app/routes/application.js
@@ -5,6 +5,7 @@ import { isPresent } from '@ember/utils';
 export default class ApplicationRoute extends Route {
 
   @service('remotestorage') storage;
+  @service sockethub;
   @service localData;
   @service logger;
   @service coms;
@@ -14,8 +15,13 @@ export default class ApplicationRoute extends Route {
 
     await this.storage.ensureReadiness();
     await this.localData.setDefaultValues();
-    await this.coms.instantiateAccountsAndChannels();
-    this.coms.setupListeners();
+
+    await this.sockethub.initialize().then(async () => {
+      await this.coms.instantiateAccountsAndChannels();
+      this.coms.setupListeners();
+    }).catch(error => {
+      console.warn('Failed to load Sockethub libs:', error);
+    });
 
     // See a list of allowed types in logger.js
     // Add or remove all your log types here:
@@ -25,13 +31,16 @@ export default class ApplicationRoute extends Route {
     // this.logger.enable();
   }
 
-  redirect (model, transition) {
+  redirect (_model, transition) {
     if (isPresent(transition.intent.url) &&
         transition.intent.url.includes('add-account')) {
       return;
     }
 
-    if (!this.coms.onboardingComplete) {
+    if (!this.sockethub.client) {
+      this.transitionTo('configure-sockethub');
+    }
+    else if (!this.coms.onboardingComplete) {
       this.transitionTo('welcome');
     }
   }

diff --git a/app/routes/configure-sockethub.js b/app/routes/configure-sockethub.js
@@ -0,0 +1,19 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import config from 'hyperchannel/config/environment';
+
+export default class ConfigureSockethubRoute extends Route {
+
+  @service sockethub;
+
+  model () {
+    return { config };
+  }
+
+  redirect () {
+    if (this.sockethub.client) {
+      this.transitionTo('index');
+    }
+  }
+
+}
diff --git a/app/services/coms.js b/app/services/coms.js
@@ -20,6 +20,7 @@ export default class ComsService extends Service {
   // Data storage
   @service('remotestorage') storage;
   // Message transport
+  @service sockethub;
   @service('sockethub-irc') irc;
   @service('sockethub-xmpp') xmpp;
 
@@ -65,7 +66,7 @@ export default class ComsService extends Service {
    * @public
    */
   setupListeners () {
-    this.sockethub.socket.on('message'  , this.handleSockethubMessage.bind(this));
+    this.sockethub.client.socket.on('message', this.handleSockethubMessage.bind(this));
   }
 
   /**

diff --git a/app/services/sockethub-irc.js b/app/services/sockethub-irc.js
@@ -46,9 +46,14 @@ function buildMessageObject(account, target, content, type='message') {
  */
 export default class SockethubIrcService extends Service {
 
+  @service sockethub;
   @service logger;
   @service coms;
 
+  get sockethubClient () {
+    return this.sockethub.client;
+  }
+
   /**
    * - Creates an ActivityStreams person object for
    *   future use
@@ -57,7 +62,7 @@ export default class SockethubIrcService extends Service {
    * @public
    */
   connect (account, callback) {
-    this.sockethub.ActivityStreams.Object.create({
+    this.sockethubClient.ActivityStreams.Object.create({
       id: account.sockethubPersonId,
       type: 'person',
       name: account.nickname
@@ -83,11 +88,11 @@ export default class SockethubIrcService extends Service {
 
     this.log('irc', 'connecting to IRC network...');
 
-    this.sockethub.socket.emit('credentials', credentialsJob, (err) => {
+    this.sockethubClient.socket.emit('credentials', credentialsJob, (err) => {
       if (err) { this.log('failed to store credentials: ', err); }
     });
 
-    this.sockethub.socket.emit('message', connectJob, (message) => {
+    this.sockethubClient.socket.emit('message', connectJob, (message) => {
       if (message.error) {
         this.log('irc', 'failed to connect to IRC network: ', message);
       }
@@ -134,7 +139,7 @@ export default class SockethubIrcService extends Service {
   join (channel, type) {
     switch(type) {
       case 'room':
-        this.sockethub.ActivityStreams.Object.create({
+        this.sockethubClient.ActivityStreams.Object.create({
           type: type,
           id: channel.sockethubChannelId,
           name: channel.name
@@ -146,7 +151,7 @@ export default class SockethubIrcService extends Service {
         });
 
         this.log('irc', 'joining channel', joinMsg);
-        this.sockethub.socket.emit('message', joinMsg, this.handleJoinCompleted.bind(this));
+        this.sockethubClient.socket.emit('message', joinMsg, this.handleJoinCompleted.bind(this));
         break;
       case 'person':
         channel.connected = true;
@@ -166,7 +171,7 @@ export default class SockethubIrcService extends Service {
     const messageJob = buildMessageObject(channel.account, target, message.content);
 
     this.log('send', 'sending message job', messageJob);
-    this.sockethub.socket.emit('message', messageJob);
+    this.sockethubClient.socket.emit('message', messageJob);
   }
 
   /**
@@ -178,7 +183,7 @@ export default class SockethubIrcService extends Service {
     const message = buildMessageObject(channel.account, target, content, 'me');
 
     this.log('send', 'sending message job', message);
-    this.sockethub.socket.emit('message', message);
+    this.sockethubClient.socket.emit('message', message);
   }
 
   /**
@@ -214,7 +219,7 @@ export default class SockethubIrcService extends Service {
       });
 
       this.log('leave', 'leaving channel', leaveMsg);
-      this.sockethub.socket.emit('message', leaveMsg);
+      this.sockethubClient.socket.emit('message', leaveMsg);
     }
   }
 
@@ -232,7 +237,7 @@ export default class SockethubIrcService extends Service {
       }
     });
 
-    this.sockethub.socket.emit('message', topicMsg);
+    this.sockethubClient.socket.emit('message', topicMsg);
   }
 
   /**
@@ -249,7 +254,7 @@ export default class SockethubIrcService extends Service {
     });
 
     this.log('irc', 'asking for attendance list', msg);
-    this.sockethub.socket.emit('message', msg);
+    this.sockethubClient.socket.emit('message', msg);
   }
 
   /**

diff --git a/app/services/sockethub-xmpp.js b/app/services/sockethub-xmpp.js
@@ -54,13 +54,18 @@ function buildMessageObject(account, target, message) {
  */
 export default class SockethubXmppService extends Service {
 
+  @service sockethub;
   @service logger;
   @service coms;
 
+  get sockethubClient () {
+    return this.sockethub.client;
+  }
+
   connectWithCredentials (userAddress, password, callback) {
     const sockethubPersonId = `${userAddress}/hyperchannel`;
 
-    this.sockethub.ActivityStreams.Object.create({
+    this.sockethubClient.ActivityStreams.Object.create({
       id: sockethubPersonId,
       type: 'person',
       name: userAddress.split('@')[0],
@@ -85,10 +90,10 @@ export default class SockethubXmppService extends Service {
     };
 
     this.log('xmpp', 'connecting to XMPP server...');
-    this.sockethub.socket.emit('credentials', credentialsJob, (err) => {
+    this.sockethubClient.socket.emit('credentials', credentialsJob, (err) => {
       if (err) { this.log('failed to store credentials: ', err); }
     });
-    this.sockethub.socket.emit('message', connectJob, callback);
+    this.sockethubClient.socket.emit('message', connectJob, callback);
   }
 
   /**
@@ -100,7 +105,7 @@ export default class SockethubXmppService extends Service {
   connect (account) {
     const actor = account.sockethubPersonId;
 
-    this.sockethub.ActivityStreams.Object.create({
+    this.sockethubClient.ActivityStreams.Object.create({
       id: actor,
       type: 'person',
       name: account.nickname
@@ -125,10 +130,10 @@ export default class SockethubXmppService extends Service {
     };
 
     this.log('xmpp', 'connecting to XMPP server...');
-    this.sockethub.socket.emit('credentials', credentialsJob, (err) => {
+    this.sockethubClient.socket.emit('credentials', credentialsJob, (err) => {
       if (err) { this.log('failed to store credentials: ', err); }
     });
-    this.sockethub.socket.emit('message', connectJob, (message) => {
+    this.sockethubClient.socket.emit('message', connectJob, (message) => {
       if (message.error) { this.log('xmpp', 'failed to connect to XMPP server: ', message); }
       else { this.coms.handleSockethubMessage(message); }
     });
@@ -152,7 +157,7 @@ export default class SockethubXmppService extends Service {
    * @public
    */
   join (channel, type) {
-    this.sockethub.ActivityStreams.Object.create({
+    this.sockethubClient.ActivityStreams.Object.create({
       type: type,
       id: channel.sockethubChannelId,
       name: channel.name
@@ -169,7 +174,7 @@ export default class SockethubXmppService extends Service {
     });
 
     this.log('xmpp', 'joining channel', joinMsg);
-    this.sockethub.socket.emit('message', joinMsg, this.handleJoinCompleted.bind(this));
+    this.sockethubClient.socket.emit('message', joinMsg, this.handleJoinCompleted.bind(this));
   }
 
   /**
@@ -184,7 +189,7 @@ export default class SockethubXmppService extends Service {
     const messageJob = buildMessageObject(channel.account, target, message);
 
     this.log('send', 'sending message job', messageJob);
-    this.sockethub.socket.emit('message', messageJob);
+    this.sockethubClient.socket.emit('message', messageJob);
   }
 
   handlePresenceUpdate (message) {
@@ -247,7 +252,7 @@ export default class SockethubXmppService extends Service {
       });
 
       this.log('leave', 'leaving channel', leaveMsg);
-      this.sockethub.socket.emit('message', leaveMsg, (message) => {
+      this.sockethubClient.socket.emit('message', leaveMsg, (message) => {
         if (message.error) {
           this.log('leave', 'failed to leave channel: ', message);
         } else {
@@ -276,7 +281,7 @@ export default class SockethubXmppService extends Service {
     });
 
     this.log('xmpp', 'asking for attendance list', msg);
-    this.sockethub.socket.emit('message', msg);
+    this.sockethubClient.socket.emit('message', msg);
   }
 
   /**

diff --git a/app/services/sockethub.js b/app/services/sockethub.js
@@ -0,0 +1,31 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import config from 'hyperchannel/config/environment';
+
+export default class SockethubService extends Service {
+  @tracked client = null;
+
+  async initialize (/* baseURL */) {
+    return this.loadSockethubLibs(config.sockethubURL).then(() => {
+      this.client = new window.SockethubClient(
+        window.io(config.sockethubURL, { path: '/sockethub' })
+      );
+    });
+  }
+
+  async loadSockethubLibs (baseURL) {
+    await this.loadExternalScript(baseURL + '/socket.io.js');
+    await this.loadExternalScript(baseURL + '/sockethub-client.js');
+  }
+
+  async loadExternalScript (url) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      document.body.appendChild(script);
+      script.onload = resolve;
+      script.onerror = reject;
+      script.async = true;
+      script.src = url;
+    });
+  }
+}
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -35,7 +35,7 @@ body {
     background-size: cover;
   }
 
-  &.welcome, &.add-account {
+  &.welcome, &.add-account, &.configure-sockethub {
     background-image: linear-gradient(90deg, $background-color-cyan 0, rgba(13,79,153,0.8) 100%),
     // background-image: linear-gradient(90deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
                       url('/img/bg.jpg');

diff --git a/app/templates/configure-sockethub.hbs b/app/templates/configure-sockethub.hbs
@@ -0,0 +1,23 @@
+<div class="max-w-3xl mx-auto mt-10 lg:mt-40 lg:mb-24 sm:px-6 lg:px-8">
+  <div class="bg-white overflow-hidden shadow sm:rounded-lg">
+    <div class="px-4 py-10 sm:p-10 text-neutral-800">
+      <h2 class="mb-10 text-center text-3xl font-light">Sockethub unavailable</h2>
+      <p class="mb-4">
+        Unfortunately, the Sockethub server at
+        <code class="px-2 py-1 bg-orange-100 text-orange-600 font-bold">{{this.model.config.sockethubURL}}</code>
+        seems to be offline at the moment.
+      </p>
+      <p class="mb-4">
+        <a href="http://sockethub.org/" target="_blank" class="text-orange-600 underline" rel="noopener noreferrer">Sockethub</a>
+        is an open-source server program, which this app uses in
+        order to talk to chat servers.
+      </p>
+      {{#if (eq this.model.config.environment "development")}}
+        <p class="mb-10 font-bold">
+          The app is running in development mode. Please make sure Sockethub is
+          running on your machine and try again.
+        </p>
+      {{/if}}
+    </div>
+  </div>
+</div>