Initial work on websockets

hosting/nginx.dev.conf.hbs

@@ -77,9 +77,19 @@ http {
       proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
     }
 
-    location /ws {
-      proxy_pass      http://{{ address }}:3000;
-      rewrite ^/ws(.*)$ /$1 break;
+    location /vite/ {
+      proxy_pass  http://{{ address }}:3000;
+      rewrite     ^/vite(.*)$ /$1 break;
+    }
+
+    location /socket/ {
+      proxy_pass      http://{{ address }}:4001;
+
+      proxy_http_version  1.1;
+      proxy_set_header    Upgrade     $http_upgrade;
+      proxy_set_header    Connection  'upgrade';
+      proxy_set_header    Host        $host;
+      proxy_cache_bypass  $http_upgrade;
     }
 
     location / {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -93,6 +93,7 @@
         : [],
     isBudibaseEvent: true,
     usedPlugins: $store.usedPlugins,
+    location: window.location,
   }
 
   // Refresh the preview when required

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js

@@ -68,6 +68,7 @@ export default `
           navigation,
           hiddenComponentIds,
           usedPlugins,
+          location
         } = parsed
 
         // Set some flags so the app knows we're in the builder
@@ -83,6 +84,7 @@ export default `
         window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation
         window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
         window["##BUDIBASE_USED_PLUGINS##"] = usedPlugins
+        window["##BUDIBASE_LOCATION##"] = location
 
         // Initialise app
         try {

packages/client/package.json

@@ -39,6 +39,7 @@
     "sanitize-html": "^2.7.0",
     "screenfull": "^6.0.1",
     "shortid": "^2.2.15",
+    "socket.io-client": "^4.5.1",
     "svelte": "^3.49.0",
     "svelte-apexcharts": "^1.0.2",
     "svelte-flatpickr": "^3.1.0",

packages/client/src/components/ClientApp.svelte

@@ -91,8 +91,8 @@
 
 <svelte:head>
   {#if $builderStore.usedPlugins?.length}
-    {#each $builderStore.usedPlugins as plugin}
-      <script src={`/plugins/${plugin.jsUrl}`}></script>
+    {#each $builderStore.usedPlugins as plugin (plugin.hash)}
+      <script src={`/plugins/${plugin.jsUrl}?r=${plugin.hash || ""}`}></script>
     {/each}
   {/if}
 </svelte:head>

packages/client/src/index.js

@@ -2,6 +2,7 @@ import ClientApp from "./components/ClientApp.svelte"
 import { componentStore, builderStore, appStore, devToolsStore } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
 import { get } from "svelte/store"
+import { initWebsocket } from "./websocket.js"
 
 // Provide svelte and svelte/internal as globals for custom components
 import * as svelte from "svelte"
@@ -28,6 +29,7 @@ const loadBudibase = () => {
     navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"],
     hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
     usedPlugins: window["##BUDIBASE_USED_PLUGINS##"],
+    location: window["##BUDIBASE_LOCATION##"],
   })
 
   // Set app ID - this window flag is set by both the preview and the real
@@ -51,6 +53,9 @@ const loadBudibase = () => {
   window.registerCustomComponent =
     componentStore.actions.registerCustomComponent
 
+  // Initialise websocket
+  initWebsocket()
+
   // Create app if one hasn't been created yet
   if (!app) {
     app = new ClientApp({

packages/client/src/stores/builder.js

@@ -19,6 +19,7 @@ const createBuilderStore = () => {
     isDragging: false,
     navigation: null,
     hiddenComponentIds: [],
+    usedPlugins: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
@@ -84,6 +85,20 @@ const createBuilderStore = () => {
     highlightSetting: setting => {
       dispatchEvent("highlight-setting", { setting })
     },
+    updateUsedPlugin: (name, hash) => {
+      // Check if we used this plugin
+      const used = get(store)?.usedPlugins?.find(x => x.name === name)
+      if (used) {
+        store.update(state => {
+          state.usedPlugins = state.usedPlugins.filter(x => x.name !== name)
+          state.usedPlugins.push({
+            ...used,
+            hash,
+          })
+          return state
+        })
+      }
+    },
   }
   return {
     ...store,

packages/client/src/stores/components.js

@@ -140,16 +140,20 @@ const createComponentStore = () => {
     return customComponentManifest?.[type]?.Component
   }
 
-  const registerCustomComponent = ({ Component, schema, version }) => {
+  const registerCustomComponent = ({ Component, schema }) => {
     if (!Component || !schema?.schema?.name) {
       return
     }
-    const component = `plugin/${schema.schema.name}/${version}`
+    console.log(schema)
+    console.log("register", schema.schema.name)
+    const component = `plugin/${schema.schema.name}/${
+      schema.schema.version || "2.0.5"
+    }`
+    console.log(component)
     store.update(state => {
       state.customComponentManifest[component] = {
         Component,
         schema,
-        version,
       }
       return state
     })

packages/client/src/websocket.js

@@ -0,0 +1,24 @@
+import { builderStore } from "./stores/index.js"
+import { get } from "svelte/store"
+import { io } from "socket.io-client"
+
+export const initWebsocket = () => {
+  const { inBuilder, location } = get(builderStore)
+  console.log(location)
+  if (!inBuilder || !location) {
+    return
+  }
+
+  // Websocket
+  const tls = location.protocol === "https:"
+  const proto = tls ? "wss:" : "ws:"
+  const host = location.hostname
+  const port = location.port || (tls ? 433 : 80)
+  console.log(`${proto}//${host}:${port}`)
+  const socket = io(`${proto}//${host}:${port}`, {
+    path: "/socket/",
+  })
+  socket.on("plugin-update", data => {
+    builderStore.actions.updateUsedPlugin(data.name, data.hash)
+  })
+}

packages/server/package.json

@@ -138,6 +138,7 @@
     "redis": "4",
     "server-destroy": "1.0.1",
     "snowflake-promise": "^4.5.0",
+    "socket.io": "^4.5.1",
     "svelte": "3.49.0",
     "swagger-parser": "10.0.3",
     "tar": "^6.1.11",

packages/server/src/api/controllers/plugin.ts

@@ -4,6 +4,7 @@ import { getGlobalDB } from "@budibase/backend-core/tenancy"
 import { generatePluginID, getPluginParams } from "../../db/utils"
 import { uploadDirectory } from "@budibase/backend-core/objectStore"
 import { PluginType, FileType } from "@budibase/types"
+import { io } from "../../app"
 
 export async function getPlugins(type?: PluginType) {
   const db = getGlobalDB()
@@ -53,7 +54,8 @@ export async function processPlugin(plugin: FileType) {
   const { metadata, directory } = await extractPluginTarball(plugin)
   const version = metadata.package.version,
     name = metadata.package.name,
-    description = metadata.package.description
+    description = metadata.package.description,
+    hash = metadata.schema.hash
 
   // first open the tarball into tmp directory
   const bucketPath = `${name}/${version}/`
@@ -82,11 +84,13 @@ export async function processPlugin(plugin: FileType) {
     _rev: rev,
     name,
     version,
+    hash,
     description,
     ...metadata,
     jsUrl: `${bucketPath}${jsFileName}`,
   }
   const response = await db.put(doc)
+  io.sockets.emit("plugin-update", { name, hash })
   return {
     ...doc,
     _rev: response.rev,

packages/server/src/app.ts

@@ -20,6 +20,7 @@ const { Thread } = require("./threads")
 const chokidar = require("chokidar")
 const fs = require("fs")
 const path = require("path")
+const SocketIO = require("socket.io")
 import redis from "./utilities/redis"
 import * as migrations from "./migrations"
 import { events, installation, tenancy } from "@budibase/backend-core"
@@ -71,6 +72,15 @@ if (env.isProd()) {
 const server = http.createServer(app.callback())
 destroyable(server)
 
+// Websocket
+export const io = SocketIO(server, {
+  path: "/socket/",
+  cors: {
+    origin: ["https://hmr.lan.kingston.dev"],
+    methods: ["GET", "POST"],
+  },
+})
+
 let shuttingDown = false,
   errCode = 0
 server.on("close", async () => {

packages/server/src/utilities/websocket.js

@@ -0,0 +1,9 @@
+const { Server } = require("socket.io")
+
+const io = new Server(4000)
+
+io.on("connection", socket => {
+  socket.on("foo", arg => {
+    console.log(arg)
+  })
+})