fix: updated socket io implementation similar to gameplan

crm/www/crm.py

@@ -14,3 +14,20 @@ def get_context(context):
     if frappe.session.user != "Guest":
         capture("active_site", "crm")
     context.csrf_token = csrf_token
+
+@frappe.whitelist(methods=['POST'], allow_guest=True)
+def get_context_for_dev():
+	if not frappe.conf.developer_mode:
+		frappe.throw('This method is only meant for developer mode')
+	return get_boot()
+
+def get_boot():
+	return frappe._dict({
+		'frappe_version': frappe.__version__,
+		'default_route': get_default_route(),
+		'site_name': frappe.local.site,
+		'read_only_mode': frappe.flags.read_only,
+	})
+
+def get_default_route():
+	return '/crm'

frontend/src/main.js

@@ -21,9 +21,7 @@ import {
 } from 'frappe-ui'
 import translationPlugin from './translation'
 import { createDialog } from './utils/dialogs'
-import socket from './socket'
-import { getCachedListResource } from 'frappe-ui/src/resources/listResource'
-import { getCachedResource } from 'frappe-ui/src/resources/resources'
+import { initSocket } from './socket'
 
 let globalComponents = {
   Button,
@@ -53,17 +51,33 @@ for (let key in globalComponents) {
 
 app.config.globalProperties.$dialog = createDialog
 
-app.mount('#app')
+// socket.on('refetch_resource', (data) => {
+//   if (data.cache_key) {
+//     let resource =
+//       getCachedResource(data.cache_key) || getCachedListResource(data.cache_key)
+//     if (resource) {
+//       resource.reload()
+//     }
+//   }
+// })
 
-socket.on('refetch_resource', (data) => {
-  if (data.cache_key) {
-    let resource =
-      getCachedResource(data.cache_key) || getCachedListResource(data.cache_key)
-    if (resource) {
-      resource.reload()
+let socket
+if (import.meta.env.DEV) {
+  frappeRequest({ url: '/api/method/crm.www.crm.get_context_for_dev' }).then(
+    (values) => {
+      for (let key in values) {
+        window[key] = values[key]
+      }
+      socket = initSocket()
+      app.config.globalProperties.$socket = socket
+      app.mount('#app')
     }
-  }
-})
+  )
+} else {
+  socket = initSocket()
+  app.config.globalProperties.$socket = socket
+  app.mount('#app')
+}
 
 if (import.meta.env.DEV) {
   window.$dialog = createDialog

frontend/src/socket.js

@@ -1,14 +1,28 @@
 import { io } from 'socket.io-client'
 import { socketio_port } from '../../../../sites/common_site_config.json'
+import { getCachedListResource } from 'frappe-ui/src/resources/listResource'
+import { getCachedResource } from 'frappe-ui/src/resources/resources'
 
-function initSocket() {
+export function initSocket() {
   let host = window.location.hostname
+  let siteName = window.site_name
   let port = window.location.port ? `:${socketio_port}` : ''
   let protocol = port ? 'http' : 'https'
-  let url = `${protocol}://${host}${port}/${host}`
-  let socket = io(url, { withCredentials: true })
-  return socket
-}
+  let url = `${protocol}://${host}${port}/${siteName}`
 
-let socket = initSocket()
-export default socket
+  let socket = io(url, {
+    withCredentials: true,
+    reconnectionAttempts: 5,
+  })
+  socket.on('refetch_resource', (data) => {
+    if (data.cache_key) {
+      let resource =
+        getCachedResource(data.cache_key) ||
+        getCachedListResource(data.cache_key)
+      if (resource) {
+        resource.reload()
+      }
+    }
+  })
+  return socket
+}