实现HTML5 Django网络应用程序的实时通知系统 [英] Implement a real-time notification system for an HTML5 Django web app

问题描述

我目前正在使用Django / apache提供的HTML5网络应用程序。

I'm currently working on a HTML5 web-app served by Django/apache.

该应用的目标是监控几个设备：侧面逻辑是用Angular编写的，所有的数据都来自基于JSON的REST类似的对后端的调用（我认为很常见的东西）。

The app's goal is to monitor a couple of devices : all the client-side logic is written with Angular and all the data comes from JSON-based REST-like calls made to the backend (pretty common stuff I assume).

好，到目前为止。现在我想实现一个通知系统：可以对外部事件做出反应的东西，并通知所有正在运行的网页应用程序实例需要在页面上刷新某些内容。我真的不希望所有的实例只是轮询服务器，因为这似乎是次优的。特别是在移动设备上，这可能会很快耗尽电池。

This is working rather well, so far. Now I'd like to implement a notification system: something that would react to external events and would notify all the running web-app instances that something needs to be refreshed on the page. I really don't want all instances to just poll the server because that seems sub-optimal. Especially on mobile devices where this would likely drain the battery quickly.

我对这种东西很少有经验（我更多的是后端开发人员，所以这个对我来说都很新奇）我第一次考虑从JavaScript方面向服务器发出长时间的HTTP请求：此请求只会在超时时间后（在这种情况下客户端将不得不重试并立即等待），或者事情发生了变化（然后它会回复一些有关需要刷新的模型的信息）。

I have very little experience with this kind of stuff (I'm more of a backend developer, so this is all pretty new to me). I was first thinking of making a long-lived HTTP request from the Javascript side to the server: this request would only give a result after either a timeout period (in which case the client would have to retry and wait again, right away) or after something changed (it would then reply with some information about models that needs to be refreshed).

这似乎可以在理论上工作，但我想我会而是首先要问，因为它似乎很常见，如果没有这种任务的框架，我会感到惊讶。

This seems like it could work in theory, but I figured I'd rather ask first because it seems so common, I would be surprised if no framework existed for this kind of task.

服务器正在VM中运行，我拥有一个总控制：意味着我可以安装我需要实现的任何软件。我想避免不必使用多个网络端口尽可能多，但如果它使事情变得更加容易，那么很好。

The server is running in a VM over which I have a total control: meaning I can install whatever software I need to implement that. I'd like to avoid having to use several network ports as much as possible but if it makes things really easier, then it's fine.

推荐答案

实时更新可以以（至少）两种方式完成：（1）连续轮询，（2）Websocket协议

Real-time updation can be done in (at least) two approaches: (1) continuous polling, (2) Websocket Protocol

我个人最喜欢的是Websocket协议（但是较旧的浏览器不支持它，所以可能需要在连续或长时间轮询时进行回退）。 Django（1.9）现在不支持WebSocket协议。所以你的Django项目将需要一个可以帮助实现Websocket协议的sidekick。常见的选择是龙卷风和NodeJS。我在下面显示龙卷风示例：

My personal favourite is Websocket Protocol (but older browsers don't support it, so may be, you'll need a fallback on continuous or long polling). Django (1.9) does not support WebSocket protocol as of now. So your Django project will need a sidekick which can help implementing Websocket protocol. Common choices are Tornado and NodeJS. I am showing Tornado example below:

创建辅助龙卷风项目（您可能需要在生产环境中的不同服务器上托管它）。在那里你可以有一个 WebSocketHandler ，如下所示：

Create an auxiliary tornado project (You might have to host it on a different server in production environment). There you can have a WebSocketHandler as shown below:

import tornado.websocket

# suppose URL for this handler is localhost:8888/my_handler/
class MyWebSocketHandler(tornado.websocket.WebSocketHandler):
    waiters = set()

    def open(self):
        MyWebSocketHandler.waiters.add(self)

    def on_close(self):
        MyWebSocketHandler.waiters.remove(self)

    def on_message(self, message):
        MyWebSocketHandler.send_updates(message)

    @classmethod
    def send_updates(cls, stuff_django_project_sends):
        for waiter in cls.waiters:
            waiter.write_message(stuff_django_project_sends)

在您的HTML5应用程序中，你会有这样的东西（这是简单的JavaScript，我不知道AngularJS是等价的）：

In your HTML5 app, you will have something like this (This is plain JavaScript, I don't know it's AngularJS equivalent):

var url = "ws://localhost:8888/my_handler/";
socket = new WebSocket(url);  // establish connection with WebSocketHandler to listen to updates
socket.onmessage = function(event) {
    var stuff_django_project_sent = JSON.parse(event.data));
    // do something with this stuff now
}

现在在你的Django项目也将建立与此WebSocketHandler的连接。但是您会发送更新到Tornado项目，然后将其发送到HTML5应用程序。

Now in your Django Project too, you'll establish connection to this WebSocketHandler. But there you will send updates to Tornado project, which will then, send updates to HTML5 app.

首先，您必须安装 websocket-client 包在django中。然后，您将执行以下操作：

First you'll have to install websocket-client package in django. Then you'll do something like:

from websocket import create_connection
import json

url = "ws://localhost:8888/my_handler/"
web_socket = create_connection(url)
web_socket.send(json.dumps({'stuff': 'to send'}))

这篇关于实现HTML5 Django网络应用程序的实时通知系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！