代码拉取完成，页面将自动刷新
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051
<!DOCTYPE html>
<html mip>
<!--
author:support@starRTC.com
聊天室:先获取聊天室列表填充到 roomList 元素中，当点击某个聊天室时，调用 joinChatRoom 方法，在里面调sdk的 sigConnect 连接聊天室
连接成功会收到 case "joinChatRoom":的回调
在聊天室里面，点发送按钮或回车，会调用 sendChatMsg 方法，最终调用sdk的 sendChatMsg 方法发送消息
调用 getRoomOnlineNum 或取聊天室在线人数，在回调 getRoomOnlineNum 里面获取结果, 可以定时，比如5s调用一次
-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>StarRTC IM Demo</title>
<style>
.parent {
height: 100%;
overflow: hidden;
background-color: orange;
}
.top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0;
height: 80px;
}
.middle {
position: absolute;
top: 70px;
left: 0;
right: 0;
bottom: 60px;
background-color: grey;
overflow: hidden;
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60px;
overflow: auto;
background-color: white;
color: black
}
.bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
overflow: auto;
background-color: black;
color: white
}
.button {
height: 50px;
background-color: lightgrey;
text-align: center;
line-height: 50px;
cursor: pointer;
border: inset;
border-width: 1px;
border-color: transparent;
border-bottom-color: gray;
}
.button2 {
height: 30px;
background-color: transparent;
text-align: center;
line-height: 30px;
cursor: pointer;
border: inset;
border-width: 1px;
border-color: transparent;
border-bottom-color: #e5e5ce;
}
.mask {
display: none;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .1);
}
.nav {
position: absolute;
z-index: 11;
left: -7rem;
top: 0;
width: 100px;
height: 100%;
background: #555;
}
.nav {
transition: left linear .1s;
}
.nav a {
display: block;
padding: 1em 0;
border-bottom: 1px solid #888;
font-size: 16px;
color: #eee;
text-align: center;
}
.nav .avatar-big {
width: 3rem;
border-radius: 50%;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.avatar-small {
position: absolute;
z-index: 2;
left: 15px;
top: 15px;
width: 40px;
height: 40px;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="jquery.contextMenu.min.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
</head>
<body>
<div class="parent">
<div class="top" style="text-align: center">
<img src="menu_gray.png" class="avatar-small" />
<h2 id="userName"></h2>
</div>
<div class="middle">
<!--单聊-->
<div id="singleChatView" style="width: 100%;height: 100%;visibility: visible">
<div
style="position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: snow; height: 50px;text-align: center; line-height:50px; ">
<input id="targetUserId" type="text"
style="width: 100%;height: 100%;background: whitesmoke;padding: 0;border-width: 0;text-align: center"
placeholder="点击这里 输入对方ID">
</div>
<div id="sigleMessage" class="content-menu"
style="position: absolute; top: 50px; left: 0; right: 0px; bottom: 50px; background-color: white; overflow: auto;padding: 5px;">
</div>
<!-- <div id="video" style="position: absolute; width: 200px ;top: 50px; right: 0; bottom: 50px; background-color: darkgrey; overflow: hidden;text-align: center">
<br/>视频区<br/>
<video id="selfvideo" style="width: 100%;height: 150px" src="" controls="controls">您的浏览器不支持video标签</video>
<video id="targetvideo" style="width: 100%;height: 150px" src="" controls="controls">您的浏览器不支持video标签</video>
</div>-->
<div style="position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: white;">
<div style="position: absolute; height: 50px;left: 0; right: 100px; bottom: 0;">
<input id="sigleText" type="text" onkeydown="singlechatkeydown()"
style="width: 100%;height: 100%;background: whitesmoke;padding-left: 10px;border-width: 0" />
</div>
<div style="float:right; width:100px; height:50px; background-color: lightgrey ;text-align: center; line-height:50px; cursor:pointer; "
onclick="sendSingleChat()">发送</div>
</div>
</div>
<!--群组-->
<div id="groupView" style="width: 100%;height: 100%;visibility: visible; background-color:#b6cdc9">
<div id="groupCreateDlg" title="创建群组">
<p class="validateTips">请输入群组名称.</p>
<div>
<input type="text" name="newGroupName" id="newGroupName" value=""
class="text ui-widget-content ui-corner-all">
</div>
<p class="validateTips">请输入添加成员id（多个以,隔开）.</p>
<div>
<input type="text" name="newGroupMembers" id="newGroupMembers" value=""
class="text ui-widget-content ui-corner-all">
</div>
</div>
<div id="groupMembersDlg" title="群组成员">
<div id="addMembers">
<p class="validateTips">请输入添加成员id（多个以,隔开）.</p>
<input type="text" name="newGroupMembers2" id="newGroupMembers2" value=""
class="text ui-widget-content ui-corner-all">
<div id="addGroupMembers">添加</div>
</div>
<p class="validateTips">成员列表.</p>
<div id="groupMemberList" style="overflow-y: scroll;height:400px;">
</div>
</div>
<div id="groupList"
style="position: absolute; width: 100px ;top: 0; left:0; bottom: 0; background-color:beige; overflow: auto;text-align: center">
<br />群列表<br /><br />
</div>
<div id="targetGroupId"
style="position: absolute; top: 0; left: 100px; right: 0; height: 0; background-color: snow; height: 50px;text-align: center; line-height:50px; ">
</div>
<div id="groupMessage"
style="position: absolute; top: 50px; left: 100px; right: 0; bottom: 50px; background-color: white; overflow: auto;padding: 5px;">
</div>
<div style="position: absolute; left: 100px; right: 0; bottom: 0; height: 50px; background-color: white;"
id="groupEdit">
<div style="position: absolute; height: 50px;left: 0; right: 330px; bottom: 0;">
<input id="groupText" type="text"
style="width: 100%;height: 100%;background: whitesmoke;padding-left: 10px;border-width: 0" />
</div>
<div style="float:right; width:100px; height:48px; background-color: lightgrey ;text-align: center; line-height:50px; cursor:pointer;border:1px solid black;"
onclick="showGroupMember()">成员</div>
<div style="float:right; width:100px; height:48px; background-color: lightgrey ;text-align: center; line-height:50px; cursor:pointer;border:1px solid black;"
onclick="createNewGroup()">创建</div>
<div style="float:right; width:100px; height:48px; background-color: lightgrey ;text-align: center; line-height:50px; cursor:pointer;border:1px solid black; "
onclick="sendGroupChat()">发送</div>
</div>
</div>
<!--聊天室-->
<div id="chatRoomView" style="width: 100%;height: 100%;visibility: visible; background-color: beige">
<div id="chatRoomCreateDlg" title="创建聊天室">
<p class="validateTips">请输入聊天室名称.</p>
<div>
<input type="text" name="newChatRoomName" id="newChatRoomName" value=""
class="text ui-widget-content ui-corner-all">
</div>
</div>
<div id="roomList"
style="position: absolute; width: 100px ;top: 0; left:0; bottom: 0; background-color:beige; overflow: auto;text-align: center">
<br />聊天室列表<br /><br />
</div>
<div id="targetChatRoomId"
style="position: absolute; top: 0; left: 100px; right: 0; height: 0; background-color: snow; height: 50px;text-align: center; line-height:50px; ">
</div>
<div id="chatRoomMessage" class="content-menu"
style="position: absolute; top: 50px; left: 100px; right: 0; bottom: 50px; background-color: white; overflow: auto;padding: 5px;">
</div>
<div id="chatRoomedit"
style="position: absolute; left: 100px; right: 0; bottom: 0; height: 50px; background-color: white;">
<div style="position: absolute; height: 50px;left: 0; right: 220px; bottom: 0;">
<input id="chatRoomText" type="text" onkeydown="chatkeydown()"
style="width: 100%;height: 100%;background: whitesmoke;padding-left: 10px;border-width: 0" />
</div>
<div style="float:right; width:100px; height:48px; background-color: lightgrey ;text-align: center; line-height:50px; cursor:pointer;border:1px solid black;"
onclick="createNewChat()">创建</div>
<div style="float:right; width:100px; height:48px; background-color: lightgrey ;text-align: center; line-height:50px; cursor:pointer;;border:1px solid black;"
onclick="sendChatMsg()">发送</div>
</div>
</div>
</div>
<div class="footer" id="footer">
<center>安卓和iOS程序也可以和这个页面互发消息：
<a id="continue" onMouseOut="hideAndroidQr()" onmouseover="showAndroidQr()" class="a_pay">下载安卓版</a>
<!--
<a id = "continue" onMouseOut="hideiOSQr()" onmouseover="showiOSQr()" class="a_pay">下载iOS版</a>
-->
<a href='https://www.starrtc.com/demo/web/' target="_blank">网页视频聊天</a>
</center>
<center>Copyright © <a href='https://docs.starrtc.com/en/download/'>starRTC.com</a></center>
</div>
<div class="bottom" id="logs"></div>
</div>
<!-- 网页遮罩 -->
<div class="mask"></div>
<!-- 侧边栏 -->
<div class="nav">
<div style="width:100%; height: 70px"></div>
<div class="button" style="width:100%;" onclick="showSingle()">一对一</div>
<div class="button" style="width:100%; " onclick="showGroup()">群组</div>
<div class="button" style="width:100%; " onclick="showChatRoom()">聊天室</div>
</div>
<div id="android_app" style="display:none;height:200px;back-ground:#f00;position:absolute;"><img
src="android.png" /></div>
<div id="ios_app" style="display:none;height:200px;back-ground:#f00;position:absolute;"><img src="ios.png" /></div>
</body>
<script type="text/javascript" src="./sdk/star_rtc_lib.min.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="cookie_tools.js"></script>
<script type="text/javascript" src="jquery.contextMenu.min.js"></script>
<script type="text/javascript" src="jquery.ui.position.min.js"></script>
<script type="text/javascript">
var aecRequestBaseURL = "https://www.starrtc.com/aec"; //开启AEC后，才生效，从此url获取各种列表信息
StarRtc.Instance = new StarRtc.StarSDK();
////////////////////////共有云私有云区别搜索 StarRtc.Instance.configModePulic 查看
////////////////////////私有云改配置///////////////////////
///////////////////////以下10.90.7.70需替换为私有部署IP////
var privateURL = "demo.starrtc.com";
//StarRtc.Instance.setConfigUseAEC(true); //是否开启AEC
StarRtc.Instance.setMsgServerInfo(privateURL, 19903) //ip, websocket port //需要手动从浏览器输入 https://10.90.7.70:29991 信任证书
StarRtc.Instance.setChatRoomServerInfo(privateURL, 19906) //ip, websocket port //需要手动从浏览器输入 https://10.90.7.70:29993 信任证书
// 集成文档请参考 https://docs.starrtc.com/en/docs/web-4.html
btn = document.getElementsByClassName('avatar-small')[0];
mask = document.getElementsByClassName('mask')[0];
nav = document.getElementsByClassName('nav')[0];
btn.addEventListener('click', function () {
mask.style.display = 'block';
nav.style.left = 0;
}, false);
mask.addEventListener('click', function () {
mask.style.display = 'none';
nav.style.left = '-110px';
}, false)
var agentId = "";
var userId = "";
var starChatSDK = null;
var chatRoomCreateDialog = null;
var groupCreateDialog = null;
var groupMembersDialog = null;
showChatRoom();
var callBack = function (data, status) {
traceLog(data + "||" + status);
switch (status) {
//链接状态
case "connect success":
case "connect failed":
case "connect closed":
traceLog(status + ":" + data);
break;
//收到登录消息
case "onLoginMessage":
if (data.status == "success") {
getGroupList();
StarRtc.Instance.getOnlineNumber();
}
traceLog("login:" + data.status);
break;
//收到一对一消息
case "onSingleMessage":
var fid = data.fromId;
//var msgJson = JSON.parse(data.msg);
var msgJson = data.msg;
var msgTxt = msgJson.contentData;
setSingleMessageInnerHTML(fid + ":<br/> " + msgTxt);
break;
case "onGroupMessage":
var gid = data.groupId;
var fid = data.fromId;
var msgJson = JSON.parse(data.msg);
var msgTxt = msgJson.contentData;
setGroupMessageInnerHTML(gid, fid + ":<br/> " + msgTxt);
break;
case "onGroupPrivateMessage":
var gid = data.groupId;
var fid = data.fromId;
var msgJson = JSON.parse(data.msg);
var msgTxt = msgJson.contentData;
setGroupMessageInnerHTML(gid, fid + ":<br/> " + msgTxt);
break;
case "onGroupPushMessage":
var gid = data.groupId;
var msgJson = JSON.parse(data.msg);
var msgTxt = msgJson.contentData;
setGroupMessageInnerHTML(gid, msgTxt);
break;
case "onSystemPushMessage":
var msgJson = JSON.parse(data.msg);
var msgTxt = msgJson.contentData;
setSingleMessageInnerHTML(status + ":" + msgTxt);
setGroupMessageInnerHTML("all", status + ":" + msgTxt);
break;
case "onErrorMessage":
switch (data.errId) {
case 2:
alert("您的账号在另外的设备登录，您已经下线");
document.getElementById('userName').innerHTML = "";
StarRtc.Instance.logout();
newLogin();
break;
}
break;
case "onGetGroupList":
groupList = data.groupsInfo;
for (var i = 0; i < groupList.length; i++) {
var item = groupList[i];
document.getElementById('groupList').innerHTML +=
"<div class='button2' onclick='openGroup(" + i + ")'>" + item.groupName + "</div>";
}
break;
case "onGetOnlineNumber":
//console.log("在线人数：" + data.count)
break;
case "onGetGroupUserList":
if (data.status) {
var list = $("#groupMemberList");
list.html("");
for (var i in data.userIdList) {
list[0].innerHTML += "<div class=''>" + data.userIdList[i] + "</div>";
}
groupMembersDialog.dialog("open");
}
break;
case "onGetAllUserList":
break;
case "onCreateGroupFin":
if (data.status == "success") {
getGroupList();
}
groupCreateDialog.dialog("close");
alert("创建群组" + data.status);
break;
case "onAddGroupUserFin":
groupMembersDialog.dialog("close");
alert("添加成员" + data.status);
break;
}
};
function newLogin() {
userId = "" + (Math.floor(Math.random() * 900000 + 100000));
setCookie("starrtc_userId", userId, null);
document.getElementById('userName').innerHTML += userId;
StarRtc.Instance.version();
StarRtc.Instance.login(agentId, userId, callBack);
}
var localId = getCookie("starrtc_userId");
if (localId != "") {
userId = localId;
document.getElementById('userName').innerHTML += userId;
StarRtc.Instance.version();
StarRtc.Instance.login(agentId, userId, callBack);
} else {
newLogin();
}
var chatRoomList;
var selectRoomIndex;
var groupList;
var selectGroupIndex;
//获取聊天室列表
function getChatRoomList() {
$("#roomList").children(".button2").remove();
if (StarRtc.Instance.starConfig.configUseAEC) {
$.get(aecRequestBaseURL + "/list/query.php?listTypes=" + CHATROOM_LIST_TYPE.CHATROOM_LIST_TYPE_CHATROOM.toString(), function (data, status) {
traceLog("chatList 返回：" + status + "||" + data);
if (status === "success") {
var obj = JSON.parse(data);
if (obj.status == 1) {
chatRoomList = [];
for (var i = 0; i < obj.data.length; i++) {
var item = JSON.parse(decodeURIComponent(obj.data[i].data));
chatRoomList.push(item);
document.getElementById('roomList').innerHTML +=
"<div class='button2' onclick='joinChatRoom(" + i + ")'>" + item.name + "</div>";
}
} else {
document.getElementById('roomList').innerHTML += "获取失败";
}
} else {
document.getElementById('roomList').innerHTML += "获取失败";
}
});
}
else {
//仅供测试
StarRtc.Instance.queryRoom([CHATROOM_LIST_TYPE.CHATROOM_LIST_TYPE_CHATROOM], function (status, listData) {
chatRoomList = listData;
for (var i = 0; i < chatRoomList.length; i++) {
var item = chatRoomList[i];
document.getElementById('roomList').innerHTML +=
"<div class='button2' onclick='joinChatRoom(" + i + ")'>" + item.name + "</div>";
}
});
}
}
function getGroupList() {
//获取群组列表
$("#groupList").children(".button2").remove();
if (StarRtc.Instance.starConfig.configUseAEC) {
$.get(aecRequestBaseURL + "/group/list.php?userId=" + StarRtc.Instance.starUser.userId, function (data, status) {
traceLog("groupList 返回：" + status + "||" + data);
if (status === "success") {
var obj = JSON.parse(data);
if (obj.status == 1) {
groupList = [];
for (var i = 0; i < obj.data.length; i++) {
var item = obj.data[i];
groupList.push(item);
document.getElementById('groupList').innerHTML +=
"<div class='button2' onclick='openGroup(" + i + ")'>" + item.groupName + "</div>";
}
} else {
// document.getElementById('groupList').innerHTML += "获取失败";
}
} else {
// document.getElementById('groupList').innerHTML += "获取失败";
}
});
}
else {
//仅供测试
StarRtc.Instance.getGroupList();
}
}
var msgIndex = 0;
//发送单聊消息
function sendSingleChat() {
var targetUid = document.getElementById('targetUserId').value;
var message = document.getElementById('sigleText').value;
if (targetUid == null || targetUid == undefined || targetUid == "") {
alert("对方ID不能为空");
return;
}
if (message == null || message == undefined || message == "") {
alert("请输入点什么");
return;
}
setSingleMessageInnerHTML(userId + ":<br/> " + message);
StarRtc.Instance.sendSingleMsg(targetUid, "新消息", message);
//清空输入框
$("#sigleText").val('');
}
//发送群聊消息
function sendGroupChat() {
if (selectGroupIndex == undefined) {
alert("对方ID不能为空");
return;
}
var targetGroupId = groupList[selectGroupIndex].groupId;
var message = document.getElementById('groupText').value;
setGroupMessageInnerHTML(targetGroupId, userId + ":<br/> " + message);
StarRtc.Instance.sendGroupMsg(targetGroupId, "新消息", message);
//清空输入框
$("#groupText").val('');
}
function chatkeydown() {
if (event.keyCode == 13) { //按下回车键
sendChatMsg();
}
}
function singlechatkeydown() {
if (event.keyCode == 13) { //按下回车键
sendSingleChat();
}
}
function createNewGroup() {
$("#newGroupName").val("网页群组");
$("#newGroupMembers").val("");
groupCreateDialog.dialog("open");
}
function newGroup() {
var newGroupName = $("#newGroupName").val().trim();
if (newGroupName == "") {
alert("聊天室名称不能为空！");
return;
}
var newGroupMembers = $("#newGroupMembers").val().trim().split(",");
reqIndex = StarRtc.Instance.createGroup(newGroupMembers, newGroupName);
}
function showGroupMember() {
if (selectGroupIndex == undefined) {
alert("群组ID不能为空");
return;
}
if (groupList[selectGroupIndex].creator == StarRtc.Instance.starUser.userId) {
$("#newGroupMembers2").val('');
$("#addMembers").show();
}
else {
$("#addMembers").hide();
}
var targetGroupId = groupList[selectGroupIndex].groupId;
if (StarRtc.Instance.starConfig.configUseAEC) {
$.get(aecRequestBaseURL + "/group/members.php?userId=" + StarRtc.Instance.starConfig.userId + "&groupId=" + targetGroupId, function (data, status) {
if (status === "success") {
var obj = JSON.parse(data);
if (obj.status == 1) {
var list = $("#groupMemberList");
list.html("");
var userIdList = obj.data.userIdList.split(",");
for (var i = 0; i < userIdList.length; i++) {
list[0].innerHTML += "<div class=''>" + userIdList[i] + "</div>";
}
groupMembersDialog.dialog("open");
} else {
document.getElementById('roomList').innerHTML += "获取失败";
}
} else {
document.getElementById('roomList').innerHTML += "获取失败";
}
});
}
else {
StarRtc.Instance.getGroupUserList(targetGroupId);
}
}
function addGroupMembers() {
if (selectGroupIndex == undefined) {
alert("群组ID不能为空");
return;
}
if (groupList[selectGroupIndex].creator != StarRtc.Instance.starUser.userId) return;
var newGroupMembers = $("#newGroupMembers2").val().trim().split(",");
StarRtc.Instance.addGroupUsers(groupList[selectGroupIndex].groupId, newGroupMembers);
}
//发送聊天室消息
function sendChatMsg() {
var message = document.getElementById('chatRoomText').value;
if (message == null || message == undefined || message == "") {
alert("请输入点什么");
return;
}
var time = new Date();
var timestr = ("0" + time.getHours()).slice(-2) + ":" +
("0" + time.getMinutes()).slice(-2) + ":" +
("0" + time.getSeconds()).slice(-2);
setChatMessageInnerHTML(userId + "(" + timestr + "):<br/> " + message);
starChatSDK.sendChatMsg(message);
//ray
starChatSDK.getRoomOnlineNum();
//清空输入框
//message = "";
$("#chatRoomText").val('');
}
function createNewChat() {
$("#newChatRoomName").val("网页聊天室");
chatRoomCreateDialog.dialog("open");
}
//关闭
function closeWebSocket() {
StarRtc.Instance.logout();
}
//将消息显示在网页上
function setSingleMessageInnerHTML(innerHTML) {
var div = document.getElementById('sigleMessage')
div.innerHTML += innerHTML + '<br/><br/>';
div.scrollTop = div.scrollHeight;
}
//将消息显示在网页上
function setGroupMessageInnerHTML(groupId, innerHTML) {
if (selectGroupIndex != undefined && groupId == groupList[selectGroupIndex].groupId) {
var div = document.getElementById('groupMessage')
div.innerHTML += innerHTML + '<br/><br/>';
div.scrollTop = div.scrollHeight;
}
}
//将消息显示在网页上
function setChatMessageInnerHTML(innerHTML) {
var div = document.getElementById('chatRoomMessage')
div.innerHTML += innerHTML + '<br/><br/>';
div.scrollTop = div.scrollHeight;
}
//打印日志
function traceLog(innerHTML) {
var div = document.getElementById('logs')
div.innerHTML += innerHTML + '<br/>----------------------<br/>';
div.scrollTop = div.scrollHeight;
}
function showSingle() {
$("#singleChatView").show();
$("#chatRoomView").hide();
$("#groupView").hide();
mask.style.display = 'none';
nav.style.left = '-110px';
}
function showChatRoom() {
$("#singleChatView").hide();
$("#chatRoomView").show();
$("#groupView").hide();
mask.style.display = 'none';
nav.style.left = '-110px';
getChatRoomList();
}
function showGroup() {
$("#singleChatView").hide();
$("#chatRoomView").hide();
$("#groupView").show();
mask.style.display = 'none';
nav.style.left = '-110px';
getGroupList();
}
var chatInnerCallback = function (data, status, oper) {
var thisRoom = data.obj;
switch (status) {
case "connect success":
switch (oper) {
case "open":
thisRoom.joinRoom();
break;
case "new":
thisRoom.createNew();
break;
}
break;
case "connect failed":
case "connect closed":
//连接失败
if (!thisRoom.activeDisconnect()) {
alert('连接断开，正在重连中...');
thisRoom.sigConnect();
}
break;
case "onChatRoomMessage":
{
//收到聊天室消息
switch (data.type) {
case "createChatRoom":
//创建聊天室
//data.status == "success"为成功，data.chatroomId为聊天室Id
if (data.status == "success") {
if (StarRtc.Instance.starConfig.configUseAEC) {
$.get(aecRequestBaseURL + "/list/save.php?userId=" + StarRtc.Instance.starUser.userId + "&listType=" + CHATROOM_LIST_TYPE.CHATROOM_LIST_TYPE_CHATROOM.toString() + "&roomId=" + data.userData.roomInfo.id + "&data=" + encodeURIComponent(JSON.stringify(data.userData.roomInfo)), function (data, status) {
if (status === "success") {
var obj = JSON.parse(data);
if (obj.status == 1) {
console.log("创建成功")
} else {
console.log("创建失败")
}
} else {
console.log("创建失败")
}
});
}
else {
//仅供测试使用
StarRtc.Instance.reportRoom(CHATROOM_LIST_TYPE.CHATROOM_LIST_TYPE_CHATROOM.toString(), data.userData.roomInfo, function (status) {
alert('创建' + status);
console.log("创建" + status);
});
}
chatRoomCreateDialog.dialog("close");
getChatRoomList();
var div = document.getElementById('targetChatRoomId');
div.innerHTML = data.userData.roomInfo.name;
}
else {
alert('创建失败');
}
break;
case "deleteChatRoom":
//删除聊天室
//data.status == "success"为成功
break;
case "joinChatRoom":
//加入聊天室
//data.status == "success"为成功
alert('聊天室加入成功，可以发消息了');
//starChatSDK.sendChatMsg('web chat');
break;
case "getRoomOnlineNum":
//alert(data.onlineNum);
//alert(data.userData.roomInfo.name);
showRoomOnlineNum(data.userData.roomInfo.name, data.onlineNum);
break;
case "recvChatPrivateMsg":
//收到聊天室私聊消息
case "recvChatMsg":
//收到聊天室消息
//消息结构
//data = {
// "fromUserId": 消息来源
// "msg": 消息结构
//}
//msg结构
//msg = {
// "fromId": 消息来源
// "targetId": 消息接收方
// "time": 时间戳
// "msgIndex": 消息序号
// "type": 类型
// "code": 消息控制类型码
// "contentData": 消息内容
//};
var message = data.msg.contentData;
var fromId = data.msg.fromId;
//var fromId = data.fromUserId;
var time = new Date();
var timestr = ("0" + time.getHours()).slice(-2) + ":" +
("0" + time.getMinutes()).slice(-2) + ":" +
("0" + time.getSeconds()).slice(-2);
setChatMessageInnerHTML(fromId + "(" + timestr + "):<br/> " + message);
break;
}
}
break;
}
}
//加入聊天室
function joinChatRoom(index) {
traceLog("joinChatRoom:" + chatRoomList[index]);
selectRoomIndex = index;
var div = document.getElementById('targetChatRoomId');
chatRoomId = chatRoomList[selectRoomIndex].id;
chatRoomName = chatRoomList[selectRoomIndex].name;
chatRoomCreator = chatRoomList[selectRoomIndex].creator;
div.innerHTML = chatRoomName;//填充
//加入
var innerChatRoomObj = {
"id": chatRoomId,
"name": chatRoomName,
"creator": chatRoomCreator
};
var starChatSDKUserData = {
"roomInfo": innerChatRoomObj,
};
if (starChatSDK != null) {
starChatSDK.leaveRoom();
starChatSDK.sigDisconnect();
starChatSDK = null;
}
starChatSDK = new StarRtc.Instance.getChatRoomSDK('open', chatInnerCallback, starChatSDKUserData);
starChatSDK.sigConnect();
}
function newChatRoom() {
var chatRoomName = $("#newChatRoomName").val().trim();
if (chatRoomName == "") {
alert("聊天室名称不能为空！");
return;
}
//加入
var innerChatRoomObj = {
"id": "",
"name": chatRoomName,
"creator": ""
};
var starChatSDKUserData = {
"roomInfo": innerChatRoomObj,
};
if (starChatSDK != null) {
starChatSDK.leaveRoom();
starChatSDK.sigDisconnect();
starChatSDK = null;
}
starChatSDK = new StarRtc.Instance.getChatRoomSDK('new', chatInnerCallback, starChatSDKUserData);
starChatSDK.sigConnect();
}
function showRoomOnlineNum(roomName, onlineNum) {
var div = document.getElementById('targetChatRoomId')
div.innerHTML = roomName + "(" + onlineNum + "人在线)";//填充
}
//打开群组聊天界面
function openGroup(index) {
traceLog("openGroup:" + groupList[index]);
if (selectGroupIndex == index) return;
selectGroupIndex = index;
var div = document.getElementById('targetGroupId')
div.innerHTML = groupList[selectGroupIndex].groupName;
var div2 = document.getElementById('groupMessage')
div2.innerHTML = "";
div2.scrollTop = div2.scrollHeight;
}
function showAndroidQr() {
var evt = event || window.event;
var x = evt.clientX;
var y = evt.clientY - 300;
document.getElementById("android_app").style.left = x + "px";
document.getElementById("android_app").style.top = y + "px";
document.getElementById("android_app").style.display = 'block';
document.getElementById("android_app").style.zIndex = '999';
}
function hideAndroidQr() {
document.getElementById("android_app").style.display = 'none';
}
function showiOSQr() {
var evt = event || window.event;
var x = evt.clientX;
var y = evt.clientY - 300;
document.getElementById("ios_app").style.left = x + "px";
document.getElementById("ios_app").style.top = y + "px";
document.getElementById("ios_app").style.display = 'block';
document.getElementById("ios_app").style.zIndex = '999';
}
function hideiOSQr() {
document.getElementById("ios_app").style.display = 'none';
}
$(function () {
//初始化菜单
$.contextMenu({
selector: '.content-menu',
callback: function (key, options) {
//console.log("点击了：" + key);
var div = document.getElementById('chatRoomMessage')
div.innerHTML = '';
var div = document.getElementById('sigleMessage')
div.innerHTML = '';
//div.scrollTop = div.scrollHeight;
},
items: {
//"edit": {name: "编辑", icon: "edit"},
"delete": { name: "清屏", icon: "delete" },
}
});
chatRoomCreateDialog = $("#chatRoomCreateDlg").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"创建": newChatRoom,
"取消": function () {
chatRoomCreateDialog.dialog("close");
}
},
});
groupCreateDialog = $("#groupCreateDlg").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"创建": newGroup,
"取消": function () {
groupCreateDialog.dialog("close");
}
},
});
groupMembersDialog = $("#groupMembersDlg").dialog({
autoOpen: false,
height: 800,
width: 400,
modal: true,
buttons: {
"确定": function () {
videoLiveCanvasDlg.dialog("close");
},
"确定": function () {
groupMembersDialog.dialog("close");
}
},
});
$("#addGroupMembers").button();
$("#addGroupMembers").bind("click", function (
) {
addGroupMembers();
});
});
</script>
</html>
Loading...
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化