django部署:ASGI应用程序不加载静态文件

时间:2017-09-09 18:37:28

标签: jquery django heroku deployment

WhiteNoise介绍自己:whitenoise适用于任何 WSGI 兼容应用。
然后,我应该使用哪个包 ASGI app ??

我们假设网址/chatting/index.html呈现。

我们第一次访问/chatting/。当我点击 html li标记时,会执行此代码。

// Room join/leave
$("li.room-link").click(function () {
    roomId = $(this).attr("data-room-id");
    if (inRoom(roomId)) {
        // Leave room
        $(this).removeClass("joined");
        webSocketBridge.send({
            "command": "leave",
            "room": roomId
        });
    } else {
        // Join room
        $(this).addClass("joined");
        webSocketBridge.send({
            "command": "join",
            "room": roomId
        });
    }
});

before

after

加入类成功添加!!

然而,之后(点击事件)什么也没发生 当我看到日志时,似乎websocket连接仍在工作。

enter image description here

目前在我的项目中, ASGI 应用无法加载jQuery静态文件 我应该如何为ASGI app加载jquery静态文件。

  

我在Heroku上部署了我的django项目。所以我想在生产环境中修复它。(在开发环境中它运行正常。)

下面是我的heroku Procfile设置。

web: gunicorn multichat.wsgi --log-file -
web2: daphne multichat.asgi:channel_layer --port $PORT --bind 0.0.0.0 -v2
worker: python manage.py runworker -v2

它是index.html完整代码。

{% extends "base.html" %}

{% block title %}MultiChat Example{% endblock %}
{% block header_text %}MultiChat Example{% endblock %}

{% block content %}

    <ul class="rooms">
        {% for room in rooms %}
            <li class="room-link" data-room-id="{{ room.id }}">{{ room }}</li>
        {% empty %}
            <p class="empty">No chat rooms defined. Maybe make some in the <a href="{% url 'admin:index' %}">admin</a>?</p>
        {% endfor %}
    </ul>

    <div id="chats">
    </div>

{% endblock %}


{% block extra_body %}
    <script>
        $(function () {
            // Correctly decide between ws:// and wss://
            var ws_path = "/chat/stream/";
            console.log("Connecting to " + ws_path);
            var webSocketBridge = new channels.WebSocketBridge();
            webSocketBridge.connect(ws_path);
            // Handle incoming messages
            webSocketBridge.listen(function(data) {
                // Decode the JSON
                console.log("Got websocket message", data);
                // Handle errors
                if (data.error) {
                    alert(data.error);
                    return;
                }
                // Handle joining
                if (data.join) {
                    console.log("Joining room " + data.join);
                    var roomdiv = $(
                            "<div class='room' id='room-" + data.join + "'>" +
                            "<h2>" + data.title + "</h2>" +
                            "<div class='messages'></div>" +
                            "<form><input><button>Send</button></form>" +
                            "</div>"
                    );
                    // Hook up send button to send a message
                    roomdiv.find("form").on("submit", function () {
                        webSocketBridge.send({
                            "command": "send",
                            "room": data.join,
                            "message": roomdiv.find("input").val()
                        });
                        roomdiv.find("input").val("");
                        return false;
                    });
                    $("#chats").append(roomdiv);
                    // Handle leaving
                } else if (data.leave) {
                    console.log("Leaving room " + data.leave);
                    $("#room-" + data.leave).remove();
                    // Handle getting a message
                } else if (data.message || data.msg_type != 0) {
                    var msgdiv = $("#room-" + data.room + " .messages");
                    var ok_msg = "";
                    // msg types are defined in chat/settings.py
                    // Only for demo purposes is hardcoded, in production scenarios, consider call a service.
                    switch (data.msg_type) {
                        case 0:
                            // Message
                            ok_msg = "<div class='message'>" +
                                    "<span class='username'>" + data.username + "</span>" +
                                    "<span class='body'>" + data.message + "</span>" +
                                    "</div>";
                            break;
                        case 1:
                            // Warning / Advice messages
                            ok_msg = "<div class='contextual-message text-warning'>" + data.message +
                                    "</div>";
                            break;
                        case 2:
                            // Alert / Danger messages
                            ok_msg = "<div class='contextual-message text-danger'>" + data.message +
                                    "</div>";
                            break;
                        case 3:
                            // "Muted" messages
                            ok_msg = "<div class='contextual-message text-muted'>" + data.message +
                                    "</div>";
                            break;
                        case 4:
                            // User joined room
                            ok_msg = "<div class='contextual-message text-muted'>" + data.username +
                                    " joined the room!" +
                                    "</div>";
                            break;
                        case 5:
                            // User left room
                            ok_msg = "<div class='contextual-message text-muted'>" + data.username +
                                    " left the room!" +
                                    "</div>";
                            break;
                        default:
                            console.log("Unsupported message type!");
                            return;
                    }
                    msgdiv.append(ok_msg);
                    msgdiv.scrollTop(msgdiv.prop("scrollHeight"));
                } else {
                    console.log("Cannot handle message!");
                }
            });
            // Says if we joined a room or not by if there's a div for it
            inRoom = function (roomId) {
                return $("#room-" + roomId).length > 0;
            };
            // Room join/leave
            $("li.room-link").click(function () {
                roomId = $(this).attr("data-room-id");
                if (inRoom(roomId)) {
                    // Leave room
                    $(this).removeClass("joined");
                    webSocketBridge.send({
                        "command": "leave",
                        "room": roomId
                    });
                } else {
                    // Join room
                    $(this).addClass("joined");
                    webSocketBridge.send({
                        "command": "join",
                        "room": roomId
                    });
                }
            });
            // Helpful debugging
            webSocketBridge.socket.onopen = function () {
                console.log("Connected to chat socket");
            };
            webSocketBridge.socket.onclose = function () {
                console.log("Disconnected from chat socket");
            }
        });
    </script>
{% endblock %}

我引用了这个project
我很感激你的帮助。

1 个答案:

答案 0 :(得分:0)

WhiteNoise将使用频道,只需将其添加到settings.py中的MIDDLEWARE列表: http://whitenoise.evans.io/en/stable/django.html#enable-whitenoise