Added alpha feature to demonstrate websockets

refs TryGhost/Product#2561

- added simple socket-io implementation to Ghost server
- added alpha flag for websockets
- added route in admin to test websockets using a simple counter stored in server local memory (refreshes on reboot)

Author: 9larsons

ghost/admin/app/components/websockets.hbs

@@ -0,0 +1,8 @@
+<div class="gh-expandable-header">
+    <div>
+        <h4 class="gh-expandable-title">Counter</h4>
+        <p class="gh-expandable-description">Current counter value: <strong>{{this.counter}}</strong></p>
+        <p class="gh-expandable-description">This counter will reset when Ghost reboots.</p>
+    </div>
+    <button type="button" class="gh-btn" {{on "click" this.handleClick}} data-test-button="delete-all"><span>Add One</span></button>
+</div>

ghost/admin/app/components/websockets.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
+
+export default class Websockets extends Component {
+    @service('socket-io') socketIOService;
+
+    constructor(...args) {
+        super(...args);
+        // initialize connection
+
+        // TODO: ensure this works with subdirectories
+        let origin = window.location.origin; // this gives us host:port
+        let socket = this.socketIOService.socketFor(origin);
+        // add listener
+        socket.on('addCount', (value) => {
+            this.counter = value;
+        });
+    }
+
+    // button counter
+    @tracked counter = 0;
+
+    // handle button/event
+    @action handleClick() {
+        let socket = this.socketIOService.socketFor(origin);
+        this.counter = 1 + this.counter;
+        socket.emit('addCount', this.counter);
+    }
+}

ghost/admin/app/controllers/websockets.js

@@ -0,0 +1,13 @@
+import Controller from '@ember/controller';
+/* eslint-disable ghost/ember/alias-model-in-controller */
+import classic from 'ember-classic-decorator';
+import {inject as service} from '@ember/service';
+
+@classic
+export default class WebsocketsController extends Controller {
+    @service feature;
+    
+    init() {
+        super.init(...arguments);
+    }
+}

ghost/admin/app/router.js

