Доработки отправки сообщений. Вебсокетыю Питон. Доработки отправки сообщений. Вебсокетыю Питон. Доработки отправки сообщений. Вебсокетыю Питон.

Доработки, отправка сообщений из формы.

Open in new window

Создадим обработчик события нажатия на кнопку отправки сообщения.

$('#submit_button').on('click',function(e){
    e.preventDefault(); // чтоб не сабмитить форму
    data = {
        'action': 'message',
        'message': $('#chat_message').val() // достаем значения поля inputbox
    }; 
    ws.send(JSON.stringify(data));  // отправка сообщения в соединение
});

Submit message by click

Определим элемент ul на странице где будут сообщения.

<ul id="message_box"></ul>

Опишем метод onmessage js объекта ws где будем добавлять поступающие сообщения

в элемент ul.

ws.onmessage = function (evt) {
    jdata = JSON.parse(evt.data);    
    $('#message_box').append('<li>'+jdata.message+'</li>');
}

List of messages with adding

Сейчас каждое сообщение попадает в тот же канал (соединение) где было установлено соединение т.е. все остальные соединения (страницы браузера) эти сообщения получать не будут. Что бы это исправить нам необходимо при поступлении сообщения внутрь Tornado сервера в цикле отправлять входящее сообщение каждому активному соединению в глобальном словаре ws_clients.

def on_message(self, message):
    print('got message')
    json_message = json.loads(message)
    for c in ws_clients:
        ws_clients[c].write_message({'action': 'onmessage', 'message': json_message['message']})

Передадим на клиент его идентификатор соединения.

На всякий случай, он может понадобиться в будующем.

def open(self):
    print('Open connection')
    sign = hashlib.md5(str(datetime.datetime.now()).encode('utf-8')).hexdigest()
    self.client_id = sign
    # pass sign to client
    self.write_message(\ # многострочный разделитель для одной команды
        {\
            'action': 'set_sign',\
            'message': sign\
        }\
    )
    ...

Выведем этот идентификатор на странице.

ws.onmessage = function (evt) {
    jdata = JSON.parse(evt.data);    
    if( jdata['action'] == 'set_sign'){
        console.log(`Set sign ${jdata['message']}`);
        localStorage.setItem('chat-connection-id', jdata['message']);
    } else {      
        $('#message_box').append('<li>'+jdata.message+'</li>');
    }
}

Тут мы можем по параметру action принимать решения о том что должно сделать наше сообщение на фронтенде.

Other topics