I am developing a MQTT Dashboard app with django. I have a mqtt thread running in background, periodically polling for data from remote device and saving it as a database (MariaDB) row. I also have a view that displays this row in simple table. Now, what I want to do is to refresh this view (without page reload) when new data appears and my question is how to do that. I thought of two different approaches:
- Use JS's
setInterval
triggering ajax call to periodically refresh content. Problem here is that I'm not really proficient with JavaScript nor jQuery so I would love to get simple example how to do that - Somehow refresh data from within
on_message
function which is called when mqtt gets new data. Problem here is that I have no clue if it is even possible
I would appreciate any explanation of above or even more some description of different, more proper way to do that. Here is my code:
part of template with content i want to refresh:
<div class="row mb-4 justify-content-center text-center">
<h1 class="text-uppercase text-white font-weight-bold">{% translate "Parameters" %}</h1>
<table id="device-parameters-table">
<thead>
<tr>
<th scope="col">{% translate "Parameter" %}</th>
<th scope="col">{% translate "Value" %}</th>
<th scope="col">{% translate "Unit" %}</th>
</tr>
</thead>
<tbody>
{% for key, value in latest_read_data.items %}
<tr>
<td>{{key}}</td>
<td>{{value.value}}</td>
<td>{{value.unit}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
device view:
def device(request):
clicked = request.GET.get('device_id')
dev = Device.objects.get(id=clicked)
latest_read_data = ReadData.objects.filter(device=dev).order_by('timestamp')
if latest_read_data:
read_data = latest_read_data.values()
read_data = read_data[len(read_data)-1]
read_data.pop('id')
read_data.pop('device_id')
read_data.pop('timestamp')
parameters_get_units(read_data)
context = {'latest_read_data': read_data, 'device': dev}
return render(request, 'dashboard/device.html', context=context)
else:
return HttpResponseRedirect('/dashboard')