...
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 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
| Code Block |
|---|
|
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);
}); |
SFU_ROOM_EVENT.MESSAGE
Subscribe to new message event. Once received display it in local chat
code
| Code Block |
|---|
|
.on(constants.SFU_ROOM_EVENT.MESSAGE, function(e) {
appendMessage({
nickName: getNickName(e.message),
message: getMessage(e.message)
}, chatOtherColour, chatTextColour);
}) |
SFU_ROOM_EVENT.JOINED
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);
}) |
SFU_ROOM_EVENT.LEFT
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
...
Tie send button to sendMessage function
code
| Code Block |
|---|
|
sendButton.addEventListener("click", sendMessage); |
Give ability to send message by pressing "enter"Enter
code
| Code Block |
|---|
|
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
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();
} |
...