feat: realtime whatsapp message using socket and publish_realtime

crm/api/whatsapp.py

@@ -7,6 +7,12 @@ def validate(doc, method):
 		doc.reference_doctype = doctype
 		doc.reference_name = name
 
+def on_update(doc, method):
+	frappe.publish_realtime("whatsapp_message", {
+		'reference_doctype': doc.reference_doctype,
+		'reference_name': doc.reference_name,
+	})
+
 def get_lead_or_deal_from_number(number):
 	"""Get lead/deal from the given number.
 	"""

crm/hooks.py

@@ -138,6 +138,7 @@ doc_events = {
 	},
 	"WhatsApp Message": {
 		"validate": ["crm.api.whatsapp.validate"],
+		"on_update": ["crm.api.whatsapp.on_update"],
 	},
 }
 

frontend/src/components/Activities.vue

@@ -864,10 +864,19 @@ import {
   call,
 } from 'frappe-ui'
 import { useElementVisibility } from '@vueuse/core'
-import { ref, computed, h, markRaw, watch, nextTick } from 'vue'
+import {
+  ref,
+  computed,
+  h,
+  markRaw,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import { useRoute } from 'vue-router'
 
-const { makeCall } = globalStore()
+const { makeCall, $socket } = globalStore()
 const { getUser } = usersStore()
 const { getContact, getLeadContact } = contactsStore()
 
@@ -946,6 +955,21 @@ const whatsappMessages = createResource({
   onSuccess: () => nextTick(() => scroll()),
 })
 
+onBeforeUnmount(() => {
+  $socket.off('whatsapp_message')
+})
+
+onMounted(() => {
+  $socket.on('whatsapp_message', (data) => {
+    if (
+      data.reference_doctype === props.doctype &&
+      data.reference_name === doc.value.data.name
+    ) {
+      whatsappMessages.reload()
+    }
+  })
+})
+
 function sendTemplate(template) {
   showWhatsappTemplates.value = false
   createResource({

frontend/src/stores/global.js

@@ -3,7 +3,7 @@ import { getCurrentInstance, ref } from 'vue'
 
 export const globalStore = defineStore('crm-global', () => {
   const app = getCurrentInstance()
-  const { $dialog } = app.appContext.config.globalProperties
+  const { $dialog, $socket } = app.appContext.config.globalProperties
 
   let twilioEnabled = ref(false)
   let callMethod = () => {}
@@ -22,6 +22,7 @@ export const globalStore = defineStore('crm-global', () => {
 
   return {
     $dialog,
+    $socket,
     twilioEnabled,
     makeCall,
     setTwilioEnabled,