docbrown/app/javascript/src-sendbird/chat.js

import * as sendbirdLib from 'sendbird';
import Sendbird from './sendbird.js';
import Spinner from './elements/spinner.js';
import ChatBoard from './elements/chat-board.js';
import LoginBoard from './elements/login-board.js';
import MessageBoard from './elements/message-board.js';
import { hasClass } from './utils.js';

const ELEMENT_ID = 'sb_chat';
const ERROR_MESSAGE_SDK = 'Please import "SendBird SDK" on first.';
const ERROR_MESSAGE_APP_ID = 'Please pass "APP_ID" when start.';
const ERROR_MESSAGE_USER_INFO = 'Please pass "USER_ID" and "NICKNAME" when start.';
const ERROR_MESSAGE_CHANNEL_URL = 'Please pass "CHANNEL_URL" when start.';
const ERROR_MESSAGE = 'Please create "sb_chat" element on first.';

const MAX_MESSAGE_COUNT = 100;

window.WebFontConfig = {
  google: { families: ['Lato:400,700'] }
};

let chat;
let sendbird;
let spinner;
let board;
let loginBoard;
let messageBoard;

class LiveChat {
  constructor() {}

  start(appId, channelUrl) {
    if (!window.SendBird) {
      if (sendbirdLib !== null) {
        window.SendBird = sendbirdLib;
      } else {
        console.error(ERROR_MESSAGE_SDK);
        return;
      }
    }
    if (!appId) {
      console.error(ERROR_MESSAGE_APP_ID);
      return;
    }
    if (!channelUrl) {
      console.error(ERROR_MESSAGE_CHANNEL_URL);
      return;
    }
    this._getGoogleFont();

    chat = document.getElementById(ELEMENT_ID);
    if (chat) {
      this._init(appId, chat);

      loginBoard = new LoginBoard(board.self);
      loginBoard.addLoginBtnClickEvent(() => {
        if (!hasClass(loginBoard.loginBtn, loginBoard.classes.DISABLED)) {
          loginBoard.disableLoginBoard();
          spinner.insert(loginBoard.loginBtn);
          this._connectUser(loginBoard.userId.value, loginBoard.nickname.value, () => {
            spinner.remove(loginBoard.loginBtn);
            loginBoard.reset();
            spinner.insert(messageBoard.content);
            board.self.replaceChild(messageBoard.self, loginBoard.self);
            this._enterChannel(channelUrl);
          });
        }
      });
    } else {
      console.error(ERROR_MESSAGE);
    }
  }

  startWithConnect(appId, userId, nickname, callback) {
    if (!window.SendBird) {
      if (sendbirdLib !== null) {
        window.SendBird = sendbirdLib;
      } else {
        console.error(ERROR_MESSAGE_SDK);
        return;
      }
    }
    if (!appId) {
      console.error(ERROR_MESSAGE_APP_ID);
      return;
    }
    if (!userId || !nickname) {
      console.error(ERROR_MESSAGE_USER_INFO);
      return;
    }
    this._getGoogleFont();

    chat = document.getElementById(ELEMENT_ID);
    if (chat) {
      this._init(appId, chat);
      this._connectUser(userId, nickname, () => {
        spinner.insert(messageBoard.content);
        board.self.appendChild(messageBoard.self);
        callback();
      });
    } else {
      console.error(ERROR_MESSAGE);
    }
  }

  _init(appId, chat) {
    sendbird = new Sendbird(appId);
    spinner = new Spinner();
    board = new ChatBoard(chat);

    messageBoard = new MessageBoard();
    messageBoard.setScrollEvent(() => {
      sendbird.getMessageList((messageList) => {
        messageBoard.renderMessage(messageList, false, true);
      });
    });
    messageBoard.iconClickEvent(() => {
      let textMessage = messageBoard.getMessage();
      messageBoard.clearInput();
      if (textMessage) {
        sendbird.sendMessage(textMessage, (message) => {
          messageBoard.renderMessage([message], true, false);
          this._removeOverCountMessage();
        });
      }
    });
  }

  _getGoogleFont() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  }

  _connectUser(userId, nickname, callback) {
    sendbird.connect(userId, nickname, () => {
      callback();
    });
  }

  enterChannel(channelUrl, callback) {
    this._enterChannel(channelUrl,callback);
  }

  exitChannel(callback) {
    sendbird.exitChannel(callback);
  }

  _enterChannel(channelUrl, callback) {
    sendbird.enterChannel(channelUrl, () => {
      sendbird.getMessageList((messageList) => {
        spinner.remove(messageBoard.content);
        messageBoard.renderMessage(messageList, true, false);
        sendbird.createHandler((channel, message) => {
          if (channel.url == channelUrl) {
            let isBottom = messageBoard.isBottom();
            messageBoard.renderMessage([message], isBottom, false);
            if (!isBottom) {
              messageBoard.createBottomBtn();
            } else {
              this._removeOverCountMessage();
            }
          }
        });
      });

      if (callback) {
        callback();
      }
    });
  }

  _removeOverCountMessage() {
    let messages = messageBoard.content.children;
    let overCount = messages.length - MAX_MESSAGE_COUNT;
    if (overCount > 0) {
      var i;
      for (i = 0 ; i < overCount ; i++) {
        messageBoard.content.removeChild(messageBoard.content.firstChild);
      }
    }
  }

}

window.liveChat = new LiveChat();