In Odoo, enabling real-time communication between the backend and frontend is essential for providing users with live updates and dynamic data. One powerful tool for achieving this is the bus service, which facilitates the broadcasting of messages to specific channels or users. In this blog post, we'll explore how to leverage the bus service to share live data from the backend to the frontend in an Owl.js Odoo module.
Setting Up the Backend
Firstly, let's set up the backend to broadcast live data. We'll use a simple Odoo controller to simulate live data and send it to the frontend using the bus service.
# controllers/main.py
from odoo import http
from odoo.http import request
class BusController(http.Controller):
@http.route('/my_module/live_data', type='json', auth='user')
def live_data(self, **kw):
# Simulate live data
live_data = {'id': 1, 'name': 'Live Data from Backend'}
# Send the live data to the frontend using the bus service
channel = "your_channel"
message = {
"data": live_data,
"channel": channel
}
request.env["bus.bus"]._sendone(channel, "notification", message)
return {'result': 'Live data sent successfully'}
In this example, we've defined a route /my_module/live_data that, when accessed, simulates live data and sends it to the frontend through the bus service. The “your_channel” channel is used for this communication.
Simulating Live Data: The live_data function simulates the live data you want to send to the frontend. For demonstration purposes, it creates a dictionary representing a piece of live data.
Defining the Channel: The channel variable is defined to specify the communication channel through which the live data will be sent. You should replace "your_channel" with an appropriate and unique channel identifier for your use case.
Preparing the Message: The message dictionary is created to encapsulate the live data and the channel information. This message will be sent to the frontend.
Sending the Live Data: The request.env["bus.bus"]._sendone method is used to send the live data to the frontend. It takes three parameters: the channel, the type of message (in this case, "notification"), and the message data.
Response: Finally, a response is returned to indicate the success of sending the live data. This response can be utilized for handling acknowledgment on the frontend side.
Subscribing to the Channel in Owl.js
On the frontend, we'll create an Owl.js component that subscribes to the channel and handles the incoming live data.
class MyCompoenent extends owl.Component {
static template = owl.xml`
<div>
<t t-foreach="state.data" t-as="data" t-key="data_index">
<span t-out="data.name"/>
</t>
</div>
setup() {
this.state = owl.useState({ data: [] })
this.busService = this.env.services.bus_service
this.channel = "your_channel"
this.busService.addChannel(this.channel)
this.busService.addEventListener("notification", this.onMessage.bind(this))
}
onMessage({ detail: notifications }) {
notifications = notifications.filter(item => item.payload.channel === this.channel)
notifications.forEach(item => {
this.state.data.push(item.payload.data)
})
}
}This Owl.js component creates a simple UI to display live data. It subscribes to the “your_channel” and updates the liveData state when new data is received.
Component Template: The component template renders a list of spans for each item in the state.data array. It uses t-foreach to iterate over the data and display the name property of each item.
Component Setup: In the setup method, the component initializes its state (this.state) with an empty array for data. It also gets the bus service (this.busService) from the environment services.
Setting Up a Channel: The component sets up a specific channel (this.channel) using the addChannel method of the bus service.
Event Listener: The component adds an event listener for the "notification" type on the specified channel. The onMessage method is bound as the event handler.
onMessage Event Handler: The onMessage method filters incoming notifications based on the specified channel. It then processes each notification, extracting the data payload, and appends it to the component's state.data array.
This component is designed to dynamically update its UI whenever new notifications are received on the specified channel. Adjust the channel name ("your_channel") and the logic inside the onMessage handler based on your specific application requirements.
Conclusion
By combining the backend Odoo controller with the Owl.js component, we've established a seamless real-time communication channel. As a result, live data can be sent from the backend to the frontend, providing users with dynamic and up-to-date information.