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.

1. Please check if the browser is supported.
2. Prepare the Sample App
3. Please create a channel key in CMS
4. 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

• window version sample app 💾
• vchatCloud sdk 💾

1. Click'Sample App' to download and save the file in a suitable location.
2. Go to the downloaded folder and unzip the zip file.
3. 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

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 ...
})

---

• 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)) {

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) {
    /** error definition
        0 SYSTEM_ERROR System error-Contact the administrator.
        10101 USER_LIMIT_EXCEEDED The number of connections has been exceeded.
        10102 CHANNEL_NOT_EXISTED This chat room does not exist.
        10103 CHANNEL _BEFORE_OPENED It is before the chat room opening time.
        10104 CHANNEL _AFTER_CLOSED The chat room has been closed.
        10105 ACTIVE_LIMIT_EXCEEDED The number of active users has been exceeded.
        10106 CHANNEL_USER_BANED The banned user.
        10107 USER_NOT_EXISTED User who has not connected.
        10901 MISSING_REQURIED_PARAM required parameter missing
    */
    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);
    });
});

Channel object event handling

Send message

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

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

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

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

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
}

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

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

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

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
}

Event that occurs when a user leaves the chat room

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

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
}

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
}

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
}

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
}

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

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
}

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
}