I need to auto update the page that use the list of doctype. How to achieve this?

I have this code in Doctype ( Vendor Order)

 def on_update(self):

        frappe.publish_realtime('doc_update', {
            'doctype': 'Vendor Order',
            'name': self.name,
            'action': 'update'
        })

now code in page is

	function refreshOrderList() {
	console.log('Global value:', toDateField);
			
	frappe.call({
		method: "logi360.logi360.page.list_of_orders.list_of_orders.get_order_list",
		args: {
			start: (currentPage - 1) * itemsPerPage,
            limit: itemsPerPage,
			status: statusField,
			vendor: vendorField,
			orderCode: orderCodeField,
			phone: phoneField,
			branch: branchField,
			fromDate: fromDateField,
			toDate: toDateField

		},
		callback: function (r) {
			$(window).scrollTop(0);
			tbody.empty();
			$.each(r.message, function (i, d) {
				//console.log(d);
				var newRow = $('<tr>').addClass('text-center').appendTo(tbody);
				$('<td>').text((currentPage - 1) * itemsPerPage + i + 1).appendTo(newRow);
				$('<td>').text(d.creation).appendTo(newRow);
				$('<td>').text(d.name).appendTo(newRow);
				$('<td>').text(d.vendor_name).appendTo(newRow);
				$('<td>').text(d.customer_name).appendTo(newRow);
				$('<td>').text(d.primary_mobile_no).appendTo(newRow);
				$('<td>').text(d.is_paid_order).appendTo(newRow);
				$('<td>').text("Rs." + d.cod_amount).appendTo(newRow);
				$('<td>').text(d.delivery_amount).appendTo(newRow);
				$('<td>').text(d.address).appendTo(newRow);
				$('<td>').text(d.destination_branch).appendTo(newRow);
				$('<td>').text(d.status).appendTo(newRow);
	
		}
	});
}

refreshOrderList();

//setInterval(refreshOrderList, 5000);

	
	
	$(document).ready(function() {
		// Call the function once to load the orders when the page is first loaded
		refreshOrderList();
	
		frappe.realtime.on('doc_update', function(data) {
			if(data.doctype === 'Vendor Order') {
				refreshOrderList();
			}
		});
	});

These doe not work for me. Please give any solution for that.