Encapsulates code which is responsible for room chat
1. Wrapper function
createChat() code
Encapsulates chat code inside the closure
Code Block |
---|
|
const createChat = function(room, messages, input, sendButton) { |
2. Local variables
code
Define local variables - sfu constants and colours
Code Block |
---|
|
const constants = SFU.constants;
const chatSelfColour = "green";
const chatTextColour = "black";
const chatOtherColour = "red";
const chatEventColour = "navy"; |
3. Subscribe to room events
code
Subscribe to room events that are related to chat functionality
...
Subscribe to new message event. Once received display it in local chat
code
Code Block |
---|
|
.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
code
Code Block |
---|
|
.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
code
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
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
Node that messages is sent using WebRTC data channels
Code Block |
---|
|
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
code
Code Block |
---|
|
sendButton.addEventListener("click", sendMessage); |
Give ability to send message by pressing "enter"
code
Code Block |
---|
|
input.onkeyup = function(e) {
if (e.keyCode === 13) {
if (e.shiftKey) {
} else {
sendMessage();
}
return false;
}
} |
5. Display chat messages locally
Define function that will take care of formatting and displaying messages in local chat
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();
} |
Scroll to bottom helper
scrollToBottom() code
Code Block |
---|
|
const scrollToBottom = function() {
messages.scrollTop = messages.scrollHeight;
} |
Timestamp helper
getTimeStamp() code
Code Block |
---|
|
const getChatTimestamp = function() {
let currentdate = new Date();
return currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
} |
...