@budibase/frontend-core 2.6.19-alpha.36 → 2.6.19-alpha.38

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.6.19-alpha.36",
+  "version": "2.6.19-alpha.38",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.6.19-alpha.36",
-    "@budibase/shared-core": "2.6.19-alpha.36",
+    "@budibase/bbui": "2.6.19-alpha.38",
+    "@budibase/shared-core": "2.6.19-alpha.38",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "2bcc1449a8531d74fe138fb63575d244817d1918"
+  "gitHead": "67e4eb65b65c13813fbbb5e21e180234e3328755"
 }

package/src/components/grid/lib/websocket.js

@@ -1,5 +1,6 @@
 import { get } from "svelte/store"
 import { createWebsocket } from "../../../utils"
+import { SocketEvent, GridSocketEvent } from "@budibase/shared-core"
 
 export const createGridWebsocket = context => {
   const { rows, tableId, users, focusedCellId, table } = context
@@ -10,13 +11,13 @@ export const createGridWebsocket = context => {
       return
     }
     // Identify which table we are editing
-    socket.emit("select-table", tableId, response => {
+    socket.emit(GridSocketEvent.SelectTable, tableId, response => {
       // handle initial connection info
       users.set(response.users)
     })
   }
 
-  // Connection events
+  // Built-in events
   socket.on("connect", () => {
     connectToTable(get(tableId))
   })
@@ -25,25 +26,25 @@ export const createGridWebsocket = context => {
   })
 
   // User events
-  socket.on("user-update", user => {
+  socket.on(SocketEvent.UserUpdate, user => {
     users.actions.updateUser(user)
   })
-  socket.on("user-disconnect", user => {
+  socket.on(SocketEvent.UserDisconnect, user => {
     users.actions.removeUser(user)
   })
 
   // Row events
-  socket.on("row-change", async data => {
+  socket.on(GridSocketEvent.RowChange, async data => {
     if (data.id) {
       rows.actions.replaceRow(data.id, data.row)
     } else if (data.row.id) {
-      // Handle users table edge case
+      // Handle users table edge cased
       await rows.actions.refreshRow(data.row.id)
     }
   })
 
   // Table events
-  socket.on("table-change", data => {
+  socket.on(GridSocketEvent.TableChange, data => {
     // Only update table if one exists. If the table was deleted then we don't
     // want to know - let the builder navigate away
     if (data.table) {
@@ -56,7 +57,7 @@ export const createGridWebsocket = context => {
 
   // Notify selected cell changes
   focusedCellId.subscribe($focusedCellId => {
-    socket.emit("select-cell", $focusedCellId)
+    socket.emit(GridSocketEvent.SelectCell, $focusedCellId)
   })
 
   return () => socket?.disconnect()

package/src/components/grid/stores/users.js

@@ -51,9 +51,9 @@ export const deriveStores = context => {
     }
   }
 
-  const removeUser = user => {
+  const removeUser = sessionId => {
     users.update(state => {
-      return state.filter(x => x.sessionId !== user.sessionId)
+      return state.filter(x => x.sessionId !== sessionId)
     })
   }
 

package/src/utils/websocket.js

@@ -1,6 +1,7 @@
 import { io } from "socket.io-client"
+import { SocketEvent, SocketSessionTTL } from "@budibase/shared-core"
 
-export const createWebsocket = path => {
+export const createWebsocket = (path, heartbeat = true) => {
   if (!path) {
     throw "A websocket path must be provided"
   }
@@ -10,7 +11,7 @@ export const createWebsocket = path => {
   const proto = tls ? "wss:" : "ws:"
   const host = location.hostname
   const port = location.port || (tls ? 443 : 80)
-  return io(`${proto}//${host}:${port}`, {
+  const socket = io(`${proto}//${host}:${port}`, {
     path,
     // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
     reconnectionAttempts: 3,
@@ -23,4 +24,18 @@ export const createWebsocket = path => {
     // will only work with sticky sessions which we don't have
     transports: ["websocket"],
   })
+
+  // Set up a heartbeat that's half of the session TTL
+  let interval
+  if (heartbeat) {
+    interval = setInterval(() => {
+      socket.emit(SocketEvent.Heartbeat)
+    }, SocketSessionTTL * 500)
+  }
+
+  socket.on("disconnect", () => {
+    clearInterval(interval)
+  })
+
+  return socket
 }