@@ -55,6 +55,9 @@ Router.map(function () {
     this.route('settings.code-injection', {path: '/settings/code-injection'});
     this.route('settings.history', {path: '/settings/history'});
     this.route('settings.analytics', {path: '/settings/analytics'});
+    
+    // testing websockets
+    this.route('websockets');
 
     // redirect from old /settings/members-email to /settings/newsletters
     this.route('settings.members-email', {path: '/settings/members-email'});

ghost/admin/app/routes/websockets.js

@@ -0,0 +1,17 @@
+import AuthenticatedRoute from './authenticated';
+import {inject as service} from '@ember/service';
+
+// need this to be authenticated
+export default class WebsocketRoute extends AuthenticatedRoute {
+    @service session;
+
+    beforeModel() {
+        super.beforeModel(...arguments);
+
+        const user = this.session.user;
+
+        if (!user.isAdmin) {
+            return this.transitionTo('settings.staff.user', user);
+        }
+    }
+}

ghost/admin/app/services/feature.js

@@ -71,6 +71,7 @@ export default class FeatureService extends Service {
     @feature('outboundLinkTagging') outboundLinkTagging;
     @feature('emailErrors') emailErrors;
     @feature('milestoneEmails') milestoneEmails;
+    @feature('websockets') websockets;
 
     _user = null;
 

ghost/admin/app/templates/settings/labs.hbs

@@ -252,6 +252,19 @@
                         </div>
                     </div>
                 </div>
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Websockets</h4>
+                            <p class="gh-expandable-description">
+                                Test out Websockets functionality at <code>/ghost/#/websockets</code>.
+                            </p>
+                        </div>
+                        <div class="for-switch">
+                            <GhFeatureFlag @flag="websockets" />
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         {{/if}}

ghost/admin/app/templates/websockets.hbs

@@ -0,0 +1,29 @@
+<section class="gh-canvas">
+    <GhCanvasHeader class="gh-canvas-header">
+        <div class="flex flex-column">
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Testing Websockets
+            </h2>
+        </div>
+    </GhCanvasHeader>
+    {{#if (feature 'websockets')}}
+    <section class="view-container settings-debug">
+        <p class="gh-box gh-box-tip">{{svg-jar "idea"}}This is a testing ground for new or experimental features. They
+            may change, break or inexplicably disappear at any time.</p>
+        <div class="gh-main-section">
+            <h4 class="gh-main-section-header small bn">Secrets</h4>
+            <div class="gh-expandable">
+                <div class="gh-expandable-block">
+                    <Websockets />
+                </div>
+            </div>
+        </div>
+    </section>
+    {{else}}
+    <section class="view-container settings-debug">
+        <p class="gh-box gh-box-alert">{{svg-jar "warning-stroke"}}This is a testing ground for new or experimental features. You need developer experiments
+            enabled to see the content here.
+        </p>
+    </section>
+    {{/if}}
+</section>

ghost/admin/config/environment.js

@@ -33,6 +33,10 @@ module.exports = function (environment) {
 
         'ember-simple-auth': { },
 
+        'ember-websockets': { 
+            socketIO: true
+        },
+
         '@sentry/ember': {
             disablePerformance: true,
             sentry: {}

ghost/admin/package.json

@@ -119,6 +119,7 @@
     "ember-test-selectors": "6.0.0",
     "ember-tooltips": "3.6.0",
     "ember-truth-helpers": "3.1.1",
+    "ember-websockets": "10.2.1",
     "eslint": "8.34.0",
     "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-react": "7.32.2",
@@ -181,4 +182,4 @@
     "path-browserify": "1.0.1",
     "webpack": "5.75.0"
   }
-}
+}

ghost/core/core/boot.js

@@ -473,6 +473,13 @@ async function bootGhost({backend = true, frontend = true, server = true} = {})
             await initDynamicRouting();
         }
 
+        // TODO: move this to the correct place once we figure out where that is
+        if (ghostServer) {
+            //  NOTE: changes in this labs setting requires server reboot since we don't re-init services after changes a labs flag
+            const websockets = require('./server/services/websockets');
+            await websockets.init(ghostServer);
+        }
+
         await initServices({config});
         debug('End: Load Ghost Services & Apps');
 

ghost/core/core/server/services/websockets/index.js

@@ -0,0 +1 @@
+module.exports = require('./service');

ghost/core/core/server/services/websockets/service.js

@@ -0,0 +1,37 @@
+const {Server} = require('socket.io');
+const debug = require('@tryghost/debug')('websockets');
+const logging = require('@tryghost/logging');
+
+const labs = require('../../../shared/labs');
+
+module.exports = {
+    async init(ghostServer) {
+        debug(`[Websockets] Is labs set? ${labs.isSet('websockets')}`);
+
+        if (labs.isSet('websockets')) {
+            logging.info(`Starting websockets service`);
+
+            const io = new Server(ghostServer.httpServer);
+            let count = 0;
+
+            io.on(`connection`, (socket) => {
+                debug(`[Websockets] Client connected`);
+                // on connect, send current value
+                socket.emit('addCount', count);
+                // listen to to changes in value from client
+                socket.on('addCount', () => {
+                    count = count + 1;
+                    debug(`[Websockets] received addCount from client, count is now ${count}`);
+                    socket.broadcast.emit('addCount', count);
+                });
+            });
+
+            ghostServer.registerCleanupTask(async () => {
+                logging.warn(`Stopping websockets service`);
+                await new Promise((resolve) => {
+                    io.close(resolve);
+                });
+            });
+        }
+    }
+};

ghost/core/core/shared/labs.js

@@ -36,7 +36,8 @@ const ALPHA_FEATURES = [
     'urlCache',
     'beforeAfterCard',
     'lexicalEditor',
-    'outboundLinkTagging'
+    'outboundLinkTagging',
+    'websockets'
 ];
 
 module.exports.GA_KEYS = [...GA_FEATURES];

ghost/core/package.json

@@ -196,6 +196,7 @@
     "rss": "1.2.2",
     "sanitize-html": "2.9.0",
     "semver": "7.3.8",
+    "socket.io": "4.6.0",
     "stoppable": "1.1.0",
     "uuid": "9.0.0",
     "xml": "1.0.1"