# Quick guide

vchatCloud sdk makes it easy to implement a chat client. Use the vchatCloud sdk in the web client to quickly and efficiently use real-time chat. The quick guide provides brief information on the structure and function of vchatCloud sdk. Each topic provides a guide for applying it to a working project based on detailed explanations.

# Running the sample app

The sample app contains most of the functions available in vchatCloud sdk. Get hints that can be applied to your own project through the'Sample App', and apply them to various types of projects.

# How vchatCloud sdk works

vchatCloud sdk helps a random user to set a nickname and select a chat room required when entering from the client app. The entered chat room receives and sends messages from other users who entered with the same channel key, and the chat server generates and delivers the event. vchatCloud sdk delivers a callback function to the provided method for the event occurred from the server. It helps to implement and control events easily by using the delivered callback function.

# Sample app execution order

To run the'Sample App', please proceed with the following items in order.

Please check if the browser is supported.
Prepare the Sample App
Please create a channel key in CMS
Experience a chat service

# Check supported browsers

Browser	Supported versions
Internet Explorer	10 or higher
Edge	13 or higher
Chrome	16 or higher
Firefox	11 or higher
Opera	12.1 or higher
Naver Whale	2.8 or higher

# Run the sample app

Click'Sample App' to download and save the file in a suitable location.
Go to the downloaded folder and unzip the zip file.
Enter the unlocked folder path and execute index.html.

※ Download and apply the SDK to apply directly to your own project.

# Experience the chat service

# Enter the chat room Beta Version

Direct input from sample app
Automatic entry by modifying the sample app

In order to enter the chat room from the'Sample App', you need to enter the channel key created in the CMS. If the chat room is in a state before opening Link Learn how to create and check channel keys. Once you have confirmed the channel key, enter the channel key in the chat room number of the executed Sample App. After that, enter the user name as the nickname to be used in the chat room and press the OK button to enter the chat room.

Sample app.zip> js> sample.js

Existing code content

var vChatCloud = new VChatCloud();
var channel, userNick, userKey;
$(function() {
    if (!localStorage) {
       ... skip ...
    } else if ((!userNick || !userKey)) {
        ... skip ...
        $('a.popupbtn', p).click(function() {
            var r = { room: $('input#room', p).val(), nick: $('input#id', p).val() };
            if (r.room && r.nick) {
                $('div.bottom div.name').text(r.nick);
                localStorage.setItem('roomId', r.room);
                localStorage.setItem('userNm', r.nick);
                joinRoom(r.room, localStorage['userKey'], r.nick, function(err, history) {
                    ... skip ...
                });
            }
        });
    }
    ... skip ...
})

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

Code added for automatic entry

