Проблема в том, что вы не указали, где отображать сообщения. Как я понял, у вас нет проблем с созданием комнат, поэтому я объясню шаг за шагом, как обращаться с этим пунктом.
Согласно вашему коду это связь между сервером и клиентом для отправки сообщений
//server.js
socket.on('chat', function(data) {
io.to(rooms).emit('chat', data);
})
//chat.jade
btn.addEventListener('click', function() {
socket.emit('chat', {
message: message.value,
handle: handle.value
})
})
Первый клиент отправляет сообщение (набрав в поле ввода) на сервер, и когда сервер получает его, он должен отправить то же сообщение всем другим клиентам. как только клиенты получают это сообщение, клиенты должны выяснить, как его отобразить. Но когда сервер отправляет полученное сообщение, вы должны инициировать новое событие. давайте назовем это дисплеем. поэтому ваш код должен быть таким:
//server.js
//i always use arrow functions, but I will follow along your code
socket.on('chat', function(data) {
io.to(rooms).emit('display', data);
})
Теперь ваш клиент должен прослушивать это событие и определять, где его отображать:
// chat.jade
socket.on('display', (data) => {
const displayedMessage = pug.render(messageTemplate, {
message: data.message,
})
$messages.insertAdjacentHTML('beforeend', displayedMessage)
})
Поскольку Джейд был переименован в мопса, я использовал мопса здесь. Поэтому я буду рендерить {message: data.message} в html в теге сценария, а затем помещать его в сообщение DOM ELEMENT $.
Я не уверен, где вы хотите визуализировать handle:handle.value Я просто покажу, как отобразить сообщение. Точно так же вы можете справиться с этим.
Теперь, что такое messageTemplate, $messages и insertAdjacentHTML ()?
создать тег div и тег script в вашем html
//this is where you are gonna display the message
<div id="messages" class="chat__messages"></div>
<!-- template messages -->
<script id="message-template" type="text/html">
<div>
<p>{{message}}</p>
</div>
</script>
// chat.jade
const $messages = document.getElementById("messages");
const messageTemplate = document.getElementById("message-template").innerHTML;
Метод insertAdjacentHTML () вставляет текст в виде HTML в указанную позицию. Вы можете получить больше объяснений и примеров здесь:
https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp
код сокета io выглядит длинным и сложным, но если вы знаете логику и шаг за шагом продвигаетесь, ее легко реализовать.