Have Your Own Chat App - Straas/Straas-web-document GitHub Wiki
In this topic, you will learn how to quickly utilize StraaS Messaging Service to build you own chat app.
Before you start, you need to make sure:
- Apply for account in StraaS.io
- Get client secret in StraaS CMS
- [optional] If you want to let your users chat with their own identities, you need to register your member in StraaS.io by this tutorial.
There are 2 kinds of Messaging SDK, first is iframe sdk and second is javascript sdk. Iframe SDK provides an UI template for you to quickly integrate StraaS Messaging Service into your webpage, and the javascript sdk provides you the largest flexibility to utilize our messageing service to make your own customize UI.
Before initiate a messaging iframe sdk you need to provides both roomId and the memberToken. Please refer to this link for the detail of how to get a member token.
StraaS iframe sdk provides an UI-included sdk, to help you seamlessly integrate StraaS's chatroom into your web application.
The sample HTML page below creates an iframe embedded chatroom into your webpage.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and chatroom) will replace this <div> tag. -->
<div id="chatroom"></div>
<script>
// 2. This code loads the iframe chatroom API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://mgk.straas.net/sdk/1.0/iframe-sdk.js";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and StraaS Chatroom)
// after the API code downloads.
var StraaSChatroom;
function onStraaSChatroomIframeReady() {
chatroom = new StraaS.Chatroom('chatroom', {
accountId: <account_id provided from StraaS>,
showOnlineUserThreshold: <threshold to determine if show online user number>,
chatroomName: <chatroomName provided by StraaS>,
memberToken: <member jwt by StraaS CMS of your memeber, use null for guest>,
height: '390',
width: '640',
events: {
'onReady': onChatroomReady,
},
styleURL: <URL of custom css file, please refer section CSS file example>,
secureMode: <when this value === false, iframe sdk will load chatroom page with insecure http protocol>
}
}
// 4. The API will call this function when the chatroom is ready.
function onChatroomReady() {
console.log('chatroom is ready')
}
</script>
</body>
</html>The API fires events to notify your application of changes to the chatroom. As noted in the previous section, you can subscribe to specific event when you creating the iframe sdk.
-
onReadyThis event fires when chatrooms sdk is loaded and the user is connected to the pre assigned room.
To customize your own look and feel in our iframe sdk, you need provide your own css file url to sdk when initialization. The config is called styleCSS.
The correspondent css template is provided in the following
@charset "utf-8";
/*調整聊天背景顏色*/
/*Modify chatroom background color*/
body,
.nickname,
.input-message,
.list,
.list-ctn,
.dropdown-menu{
background: #000;
}
/*調整滑鼠移到訊息區塊上的背景顏色*/
/*Modify mouse hover background color*/
.nav>li>a:focus,
.nav>li>a:hover,
.block:hover {
background: rgba(255,255,255,.2);
}
/*調整訊息區塊底色樣式*/
/*Modify message background color*/
.message-ctn {
border-top: rgba(255,255,255,.2) solid 1px;
border-bottom: rgba(255,255,255,.2) solid 1px;
background: transparent;
}
/*調整 input 框的顏色*/
/*Modify input element background color*/
.form-control {
background: rgba(255,255,255,.2);
border: 1px solid rgba(255,255,255,0);
}
/*調整 input 區塊提示文字樣式*/
/*Modify input element placeholder text color*/
.form-control::-moz-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color:#999;
}
.form-control:-ms-input-placeholder {
color:#999;
}
/*調整設定選單的邊框顏色*/
/*Modify setting dropdown menu border color*/
.dropdown-menu {
border: 1px solid rgba(255,255,255,.2);
}
/*調整設定按鈕的顏色*/
/*Modify setting button color*/
.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open>.dropdown-toggle.btn-default.focus,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover,
.btn-default.active,
.btn-default:active,
.open>.dropdown-toggle.btn-default {
background: rgba(255,255,255,.2);
background-image: none;
border: 1px solid rgba(255,255,255,0);
color: #fff;
}
/*調整設定選單滑鼠移過去的背景顏色*/
/*Modify setting dropdown menu mouse hover background color*/
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
background: rgba(255,255,255,.2);
}
/*調整文字顏色*/
/*Modify text color*/
body,
.close,
.close:focus,
.close:hover,
.form-control,
.dropdown-header,
.dropdown-menu>li>a,
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover,
.btn-default {
color: #fff;
opacity: 1;
text-shadow: none;
}
/*調整次要文字顏色，包含 Tab 和 訊息時間文字*/
/*Modify secondary text color, include tab text color and message date text color.*/
.nav>li>a,
.time {
color: #999;
}
/*調整在線名單 Tab 底線樣式*/
/*Modify tab bottom border color*/
.list-tab {
border-color: rgba(255,255,255,.2);
}
/*修改這裡調整訊息文字字級*
/*Modify tab bottom border color*/
.message-ctn .block {
font-size: 18px;
opacity: 1;
text-shadow: none;
line-height: 1.4;
}
/*修改這裡調整文字訊息的間距*
/*Modify message margin*/
.block {
margin-bottom: 5px;
}
/*文字特別強調的顏色*/
/*Modify primary color*/
a,
a:hover,
.chatroom-num span {
color: #51C0C2;
text-decoration: none;
}
/*Tab 特別強調的顏色*/
/*Modify active tab color*/
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
color: #51C0C2;
background-color: transparent;
border-bottom: 3px solid #51C0C2;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
/*按鈕特別強調的顏色*/
/*Modify primary button background color*/
.btn-primary {
background-color: #51C0C2;
border-color: #51C0C2;
background-image: none;
}
/*按鈕滑鼠移過去的顏色*/
/*Modify primary button hover background color*/
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary.active.focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary.focus {
background-color: #2D8787;
border-color: #2D8787;
}
/*設定選單特別強調的背景顏色*/
/*Modify setting dropdown menu active background color*/
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
background-color: #51C0C2;
}
/*卷軸顏色樣式*/
/*Modify scrollbar color*/
::-webkit-scrollbar {
width: 10px;
background: transparent;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0);
}
:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .2);
border-radius: 5px;
}
/*隱藏頭圖樣式*/
/*Hide face image*/
/*.face,
.face-img {
display: none;
}
.block {
padding: 7px 5px 2px 7px;
}*/To provide different management privileges for different users, we offer role to define the preset of privilege.
Following tables provide an overview of the role-privilege mappings.
| promote NORMAL(member) to be MODERATOR | demote MODERATOR to be NORMAL(member)" | block NORMAL | revive blocked user | |
|---|---|---|---|---|
| LOCAL_MANAGER | O | O | O | O |
| MASTER | O | O | O | O |
| MODERATOR | X | X | O | O |
| NORMAL(member) | X | X | X | X |
| NORMAL(guest) | X | X | X | X |
| BLOCKED | X | X | X | X |
| chat in chatWriteMode:ALL | chat in chatWriteMode:LOGIN | chat in chatWriteMode: ANCHOR | remove message | flush all messages | skip interval | |
|---|---|---|---|---|---|---|
| LOCAL_MANAGER | O | O | O | O | O | O |
| MASTER | O | O | O | O | O | O |
| MODERATOR | O | O | O | O | O | O |
| NORMAL(member) | O | O | X | X | X | X |
| NORMAL(guest) | O | X | X | X | X | X |
| BLOCKED | X | X | X | X | X | X |
| change chatWriteMode | |
|---|---|
| LOCAL_MANAGER | O |
| MASTER | O |
| MODERATOR | O |
| NORMAL(member) | X |
| NORMAL(guest) | X |
| BLOCKED | X |