var vChatCloud = new VChatCloud();
var channel, userNick, userKey;
$(function() {
    // Code for automatic entry
    userNick  =  "AutomaticEntry";
    userKey  =  'xxxxxxxx'.replace(/[xy]/g,  function(a,  b)  {  return  (b  =  Math.random()  *  16,   (a  ==  'y'  ?  b  &  3  |  8  :  b  |  0).toString(16))  });
    var  id  =  "RoGFvNowuy-zZ2VinuJGy-20201223094218";
    var p = $('div.enterypopup').show(),
        c = $('div.chat_field').hide();
    $('div.bottom div.name').text(userNick);
    joinRoom(id,  userKey,  userNick,  function(err,  history)  {
        if  (err)  {
            openError(err.message, function() {
                $('div.enterypopup').show();
                $('div.chat_field').hide();
                vChatCloud.disconnect();
            });
            $('div.enterypopup').hide();
            $('div.chat_field').show();
        } else {
            if  (typeof  write  ==  'function')  history  &&  history.reverse().forEach(function(m)  {  write(m)  });
            $('div.enterypopup').hide();
            $('div.chat_field').show();

            // Event binding starts
            chatInit()
            personalInit()
            msgInit()
            likeInif()
        }
    });
    if (!localStorage) {
       ... skip ...
    } else if ((!userNick || !userKey)) {

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

# Chat Beta Version

For chat, enter the message to be sent in the text input box and press the send button or press the Enter key to send. If the message is being sent normally, try entering the chat room with another browser or another PC. When entering as a different user, enter the same channel key and enter the same chat room, then exchange messages for chat.

# Check the implementation code

# vchatCloud, channel object declaration

// Declare VChatCloud object
var vcc = new VChatCloud();
// Declare channel object
var channel = vcc.joinChannel({
    roomId:'e7works', // Chat room ID (channel key)
    clientKey:'user unique key', // client unique key (user identification value)
    nickName:'Hong Gil-dong' // User nickname who entered the chat room
}, function(error, history) {
    if (error) {
        return console.log('joinChannel err', error);
    }
    // Previous history message (maximum 20)
    history && history.reverse().forEach(function(msg) {
        // [{"logType":"message","roomId":"e7works","clientKey":"b8024bf1","message":"1","mimeType":"text","messageType":null, "nickName":"Young Kwang Jo","date":"2020-08-26 12:50:27","grade":"user"} ...]
        console.log('history::', msg);
    });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Error codes can be found here.

# Channel object event handling

# Send message

channel.sendMessage({
    message: "message to be sent"
})

1
2
3

# Send a message to a specific user in the chat room

channel.sendWhisper({
    message: "message to be sent (whisper)",
    receivedClientKey: "user unique key"
},function(err, msg) {
    // If whisper transmission fails, err = object, msg = null
    // Upon successful whisper transmission, err = null, msg = object
    // Message expression using msg object in chat window
})

1
2
3
4
5
6
7
8

# Event that occurs when a message is posted in the chat room

channel.onNotifyMessage = function(event) {
    // Message expression using event object in chat window
};

1
2
3

# Event that occurs when a whisper message is uploaded to the connected user

channel.onPersonalWhisper = function(event) {
    // Message expression using event object in chat window
}

1
2
3

# Event that occurs when a notice message is posted in the chat room

channel.onNotifyNotice = function(event) {
    // Message expression using event object in chat window
};

1
2
3

# Event that occurs when a custom message is posted in the chat room

channel.onNotifyCustom= function(event) {
    // Execute user action through custom message
};

1
2
3

# List of all users who entered the chat room

# Event that occurs when a new user connects to the chat room

channel.onNotifyJoinUser = function(event) {
    // User access notification using event object in chat window
}

1
2
3

# Event that occurs when a user leaves the chat room

channel.onNotifyLeaveUser = function(event) {
    // Notification of user disconnection using event object in chat window
}

1
2
3

# Event that occurs when you are banned from a chat room

channel.onNotifyKickUser = function(event) {
    // Notification of expulsion of specific user using event object in chat window
}

1
2
3

# Event that occurs when banning is released from the chat room

channel.onNotifyUnkickUser = function(event) {
    // Notification of cancellation of expulsion of specific user using event object in chat window
}

1
2
3

# An event that occurs when a user is restricted from writing in a chat room

channel.onNotifyMuteUser = function(event) {
    // Silence notification of specific user using event object in chat window
}

1
2
3

# Event that occurs when the user's writing restrictions are lifted in the chat room

channel.onNotifyUnmuteUser = function(event) {
    // Notification of specific user silence cancellation using event object in chat window
}

1
2
3

# Notify existing users when attempting to log in twice

channel.onPersonalDuplicateUser = function(event) {
    // Process when redundant login using event object (logout or change client key)
}

1
2
3

# Event that occurs when writing is restricted in a chat room

channel.onPersonalMuteUser = function(event) {
    // Silence notification of specific user using event object in chat window
}

1
2
3

# Event that occurs when writing restrictions are lifted in a chat room

channel.onPersonalUnmuteUser = function(event) {
    // Notification of specific user cancellation of silence using event object in chat window
}

1
2
3

← Quick Start chat room →