# Preparations
Let's look at the required library and project structure to run the app.
# Project folder structure
├─ Project
│ ├─ js
│ │ ├─ vchatcloud.js
│ │ ├─ sockjs.min.js
│ │ ├─ popup.js
│ │ ├─ count.js
│ │ ├─ emoji.js
│ │ ├─ sample.js
│ │ └─ jquery.min.js
│ └─ css
│ └─ style.css
└─ index.html
2
3
4
5
6
7
8
9
10
11
12
# Required library
Two libraries are required to use vchatCloud.js.
Please proceed with the download and include it in the project, or add a library by entering the cdn address.
For the structure of this project folder, please refer to Project folder structure
.
# Create a chat area
In the chat area, you can enter'chat post / emoticon' and whisper, and it consists of a chat window in which a new post is input every time a chat post is entered.
The html below is composed only and you only need to put it in the chat area, and it does not actually work, so please check only the screen is normally exposed.
html code view
<!-- Chat window surface area -->
<section id="chat">
<!-- Error display popup -->
<div class="errorpopup">
<p><i class="fas fa-exclamation-circle"></i></p>
<p>An error has occurred because the system is not smooth. After a while, please join again.</p>
<a class="popupbtn" href="#!">Close</a>
</div>
<!-- End of error display popup -->
<!-- Login popup -->
<div class="enterypopup">
<p class="enterypopup_title">Join live chat</p>
<form>
<p><label for="room">Chat room number:</label><input type="text" id="room" value=""></p>
<p><label for="id">user name:</label><input type="text" id="id" value=""></p>
</form>
<a class="popupbtn" href="#!">OK</a><a class="popupbtn" href="#!">Cancel</a>
</div>
<!-- End of login popup -->
<!-- Chat field -->
<div class="chat_field">
<div class="top">
<p>Live chat <i class="fas fa-sign-out-alt closebtn"></i></p>
</div>
<div class="middle">
<div class="content1" id="content1">
<!-- Chat surface area -->
<!-- Chat post sample div
<div class="chat-content">
<a class="name" href="#!">Ju-Jitsu Genius</a>
<span class="comment">Daegu is not very rainy and hot.</span>
</div>
-->
<!-- End of chat surface-->
<!-- Pop-up area exposed when the name is clicked -->
<div class="popupLayer">
<div class="popup">
<ul class="popup_content">
<li class="whisper"><a href="#!"><i class="fas fa-comment-alt"></i>Send a whisper</a>
<div id="whisper">
<form><input type="text" name="message"><button>Send</button></form>
</div>
</li>
</ul>
</div>
</div>
<!-- Pop-up area exposed when the name is clicked -->
</div>
</div>
<div class="bottom">
<div class="content2">
<div class="name">Hong Gil-dong</div>
<div class="textbox" id="content" maxlength="200" contenteditable="true" placeholder="enter message"></div><!-- Emoji area -->
<div class="emoji">
<!--
<a href="#none"><img src="img/emoji/smile_001.png" alt="smile_001"></a>
-->
</div>
<!-- End of emoticon area-->
<div class="buttons">
<ul class="btn_left">
<!-- Emoticon icon -->
<li><a href="#!" class="ico_emoji show"><i class="fas fa-laugh"></i></a></li>
<!-- keyboard icon -->
<li><a href="#!" class="ico_keyboard"><i class="fas fa-keyboard"></i></a></li>
</ul>
<ul class="btn_right">
<li><span class="counter" id="counter">0</span></li>
<li><a href="#!" id="sendCounter"><i class="fas fa-paper-plane"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End of chat field -->
</section>
<!-- End of chat window surface area-->
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# vchatcloud object
# vchatcloud class declaration
vchatcloud.js must be instantiated by declaring a variable.
You can create a channel method instance using the created instance.
var vChatCloud = new VChatCloud();
# channel method declaration
channel is a method implemented in the vchatCloud instance.
You can enter the chat room and control message events by using the channel method.
The code below only deals with entering the chat room, and for message transmission and notification, please check the left menu for detailed event descriptions.
var channel = vChatCloud.joinChannel({
roomId:'e7works',
clientKey:'chatSample',
nickName:'Hong Gil-dong'
}, function(error, history){
if(error) {
// {"code":10102,"type":"RECIPIENT_FAILURE","message":"CHANNEL_NOT_EXISTED"}
return confirm(error.message)
}
// [{"logType":"message","roomId":"e7works","clientKey":"8cf65163","message":"per local","mimeType":"text","messageType":null ,"nickName":"local","date":"2020-08-31 17:54:09","grade":"user"},{"logType":"message","roomId":"e7works ","clientKey":"sweeter198dfb667","message":"12","mimeType":"text","messageType":null,"nickName":"Operator","date":"2020-08-31 15:31:43","grade":"user"}, ...]
console.log("history list", JSON.stringify(history))
}
);
2
3
4
5
6
7
8
9
10
11
12
13
Parameter value
Value Identifier Description roomId String Channel Key issued after joining CMS clientKey String Unique key for connecting terminal setting nickName String The nickname of the user entering the chat room Result value
- error
Value Identifier Description code String Error code type String Error type message String Error message - history
Value Identifier Description logType String log type roomId String Channel Key issued after joining CMS clientKey String Unique key for connecting terminal setting message String message content mimeType String message type (text: plain text, emoji: emoji) messageType String If it is empty, it is a general message, if it is a notice: "notice" nickName String The nickname of the user entering the chat room date String Transfer time grade String user grade
# Create script area
The script area starts entering the chat room with the code for the actual app operation,
It consists of chat / whisper / all notice / deportation / writing restriction.
Please note this as a login pop-up for entering the chat room number and alias when entering.
Below is the js code that controls each event.
# Applied to the project (js file)
js script files: sampleJs.zip 💾
After extracting the sampleJs.zip file, move it to the Project> js
folder.
Add js to be added later to the header link.
<!DOCTYPE html>
<html>
<head>
<!-- Library order should be in the order of jquery> sockjs> vchatcloud so that no error occurs -->
<link href="css/style.css" rel="stylesheet" />
<link href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.0/dist/sockjs.min.js"></script>
<script src="js/vchatcloud.js"></script>
<script src="js/login.js"></script>
<script src="js/chatList.js"></script>
<script src="js/emoji.js"></script>
<script src="js/count.js"></script>
<script src="js/whisper.js"></script>
</head>
<body>
<div id="wrap">
<!-- Chat area -->
<!-- Script area -->
</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22