Как отобразить обновление, которое передается с сервера на веб-страницу без обновления?

Question

Я использую Django 1.10 в качестве серверного приложения, которое мы создали.

Я добавляю еще одну новую функцию, где веб-страница будет отображаться на гигантском мониторе. Эта веб-страница не будет показывать ничего, кроме одного гигантского номера.

У меня есть RFID-устройство, которое однажды обнаружит метку RFID и отправит запрос http на мой сервер Django.

Когда это произойдет, я хочу, чтобы номер из метки RFID отображался на упомянутой ранее веб-странице.

Я кратко прочитал о socket.io, но я хочу как можно больше оставаться во вселенной Django. Я также кратко прочитал о каналах Django.

Мои вопросы:

1. я должен использовать каналы Django для этого случая использования?
2. если да, то как мне это сделать с моим вариантом использования выше?

Answer 1

Это действительно зависит от использования отображаемой вами информации. Если вам не нужно, чтобы этот номер отображался в режиме реального времени, вы можете выбирать регулярный опрос AJAX один раз каждые X секунд, как упомянуто в комментарии zwer.

Теперь, если вам нужно, чтобы этот номер находился в режиме реального времени, тогда вам следует обратиться к веб-сокетам и каналам Django, действительно легко настроить базу кода, которая делает то, что вы хотите.

Предполагая, что вы установили каналы django и настроили свои настройки.

Сначала вам нужно настроить consumers.py а также routing.py логика, которая управляет веб-сокетами (думать о них как views.py а также urls.py но для логики websocket).

consumers.py

from channels import Group
from channels.auth import channel_session_user_from_http, channel_session_user


@channel_session_user_from_http
def ws_add(message):
    # Authenticates the client
    # ASGI WebSocket packet-received and send-packet message types
    # both have a "text" key for their textual data.
    message.reply_channel.send({
        "accept": True,
    })
    Group("rfid-group").add(message.reply_channel)


@channel_session_user
def ws_message(message):
    # You can process messages you receive from the socket here
    # Apply w/e logic validation


@channel_session_user
def ws_disconnect(message):
    Group("rfid-group").discard(message.reply_channel)

routing.py

from channels.routing import route
from .consumers import ws_message, ws_add, ws_disconnect

routing_routing = [
    route("websocket.connect", ws_add),
    route("websocket.receive", ws_message),
    route("websocket.disconnect", ws_disconnect),
]

Теперь вам нужно написать логику интерфейсного веб-сокета:

<script>
    socket = new WebSocket("ws://" + window.location.host);
    socket.onmessage = function(e) {
        console.log("Message received");
        // Process the received number here
        console.log(e.data);
    }
</script>

Это установит соединение через веб-сокет, подписывает клиента на группу под названием "rfid-group"теперь любое сообщение, отправленное этой группе, будет передаваться всем подписчикам этой группы, это может обрабатывать несколько клиентов.

Теперь нам нужна часть, которая будет прослушивать запрос от устройства rfid, обрабатывать его и отправлять результат на дисплей, это должно быть просто view как RFID-устройство будет отправлять обычную информацию HTTP.

from django.http import HttpResponse
from channels import Group


def rfid_processor(request):
    '''
      Consider authenticating your rfid_num producer to prevent
      someone messing with your api
    '''
    rfid_num = request.GET.get("rfid", "")
    if rfid_num:
        Group("rfid-group").send({"text": rfid_num})
        return HttpResponse(status=200)

    return HttpResponse(status=500)

Подключите его к URL:

from app.views import rfid_processor
urlpatterns = [
    url(r'^rfid/$', rfid_processor),
]

Это все, что вам нужно для настройки минимального рабочего проекта каналов django, который будет отображать число, полученное от устройства RFID, на экран (ы) дисплея.

Надеюсь это поможет.

Answer 2

Попробуйте прочитать на этом сайте. https://realpython.com/blog/python/django-and-ajax-form-submissions/ Я думаю, что это может помочь вам. Кроме того, HassenPy имеет довольно хороший ответ. Обязательно прочитайте этот ответ.