# 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

1
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-->

1
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))
    }
);

1
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.

Write in chat area View js code

<script type="text/javascript">
function write(msg, tp) {
    var cl = $('section#chat div#content1');
    var cc = $('<div>', {class:'chat-content' });
    switch (tp) {
        case'join':
            cc = $('<div>', {class:'enterychat' });
            cc.append($('<span>').html('[' + msg.nickName +'] entered.'));
            break;
        case'leave':
            cc = $('<div>', {class:'logoutchat' });
            cc.append($('<span>').html('[' + msg.nickName +'] has left.'));
            break;
        case'notice':
            cc = $('<div>', {class:'noticechat' });
            cc.append($('<span><i class="fas fa-flag"></i></span>'));
            cc.append($('<span>').html(typeof msg =='string'? msg: msg.message));
            break;
        case'whisper':
            cc = $('<div>', {class:'whisperchat' });
            cc.append($('<span><i class="fas fa-comment-alt"></i></span>'));
            cc.append(
                $('<ul>')
                .append($('<li>').append($('<a href="#!" class="name">').html(msg.nickName).data(msg).on({ click : openLayer })).append(document.createTextNode('s whisper')))
                .append($('<li class="comment">').text(msg.message))
            );
            break;
        case'whisperto':
            cc = $('<div>', {class:'whisperchat' });
            cc.append($('<span><i class="fas fa-comment-alt"></i></span>'));
            cc.append(
                $('<ul>')
                .append($('<li>').append($('<a href="#!" class="name">').html(msg.receivedNickName)).append(document.createTextNode(' Whisper to')))
                .append($('<li class="comment">').text(msg.message))
            );
            break;
        default:
            cc = $('<div>', {class:'chat-content' });
            if (typeof msg =='string') (
                cc.append($('<a class="name" href="#!">').text(''));
                cc.append($('<span class="comment">').html(msg));
            } else if (typeof msg =='object' && msg.message) {
                if (channel.clientKey != msg.clientKey) {
                    cc.append($('<a class="name" href="#!">').text(msg.nickName).data(msg).on({ click: openLayer }));
                } else {
                    cc.append($('<a class="name" href="#!">').text(msg.nickName));
                }
                cc.append($('<span class="comment">').html(msg.message));
            }
    };
    cl.append(cc);
    $('section#chat div.middle').scrollTop(cl.height());
}
</script>

1
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

Emoticon window display js code view

<script type="text/javascript">
$(function() {
    // Check if there is a function to put emojicon
    if (!String.fromCodePoint)(function(stringFromCharCode) {
        var fromCodePoint = function(_) {
            var codeUnits = [],
                codeLen = 0,
                result = "";
            for (var index = 0, len = arguments.length; index !== len; ++index) {
                var codePoint = +arguments[index];
                // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity`
                // The surrounding `!(...)` is required to correctly handle `NaN` cases
                // The (codePoint>>>0) === codePoint clause handles decimals and negatives
                if (!(codePoint <0x10FFFF && (codePoint >>> 0) === codePoint))
                    throw RangeError("Invalid code point: "+ codePoint);
                if (codePoint <= 0xFFFF) {// BMP code point
                    codeLen = codeUnits.push(codePoint);
                } else {// Astral code point; split in surrogate halves
                    // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
                    codePoint -= 0x10000;
                    codeLen = codeUnits.push(
                        (codePoint >> 10) + 0xD800, // highSurrogate
                        (codePoint% 0x400) + 0xDC00 // lowSurrogate
                    );
                }
                if (codeLen >= 0x3fff) {
                    result += stringFromCharCode.apply(null, codeUnits);
                    codeUnits.length = 0;
                }
            }
            return result + stringFromCharCode.apply(null, codeUnits);
        };
        try {// IE 8 only supports `Object.defineProperty` on DOM elements
            Object.defineProperty(String, "fromCodePoint", {
                "value": fromCodePoint,
                "configurable": true,
                "writable": true
            });
        } catch (e) {
            String.fromCodePoint = fromCodePoint;
        }
    }(String.fromCharCode));
    // The part to push the emojicon div
    for (var i = 0; i <18; i++) (
        var code = 0x1F600 + i;
        $('div.bottom div.emoji').append($('<a>', {href:'#none' }).css({'font-size': '21px' }).html(String .fromCodePoint(code)));
    }
    // Emojicon / Toggle keyboard icon
    $(".ico_emoji").click(function() {
        $("div.emoji").show();
        $("a.ico_emoji").removeClass("show");
        $("a.ico_keyboard").addClass("show");
        $(".middle").addClass("height01");
    })
    $(".ico_keyboard").click(function() {
        $("div.emoji").hide();
        $("a.ico_emoji").addClass("show");
        $("a.ico_keyboard").removeClass("show");
        $(".middle").removeClass("height01");
    })
});
</script>

1
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

# 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

← chat room chat message →