Разница метода append

$('#messages').append($('<li>').text(`${data.username}: ${data.message}`));

Вы не совсем правильно перевели jquery в нативный js.

// $('<li>') Тут создается элемент, а не ищется в документе
// Поэтому нужно заменить getElementsByTagName на createElement
const messages = document.getElementById('messages');
const li = document.createElement('li');
// У обычных элементов нет функции text
li.innerText = `${data.username}: ${data.message}`
messages.append(li);