master

分支 (1)

管理

管理

master

websdk-demo
/
connect-check.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>connect，receive message</title>
</head>
<body>

<link rel="stylesheet" href="./res/rongcloud.css">
<a href="https://github.com/rongcloud/websdk-demo/blob/master/connect-check.html" class="get-source">获取源码</a>


<style>
body{
	font-size:80%;
}
.panel span{
	display:inline-block;
	width:60px;
}
.show{
	width:98%;
	display:inline-block;
	overflow:hidden;
	border:1px solid #ccc;
}
.show h3{
	text-indent:10px;
}
.show pre{
	border-top:1px dotted #ccc;
	padding:5px 0 0 10px;
	line-height:1.5;
	color:#333;
	background:#f5f5f5;
}
.show pre:nth-child(2n){
	background:#ccc;
}
#joinChatRoom{
	display: none;
	background:#000;
	color:#fff;
}
</style>

<script>
function showResult(id,message){
	var dom = document.getElementById(id);
	console.log(message.content.content)
	// dom.innerHTML += '<pre>' + message.senderUserId + ":   " +  RongIMLib.RongIMEmoji.emojiToHTML(message.content.content + "") + '</pre>';
	dom.innerHTML += '<pre>' + JSON.stringify(message,null,"\t") + '</pre>';
	//JSON.stringify(message,null,"\t")
}
</script>

<script src="js/message-output.js"></script>

<script src="//cdn.ronghub.com/RongIMLib-2.5.4.js"></script>
<script src="//cdn.ronghub.com/RongEmoji-2.2.5.min.js"></script>
<script src="./init.js"></script>
<script>
//注册自定义消息

function registerMessage(type,propertys){
	var messageName = type; // 消息名称。
	var objectName = "s:" + type; // 消息内置名称，请按照此格式命名 *:* 。
	var mesasgeTag = new RongIMLib.MessageTag(true,true); //true true 保存且计数，false false 不保存不计数。

	RongIMClient.registerMessageType(messageName, objectName, mesasgeTag, propertys);
}

function startInit(user,targetId){
	var params = {
		appKey : getValue("appKey"),
		token : getValue("token"),
		navi : getValue("navi")
	};

	var userId = "";

	var callbacks = {
		getInstance : function(instance){
			RongIMLib.RongIMEmoji.init();
			//instance.sendMessage

			//注册 PersonMessage
			var propertys = ["name","age","gender"]; // 消息类中的属性名。
			registerMessage("PersonMessage",propertys);

			//注册 ProductMessage
			var propertys = ["price","title","desc","images"]; // 消息类中的属性名。
			registerMessage("ProductMessage",propertys);
		},
		getCurrentUser : function(userInfo){
			console.log(userInfo.userId);
			userId = userInfo.userId;
			alert("链接成功；userid=" + userInfo.userId);
			document.titie = ("链接成功；userid=" + userInfo.userId);

			//加入聊天室
			joinChatRoom();
		},
		receiveNewMessage : function(message){
			//判断是否有 @ 自己的消息

			console.log(message);

			var mentionedInfo = message.content.mentionedInfo || {};
			var ids = mentionedInfo.userIdList || [];
			for(var i=0; i < ids.length; i++){
				if( ids[i] == userId){
					alert("有人 @ 了你！");
				}
			}
			showResult("show1",message);
			messageOutput(message);
		}
	};

	init(params,callbacks);
}

function getValue(id){
	return document.getElementById(id).value;
}

function joinChatRoom(){
	var chatRoomId = getValue("chatRoomId");
		// chatRoomId = chatRoomId.replace(/(^\s*)|(\s*$)/g, " ");
	if(chatRoomId == ""){
		alert("请输入聊天室 id！");
		return false;
	}

	var IM = RongIMClient.getInstance();
		IM.joinChatRoom(chatRoomId, 50, {
		onSuccess: function() {
            alert("加入聊天室 " + chatRoomId + " 成功");
		},
		onError: function(error) {
            alert("加入聊天室失败");
		}
	});
}
</script>


<h1>链接测试、消息接收 (含自定义消息)</h1>
<div class="panel" id="panel">
	<p>
		<span>appkey</span>
		<input type="text" id="appKey" size="20" value="8w7jv4qb78a9y">
	</p>
	<p>
		<span>token</span>
		<input type="text" id="token" size="110" value="ZThhLI1Xa1BX5EMREAdArWSH6ouuI8NT/fNmMkzF+4IOKIoFvbsi6JnH8QmnSltLkCcsK8vOgKl3IZgfbxFiWg==">
	</p>
	<p>
		<span>navi</span>
		<input type="text" id="navi" size="50" value=""> <b>此配置项仅针对私有部署，公有云请置空，格式为 10.10.10.10:8080 </b>
	</p>
	<p>
		<span>聊天室 id</span>
		<input type="text" id="chatRoomId" size="20" value="">
		<b><input type="button" id="joinChatRoom" onclick="joinChatRoom()" value="加入聊天室"> </b>
	</p>
	<p>
		<span>&#160;</span>
		<input type="button" onclick="startInit()" value="初始化链接">
	</p>
</div>

<p></p>

<div class="show" id="show1">
	<h3>消息接收结果(新消息在最下)</h3>
</div>

</body>
</html>