...
1. Обертка для кода
createChat() code
Функция-обертка для вызова из основной логики, ограничивает область видимости
Code Block | ||||
---|---|---|---|---|
| ||||
const createChat = function(room, messages, input, sendButton) { |
2. Локальные переменные
Объявление локальных переменных: константы и цвета
...
3. Подписка на события комнаты
Подписка на события комнаты, имеющие отношение к функциям чата
...
Подписка на событие SFU_ROOM_EVENT.MESSAGE. При получении события, сообщение отображается в локальном чате
Code Block | ||||
---|---|---|---|---|
| ||||
.on(constants.SFU_ROOM_EVENT.MESSAGE, function(e) { appendMessage(e, chatOtherColour, chatTextColour); }) |
...
Подписка на событие SFU_ROOM_EVENT.JOINED. При получении, сообщение о входе участника отображается в локальном чате
Code Block | ||||
---|---|---|---|---|
| ||||
.on(constants.SFU_ROOM_EVENT.JOINED, function(e) { appendMessage({ nickName: e.name, message: e.type }, chatOtherColour, chatEventColour); }) |
...
Подписка на событие SFU_ROOM_EVENT.LEFT. При получении, сообщение о выходе участника отображается в локальном чате
Code Block | ||||
---|---|---|---|---|
| ||||
.on(constants.SFU_ROOM_EVENT.LEFT, function(e) { appendMessage({ nickName: e.name, message: e.type }, chatOtherColour, chatEventColour); }); |
4. Send message to other participants
sendMessage() code
Функция sendMessage реализует разбор пользовательского ввода, отправку сообщения серверу и отображение сообщения в локальном чате
...
Привязка кнопки Send к функции sendMessage
Code Block | ||||
---|---|---|---|---|
| ||||
sendButton.addEventListener("click", sendMessage); |
Отправка сообщения по нажатию Enter
Code Block | ||||
---|---|---|---|---|
| ||||
input.onkeyup = function(e) { if (e.keyCode === 13) { if (e.shiftKey) { } else { sendMessage(); } return false; } } |
...
Функция реализует форматирование и отображение сообщений в локальном чате
appendMessage() code
Code Block | ||||
---|---|---|---|---|
| ||||
const appendMessage = function(msg, nickColour, msgColour) { let message = document.createElement('div'); message.setAttribute("class","message"); messages.appendChild(message); let nickDiv = document.createElement('div'); nickDiv.style.color = nickColour; nickDiv.innerText = getChatTimestamp() + " " + msg.nickName + ":"; message.appendChild(nickDiv); let msgDiv = document.createElement('div'); msgDiv.style.color = msgColour; msgDiv.innerText = msg.message; message.appendChild(msgDiv); scrollToBottom(); } |
Вспомогательная функция для прокрутки списка сообщений вниз
scrollToBottom() code
Code Block | ||||
---|---|---|---|---|
| ||||
const scrollToBottom = function() { messages.scrollTop = messages.scrollHeight; } |
Вспомогательная функция для вывода времени
getTimeStamp() code
Code Block | ||||
---|---|---|---|---|
| ||||
const getChatTimestamp = function() { let currentdate = new Date(); return currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(); } |
...