Video Live Chat Demo App

Stack Used
Live Demo
Installing Amity Chat SDK
Using Chatbox Component
ChatBox Folder Structure
Detail of Each Folder
Customization

Stack Used

Name	Official Document
Vue.js	link
Buefy - UI Framework	link
Amity Chat SDK	link

Live Demo

Try me on CodeSandBox

Installing Amity Chat SDK

Add the SDK to your project via npm or yarn

Using npm:

$ npm install eko-sdk —save

Using yarn:

$ yarn add eko-sdk

Using Chatbox Component

Import & Declare ChatBox.vue to your component that going to use it.
Implement it as a tag in your … . It can declare as either or
Pass data to the the component via following props

api_key
userId
channelId

Example of implementation in template and script tag

<template>
  ...
  <chat-box :api_key="api_key" :userId="user" :channelId="channel" />
  ...
</template>

<script>
import ChatBox from "@/chatbox/ChatBox.vue";

export default {
  components: {
    ChatBox,
    ...
  },
  ...
};
</script>

ChatBox Folder Structure

In chatbox folder, It contains many sub-components which will combined together to create the main component ( Chatbox.vue ).

#	Folde Name	Description
1	main	Contains whole chatbox UI
2	message	Contains UI of each cell of message
3	reaction	Contains UI of bubble reaction when on clicked and reaction list of each message
-	config.js	Contains configuration file for UI customization e.g. chatbox background color
-	sdkInstance.js	Contains singleton class for handling EkoSDK

Detail of Each Folder

Main Folder

#	File Name	Responsibility
1	ChatBoxHeader.vue	-
2	ChatBoxMessageList.vue	Get All Messages in Channel
3	ChatBoxInput.vue	Send Messages to the Channel

Get All Messages in Channel

To query all messages in the channel, you need to call function messageRepo.messagesForChannel. Then it will return a LiveCollection of all messages in the specified channel that you can observe the LiveCollection. So you can update your screen whenever you receive new messages.

import { MessageRepository } from "eko-sdk";
const messageRepo = new MessageRepository();

beforeMount() {
  this.liveCollection = messageRepo.messagesForChannel({
    channelId: this.channel,
  });
  this.liveCollection.on("dataUpdated", (data) => {
    // called when any updated on channel e.g. new message, new reaction
  });

  this.liveCollection.on("dataError", (error) => {
    // called when any error found on channel
  });
}

And you need to unobserve data changes once you are finished.

beforeDestroy() {
  // unobserve data changes once you are finished
  this.liveCollection.removeAllListeners("dataUpdated");
  this.liveCollection.removeAllListeners("dataError");
}

Send Messages to the Channel

To send a new messege in channel, you can basically initiate it with the following scripts

import { MessageRepository } from "eko-sdk";
const messageRepo = new MessageRepository();

const messageLiveObject = messageRepo.createTextMessage({
  channelId: "CHANNEL_ID",
  text: "String you want to send",
});

Message Folder

#	File Name	Responsibility
1	ProfilePicture.vue	-
2	ChatMessage.vue	-
3	MessageDescription.vue	-
3	MessageOptions.vue	Flag / UnFlag Message

Flag / UnFlag Message

In order to flag or unflag the messages, you need to import MessageFlagRepository for using its actions.

import { MessageFlagRepository } from 'eko-sdk';
const flagRepo = new MessageFlagRepository("MESSAGE_ID");

To flag a message, call the following method:

flagRepo.flag()

To unflag a message, call the following method:

flagRepo.unflag()

Reaction Folder

#	File Name	Responsibility
1	MyReactionList.vue	Create Reaction on Message
2	MessageReaction.vue	-

Create Reaction on Message

In order to make a reaction on message, you need to import MessageRepository for getting message's model since ReactorRepository require it to done the action.

import { MessageRepository, ReactorRepository } from "eko-sdk";
const messageRepo = new MessageRepository();

After get the model, pass it in to the react and call for addReaction() and pass along the identifier for your reaction.

const liveObject = messageRepo.messageForId("MESSAGE_ID");
const messageModel = liveObject.model;
const reactorRepo = new ReactorRepository(messageModel);
reactorRepo.addReaction("REACTION_NAME");

Customization

ChatBox component allow you to do some UI customization on following list.

font_color
chat background color
chat input background color

This can be done by setting variables inside (config.js) file with CSS color values as below table.

export const CHATBOX_STYLE = {
  font_color: "#363636", // Black
  chat_color: "#57de8573", // Green
  composer_color: "#ffdd57" // Yellow,
};

Format	Syntax	Example
Hex Code	#RRGGBB	"#FF0000"
Short Hex Code	#RGB	"#6A7"
RGB %	rgb(rrr%,ggg%,bbb%)	"rgb(50%,50%,50%)"
RGB Absolute	rgb(rrr,ggg,bbb)	"rgb(0,0,255)"
keyword	aqua, black, etc.	"teal"

Then, you will get the customization chatbox following with your configuration!!

wajiw/VideoLiveChatWeb