Encapsulates code which is responsible for room chat
Encapsulates chat code inside the closure
const createChat = function(room, messages, input, sendButton) {
Define local variables - sfu constants and colours
const constants = SFU.constants; const chatSelfColour = "green"; const chatTextColour = "black"; const chatOtherColour = "red"; const chatEventColour = "navy";
Subscribe to room events that are related to chat functionality
room.on(constants.SFU_ROOM_EVENT.MESSAGE, function(e) { appendMessage(e, chatOtherColour, chatTextColour); }).on(constants.SFU_ROOM_EVENT.JOINED, function(e) { appendMessage({ nickName: e.name, message: e.type }, chatOtherColour, chatEventColour); }).on(constants.SFU_ROOM_EVENT.LEFT, function(e) { appendMessage({ nickName: e.name, message: e.type }, chatOtherColour, chatEventColour); });
Subscribe to new message event. Once received display it in local chat
.on(constants.SFU_ROOM_EVENT.MESSAGE, function(e) { appendMessage(e, chatOtherColour, chatTextColour); })
Subscribe to new participant event. Once received display a special notification inside the local chat
.on(constants.SFU_ROOM_EVENT.JOINED, function(e) { appendMessage({ nickName: e.name, message: e.type }, chatOtherColour, chatEventColour); })
Subscribe to participant left event. Once received display a special notification inside the local chat
.on(constants.SFU_ROOM_EVENT.LEFT, function(e) { appendMessage({ nickName: e.name, message: e.type }, chatOtherColour, chatEventColour); });
Define the sendMessage function which will be responsible for parsing input, sending it to server and displaying it in the local chat as a message
const sendMessage = function() { let message = input.value; input.value = ""; room.sendMessage(message); appendMessage({ nickName: nickName.value, message: message }, chatSelfColour, chatTextColour); }
Tie send button to sendMessage function
sendButton.addEventListener("click", sendMessage);
Give ability to send message by pressing "enter"
input.onkeyup = function(e) { if (e.keyCode === 13) { if (e.shiftKey) { } else { sendMessage(); } return false; } }
Define function that will take care of formatting and displaying messages in local chat
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(); }
Scroll to bottom helper
const scrollToBottom = function() { messages.scrollTop = messages.scrollHeight; }
Timestamp helper
const getChatTimestamp = function() { let currentdate = new Date(); return currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(); }