<!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="新年快乐!