SFU SDK 1.0 - EN
Space shortcuts
Page tree

Versions Compared

Old Version 1

changes.mady.by.user admin

Saved on

compared with

New Version Current

changes.mady.by.user admin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

This module encapsulates code which is responsible for room chat

1. Wrapper function

createChat() code

Encapsulates chat code inside the closure

Code Block
languagejs
themeRDark
const createChat = function(room, messages, input, sendButton) {

2. Local variables

code

Define local variables - SFU constants and colours

Code Block
languagejs
themeRDark
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
languagejs
themeRDark
    room.on(constants.SFU_ROOM_EVENT.MESSAGE, function(e) {
        appendMessage({
            userId: getUserId(e.message),
            nickName: getNickName(e.message),
            message: getMessage(e.message)
        }, chatOtherColour, chatTextColour);
    }).on(constants.SFU_ROOM_EVENT.JOINED, function(e) {
        appendMessage({
            userId: getShortUserId(e.userId),
            nickName: e.name,
            message: e.type
        }, chatOtherColour, chatEventColour);
    }).on(constants.SFU_ROOM_EVENT.LEFT, function(e) {
        appendMessage({
            userId: getShortUserId(e.userId),
            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
languagejs
themeRDark
    room.on(constants.SFU_ROOM_EVENT.MESSAGE, function(e) {
        appendMessage({
            userId: getUserId(e.message),
            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
languagejs
themeRDark
    room.on(constants.SFU_ROOM_EVENT.MESSAGE, function(e) {
        ...
    }).on(constants.SFU_ROOM_EVENT.JOINED, function(e) {
        appendMessage({
            userId: getShortUserId(e.userId),
            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
languagejs
themeRDark
    room.on(constants.SFU_ROOM_EVENT.MESSAGE, function(e) {
        ...
    }).on(constants.SFU_ROOM_EVENT.LEFT, function(e) {
        appendMessage({
            userId: getShortUserId(e.userId),
            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

Note that messages is sent using WebRTC data channels

Code Block
languagejs
themeRDark
    const sendMessage = async function() {
        let message = input.value;
        input.value = "";
        await room.sendMessage(message);
        appendMessage({
            userId: getShortUserId(room.userId()),
            nickName: nickName.value,
            message: message
        }, chatSelfColour, chatTextColour);
    }

Tie send button to sendMessage function

code

Code Block
languagejs
themeRDark
sendButton.addEventListener("click", sendMessage);

Give ability to send message by pressing Enter

code

Code Block
languagejs
themeRDark
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
languagejs
themeRDark
    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 + "#" + msg.userId + ":";
        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
languagejs
themeRDark
const scrollToBottom = function() {
    messages.scrollTop = messages.scrollHeight;
}

Timestamp helper

getTimeStamp() code

Code Block
languagejs
themeRDark
const getChatTimestamp = function() {
    let currentdate = new Date();
    return currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
}

6. Get sender user id from the message

getUserId() code

Code Block
languagejs
themeRDark
    const getUserId = function(msgData) {
        let userId = "unknown";
        if (msgData.userId) {
            userId = msgData.userId;
        } else if (msgData.message.userId) {
            userId = msgData.message.userId;
        }
        return getShortUserId(userId);
    }

7. Get sender nickname from the message

getNickName() code

Code Block
languagejs
themeRDark
    const getNickName = function(msgData) {
        let nickName = "unknown";
        if (msgData.nickName) {
            nickName = msgData.nickName;
        } else if (msgData.message.nickName) {
            nickName = msgData.message.nickName;
        }
        return nickName;
    }

8. Get the message payload

getMessage() code

Code Block
languagejs
themeRDark
    const getMessage = function(msgData) {
        let message = "";
        if (msgData.message) {
            message = JSON.parse(msgData.message).payload;
        }
        return message;
    }