Как можно загружать статические файлы (изображения, документы)? - PullRequest
0 голосов
/ 30 сентября 2019

Я только что закончил обучение каналам и изо всех сил пытался писать коды для загрузки статических файлов в течение почти недели. Не могли бы вы помочь мне написать как js, так и consumer.py? Заранее спасибо.

Я особенно не понимаю:

  1. как писать js для отправки статических данных в consumer.py
  2. как получить статические данные вconsumer.py от js.

Мои коды:

js
<script>

   var obj = document.getElementById('talk_element');
            obj.scrollTop = obj.scrollHeight;

    var roomName = {{ room.pk }};

    var chatSocket = new WebSocket(
        'ws://' + window.location.host +
        '/ws/room/' + roomName + '/');

    chatSocket.onmessage = function(e) {
        var data = JSON.parse(e.data);
        var message = data['message'];
        var file = data['file'];
        var created_by = data['created_by']

        var user = `{{ user }}`;

        if (created_by == user) {
            document.getElementById('talk_element').innerHTML += `
            <li class="container card-text text-right text-black">
                <span class="speech-bubble-user text-left">${message}</span>
                <img src="${file}" max-width="350" height=auto/>
             </li>`;
        } else {
            document.getElementById('talk_element').innerHTML += `
            <li class="container card-text text-left text-black">
                <span class="container speech-bubble text-left">${message}</span>
             </li>`;
            }
    };

    chatSocket.onclose = function(e) {
        console.error('Chat socket closed unexpectedly');
    };

    document.querySelector('#chat-message-input').focus();
    document.querySelector('#chat-message-input').onkeyup = function(e) {
        if (e.keyCode === 13 && e.shiftKey) {  // enter, return
            document.querySelector('#chat-message-submit').click();
        }
    };

    document.querySelector('#chat-message-submit').onclick = function(e) {
        var messageInputDom = document.querySelector('#chat-message-input');
        var message = messageInputDom.value;
        var userInputDom = document.querySelector('#creat_by');
        var user = userInputDom.value;
        var fileInputDom = document.querySelector('#document');
        var file = fileInputDom.value;

        chatSocket.send(JSON.stringify({
            'message': message,
            'created_by':user,
        }), file );

        messageInputDom.value = '';
    };




</script>

consumer.py

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_pk']
        self.room_group_name = 'chat_%s' % self.room_name

        # Join room group
        async_to_sync(self.channel_layer.group_add)(
            self.room_group_name,
            self.channel_name
        )

        self.accept()

    def disconnect(self, close_code):
        # Leave room group
        async_to_sync(self.channel_layer.group_discard)(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    def receive(self, text_data=None):
        self.user = self.scope["user"]
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        created_by = text_data_json['created_by']
        file = text_data_json['created_by']
        room = Room.objects.get(pk=self.room_name)
        talk = Talk.objects.create(
            room=room,
            message=message,
            created_by=self.user,
            date=timezone.now
        )



        # Send message to room group

        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message,
                'created_by':created_by
            }
        )

    # Receive message from room group
    def chat_message(self, event):
        message = event['message'] 
        created_by = event['created_by']

        # Send message to WebSocket
        self.send(text_data=json.dumps({
            'message': message,
            'created_by':created_by
        }))

1 Ответ

0 голосов
/ 27 октября 2019

Если вы хотите, чтобы JavaScript и Python правильно взаимодействовали, вам необходимо запустить сервер WebSocket . Например, вы можете создать один из них, используя Tornado или использовать этот .

После того, как он у вас есть, вам нужно сделать несколько вещей в сторона клиента :

  1. Создание объекта WebSocket для установления соединения

    var exampleSocket = new WebSocket("wss://www.example.com/socketserver");
    
  2. Отправка данных (в виде строки, BLOB-объекта илиArrayBudder) на сервер вот так

    exampleSocket.onopen = function (event) {
       exampleSocket.send("Here's some text that the server is urgently awaiting!"); 
    };
    

    Если вы хотите передавать объекты, рассмотрите возможность использования JSON

    function sendText() {
        // Construct a msg object containing the data the server needs to process the message.
        var msg = {
            type: "message",
            text: document.getElementById("text").value,
            id:   clientID,
            date: Date.now()
        };
    
       // Send the msg object as a JSON-formatted string.
       exampleSocket.send(JSON.stringify(msg));
    } 
    
  3. Получение сообщений с сервера

    exampleSocket.onmessage = function (event) {
        console.log(event.data);
    }
    

    Если вы отправили объект JSON, код, который интерпретирует сообщение, может выглядеть следующим образом

    exampleSocket.onmessage = function(event) {
        var f = document.getElementById("chatbox").contentDocument;
        var text = "";
        var msg = JSON.parse(event.data);
        var time = new Date(msg.date);
        var timeStr = time.toLocaleTimeString();
    
        switch(msg.type) {
            case "id":
                clientID = msg.id;
                setUsername();
                break;
            case "username":
                text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
                break;
            case "message":
                text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
                break;
            case "rejectusername":
                text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
                break;
            case "userlist":
                var ul = "";
                for (i=0; i < msg.users.length; i++) {
                    ul += msg.users[i] + "<br>";
                }
                document.getElementById("userlistbox").innerHTML = ul;
                break;
         }
    
         if (text.length) {
             f.write(text);
             document.getElementById("chatbox").contentWindow.scrollByPages(1);
         }
    };
    
  4. Закрыть соединение

    exampleSocket.close();
    
...