<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo for chat</title>
<style>
body{
background-color: #000;
text-align: center;
}
#msg-box{
margin:0 auto;
margin-top:30px;
width:350px;
height: 600px;
background-color:#fff;
border: 1px solid #d2d2d2;
border-radius:4px;
text-align: left;
padding-top:10px;
}
#msg-box span{
display: block;
padding: 2px 10px;
width: 330px;
max-width: 330px;
font-size: 14px;
word-wrap: break-word;
}
#ipt-msg{
padding: 2px 6px;
height: 26px;
width:254px;
border: 1px solid #fff;
border-radius: 2px;
color: #000;
font-size: 14px;
outline: none;
}
#btn-emit-message{
margin-top:20px;
min-width: 80px;
padding: 6px 10px;
height: 30px;
background-color: #1f88e4;
border: 1px solid #1f88e4;
border-radius: 2px;
color: #fff;
outline: none;
}
</style>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-chat-1.0.0.js?v=201802261520"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js?v=201802261520"></script>
<script>
Vhall.ready(function(){
//todo
window.chat = new VhallChat({
token:'vhall',//认证令牌,必填
appId:'76043aaf',//在微吼云申请的appId,必填
channelId:'ch_b84f7bc3'//频道Id,必填
});
window.chat.on(function(msg){
//在此收到聊天消息,消息内容为msg
//todo
var msgBox = document.getElementById('msg-box');
var span = document.createElement('span');
span.innerText = msg.data;
msgBox.appendChild(span);
});
// window.chat.emit("要发送的聊天消息内容");
});
Vhall.config({
appId :'76043aaf',//应用 ID ,必填
accountId :'10025',//第三方用户唯一标识,必填
token:'vhall',//token必填
});
window.addEventListener('load',function(){
var emitButton = document.getElementById('btn-emit-message'),
msgInput = document.getElementById('ipt-msg');
emitButton.addEventListener('click',function(){
msgInput.value && window.chat.emit(msgInput.value);
msgInput.value = '';
});
});
</script>
</head>
<body>
<div id="msg-box">
</div>
<input id="ipt-msg" type="text" value="新年快乐!