When the start button is pressed , front end js Call... By triggering the button event ajax The function requests a routing address to call django Background communication program
Ajax namely “Asynchronous Javascript And XML”( asynchronous JavaScript and
XML), It's about creating interactive 、 Web development technology of fast dynamic web application , Without reloading the entire page , Technology to update some web pages .
Through a small amount of data exchange with the server in the background ,Ajax Asynchronous update of web pages . This means that you can load the entire page without reloading it , Update a part of the web page .
var startbtn = $('#start');
startbtn.click(function (event) {
// Press the start button
$.ajax({
type: 'GET',
url: 'http://192.168.0.112:8000/App/open/',
data: {
'data': 'OPEN',
},
});
});
there url It refers to the request to call http://192.168.0.112:8000/App/open/
At this address python function , take ‘OPEN’
Send to the back end , And this address's python Function as follows :
def open(request):
content = request.GET.get('data') # Get data from the front end
for i in range(2):
apphelper.senddata(content) # adopt udp send data ,for The statement indicates that the point is sent three times at a time ( Make sure to send successfully )
print(content)
return HttpResponse(content)
Here put the slave address ‘get’ To the data Information is assigned to content, Use one for Function call senddata() Function twice , Indicates repeated transmission , Ensure that the hardware end can effectively receive .
import socket
def senddata(content):
udp_send = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
data = content
udp_send.sendto(data.encode('gbk'), ("192.168.0.120", 4055))
udp_send.close()
The first code of the function is udp The fixed format of the agreement , And then put content Assign a value to data.
udp_send.sendto(data.encode('gbk'), ("192.168.0.120", 4055))
This sentence is sent , take data Code as ‘gbk’ Format ( A format that a computer can understand ), Send him to (“192.168.0.120”, 4055) This address and this port , So we can communicate under the LAN , The address is written on the hardware side wifi The address of the module , The port is the port sent to its address .
When the hardware sends information to the background , First, the front end js Call regularly by timer getjson Function request 'http://192.168.0.112:8000/App/get/'
function saver() {
$.getJSON('http://192.168.0.112:8000/App/get/', function (data) {
if (data['data']) {
console.log('success')
}
})
}
The background call get Function to store data in a database
def get(request):
getcontent = apphelper.getdata()
temp = Temperature()
temp.tnum = getcontent
temp.save()
alreadydel = Temperature.objects.all()[10]
if alreadydel:
Temperature.objects.all()[0].delete()
# final_msgs = serializers.serialize("json", msg_list)
data = {
'data': 'save_ok',
'status': 200
}
return JsonResponse(data=data)
By calling getdata Function fetch data , Then save the data , Then judge whether the database has stored ten pieces of data , If it is , We will delete the first data in the database , This will ensure that there is not too much data in the database , When we are showing data to the front end html When , Just take out all ten pieces of data in the database and arrange them for display .
def getdata():
udp_get = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
udp_get.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
# Sometimes we need a timeout mechanism to make it return after a certain time, regardless of whether there is data coming , Here we will use setsockopt() function
udp_get.bind(('192.168.0.112', 8888))
# receive data
recv_data = udp_get.recvfrom(1024) # Maximum bytes of received data recv_data Is a tuple ( data , The sender ip, port )
# recv_msg = recv_data[0] # data
# recv_addr = recv_data[1] # The address of the sender
# print(recv_data,recv_msg.decode('gbk'),recv_addr) #decode decode windows The system default encoding method is gbk
print(recv_data[0].decode('gbk'))
data = recv_data[0].decode('gbk')
udp_get.close()
return data
there udp.bind The binding is the address and port of your computer , The hardware side needs to send data to this address and port when sending data , It's like a bee storing honey in a fixed honeycomb , This process is point-to-point data retrieval
Of course , If the data we get is directly stored , We can't understand it when we need it , Therefore, it is necessary to decode before storing .