$('#submit_button').on('click',function(e){
e.preventDefault(); // чтоб не сабмитить форму
data = {
'action': 'message',
'message': $('#chat_message').val() // достаем значения поля inputbox
};
ws.send(JSON.stringify(data)); // отправка сообщения в соединение
});
<ul id="message_box"></ul>
в элемент ul.
ws.onmessage = function (evt) {
jdata = JSON.parse(evt.data);
$('#message_box').append('<li>'+jdata.message+'</li>');
}
Сейчас каждое сообщение попадает в тот же канал (соединение) где было установлено соединение т.е. все остальные соединения (страницы браузера) эти сообщения получать не будут. Что бы это исправить нам необходимо при поступлении сообщения внутрь 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 принимать решения о том что должно сделать наше сообщение на фронтенде.