' +
'
' +
'
' +
'' +
'' +
'
' +
'
' +
'' +
'
' +
'
' +
'' +
'
' +
'' +
'
' +
'' +
'
' +
'' +
' ' +
'' +
'
' +
'
' +
'' +
'
' +
'' +
'
' +
'
' +
'
' +
'' +
'
' +
'' +
'
' +
'
' +
'' +' ' +
'
' +
'' +
'
' +
'' +
'
' +
'
' +
'
' +
'' +
'
' +
'
' +
'
' +
'
' +
'' +
'
' +
'
'
);
var chat_socket = null;
var rtc = null;
var chat_name = null;
/**
* 起名
*/
var chat_setName = function(){
var name = $("#chat_name").val();
if(name){
chat_name = name;
chat_socketCon();//并不是每次都创建
chat_sendMsg(1,"");//请求获取其他在线用户的信息,排除掉自己
$("#chat_name_modal").modal('hide');
}
}
/**
* 创建websocket
*/
var chat_socketCon = function(){
if(chat_socket != null){
return;
}
chat_socket = 0;//相当于暂时锁住,防止点击太快创建两次socket
var t_socket = createWebSocket("webrtc",websocketPath,
function(){//连接成功,向服务端发送身份
chat_socket = t_socket;
chat_sendMsg(0,chat_name);
},function(){//连接关闭
chat_socket = null;
$("#chat_socketCon li a").eq(0).html("未连接(点击连接获取用户列表)");
var u = $("#chat_socketCon");
var li = u.find("li");
for(var i = 2;i < li.length; i++){
li[i].remove();
}
$("#chat_ready_id").html("");
$("#chat_ready_id").data("uid","");
$("#chat_dialog").modal('hide');
$("#chat_dialogForOne").modal("hide");
},function(){//连接异常
chat_socket = null;
$("#chat_socketCon li a").eq(0).html("未连接(点击连接获取用户列表)");
var u = $("#chat_socketCon");
var li = u.find("li");
for(var i = 2;i < li.length; i++){
li[i].remove();
}
},function(msg){//收到消息
var data = JSON.parse(msg);
chat_response(data.type,data.message);
});
}
/**
* 处理服务端响应的消息
* 定义请求或响应类型,如果是发出,则是发送该类型的请求,如果是响应,则是收到了该类型的请求
* type
* 0(向服务端上报身份,或者收到服务端返回的身份id)
* 1(向服务端请求获取其他在线用户id数组,或者收到服务端返回的在线用户数组)
* 2(发起与一个用户的对话准备,或收到一个用户的准备)
* 3(类型2发起的用户是否准备的响应结果)
* 4(取消准备并且给对方发送取消准备,或者接受对方取消准备的消息)
* @param {*} type
* @param {*} msg
*/
var chat_response = function(type,msg){
if(type == "0"){//收到服务端响应的身份id
$("#chat_socketCon li a").eq(0).html("已连接(
"+msg+" )再次点击刷新");
chat_sendMsg(1,"");//请求获取其他在线用户的信息,排除掉自己
}else if(type == "1"){//收到服务端响应的其他在线用户信息
if(msg.length != 0){
var users = JSON.parse(msg);
var u = $("#chat_socketCon");
var li = u.find("li");
for(var i = 2;i < li.length; i++){
li[i].remove();
}
if(users.length == 0){//没有一个其他用户
u.append('
暂未有其他用户连接 ');
u.append('
可以开两个浏览器模拟使用(暂时只支持谷歌) ');
u.append('
不是第一次访问,请先清除浏览器文件缓存 ');
return;
}
for(var i in users){
var uid = users[i]["sessionId"];
var name = users[i]["name"];
var status = users[i]["status"];
var ready = users[i]["callId"] == uid ? 2 : 1;//2正在与自己对话,1正在与别人对话
u.append("
"+(status == 0 ? "申请对话" : ready == 2 ? "取消对话" : "正在对话")+" ");
}
/**
* 给每个用户号绑定发起访问请求的事件
*/
$("#chat_socketCon li[name='chat_user']").on("click",function(e){
e.stopPropagation();
});
$("#chat_socketCon button").off("click").on("click",function(e){
e.stopPropagation();
var userid = $(this).data("userid");
if(userid){
var status = $(this).html();
if(status == "申请对话"){
//检查是否正在跟其他人对话
var bts = $("#chat_socketCon button");
for(var i = 0;i < bts.length; i++){
if($(bts[i]).html() == "取消对话"){
return;
}
}
chat_sendMsg(2,userid);//发起对话准备
$(this).html("取消对话");
$(this).toggleClass("btn-success");
$(this).toggleClass("btn-primary");
}else if(status == "取消对话"){
chat_sendMsg(4,"");//向服务端发起取消对话
}
}
});
}
}else if(type == "2"){//收到了一个用户的准备
if(msg.length != 0){
var users = JSON.parse(msg);
$("#chat_ready_id").html(users.name);
$("#chat_ready_id").data("uid",users.sessionId);
$("#chat_dialog").modal('show');
}
}else if(type == "3"){//响应一个用户的准备
if(msg.length != 0){
var users = JSON.parse(msg);
var ready = users.ready;
var uid = users.sessionId;
if(ready == "1"){//对方同意对话,发起webrtc信令,建立webrtc连接
var dialogfor = $("#chat_dialogForOne");
var dialogforname = dialogfor.find("label[name='name']");
rtc = rtc_getTool(onmessage,onaddstream,function(){
dialogfor.modal("hide");
},function(){
dialogforname.html(users.name);
dialogfor.modal("show");
});
rtc.createPeerConnection();
rtc.sendOffer();
}else if(ready == "0"){
var bt = $("#u" + uid);
bt.html("申请对话");
bt.removeClass("btn-primary");
bt.addClass("btn-success");
}
}
}else if(type == "4"){//收到服务端发过来的取消对话,或者关闭对话
if(msg.length != 0){
$("#chat_dialog").modal('hide');
$("#chat_dialogForOne").modal("hide");
var u = $("#u" + msg);
u.html("申请对话");
u.removeClass("btn-primary");
u.addClass("btn-success");
$("#chat_ready_id").html("");
$("#chat_ready_id").data("uid","");
if(rtc != null){
rtc.close();
}
}
}else if(type == "6"){//收到服务端发过来的 offer信令
if(msg.length != 0){
var json = JSON.parse(msg);
rtc.signallingHandle(json);
}
}else if(type == "7"){//收到服务端发过来的 answer信令
if(msg.length != 0){
var json = JSON.parse(msg);
rtc.signallingHandle(json);
}
}else if(type == "8"){//收到服务端发过来的 候选信令
if(msg.length != 0){
var json = JSON.parse(msg);
rtc.signallingHandle(json);
}
}
}
/**
* 点击连接websocket,或者刷新其他用户
*/
$("#rct_con").on("click",function(e){
e.stopPropagation();
if(chat_socket == null){
//先起名
$("#chat_name_modal").modal('show');
}else{
chat_sendMsg(1,"");//请求获取其他在线用户的信息,排除掉自己
}
});
var chat_sendClick = function(){
var value = $("#chat_dialogForOne textarea[name='message']").val();
var msg = {"data":value,"type":"text","id":$("#uid").html()};
showMessage("chat_dialogForOne",msg,"right");
rtc.send(JSON.stringify(msg));
}
/**
* 发送字符串内容
*/
$("#chat_sendString").on("click",function(e){
chat_sendClick();
});
/**
* 按回车发送
*/
$("#chat_dialogForOne textarea[name='message']").on("keydown",function(e){
if(e.keyCode == 13 && e.ctrlKey){
$(this).val($(this).val() + "\n");
}else if(e.keyCode == 13){
e.preventDefault();
chat_sendClick();
}
});
/**
* 发送文件
*/
$("#chat_fileMsgForOne").on("change",function(){
//todo 现在不实现
});
/**
* 接收webrtc通道发过来的数据回调
* @param {*} event
*/
var filequeue = {};//文件队列,可以应对多个文件同时传送
var onmessage = function(event){
var msg = JSON.parse(event.data);
if(msg.type == "text"){//文字内容
showMessage("chat_dialogForOne",msg,"left");
}else if(msg.type == "file"){//文件,
//todo 现在不实现
}
}
/**
* 接收webrtc通道发过来的视频,语音流
* @param {*} event
*/
var onaddstream = function(remoteStream){
var video = $("#chat_dialogForOne video[name='remote']")[0];
video.srcObject = remoteStream;
video.onloadedmetadata = function(e) {
video.play();
};
}
/**
* 重置视频,语音按钮状态
*/
var resetVideoButton = function(){
var openVideo = $("#chat_dialogForOne button[name='openVideo']");
var openAudio = $("#chat_dialogForOne button[name='openAudio']");
openVideo.find(" > span").html("开始视频");
openAudio.show();
openAudio.find(" > span").html("开始语音");
openVideo.show();
openVideo.removeClass("active");
openAudio.removeClass("active");
openAudio.data("use",false);
openVideo.data("use",false);
}
/**
* 打开,关闭视频聊天按钮
*/
$("#chat_dialogForOne button[name='openVideo']").on("click",function(){
$(this).toggleClass("active");
if(!$(this).data("use")){//开启视频语音聊天
$(this).data("use",true);
rtc.openVideoAudioLocal(function(localStream){//创建本地视频流,绑定到控件上
var video = $("#chat_dialogForOne video[name='video']")[0]; //获取到展现视频的标签
video.srcObject=localStream;
video.onloadedmetadata = function(e) {
video.play();
};
rtc.sendAddStream(localStream);
},true,true);//为了防止自己能听到自己发出的声音,可以只启动视频,不启动音频,然后再创建一个新的开启语音,视频的对象发给远程
$(this).find(" > span").html("结束视频");
$("#chat_dialogForOne button[name='openAudio']").hide();
}else{//关闭视频语音聊天
rtc.closeStream();
resetVideoButton();
}
});
/**
* 打开,关闭语音聊天按钮
*/
$("#chat_dialogForOne button[name='openAudio']").on("click",function(){
$(this).toggleClass("active");
$(this).data("use",$(this).data("use") ? false : true);
if($(this).data("use")){//开启语音聊天
rtc.openVideoAudioLocal(function(localStream){//创建本地视频流,绑定到控件上
var video = $("#chat_dialogForOne video[name='video']")[0]; //获取到展现视频的标签
video.srcObject=localStream;
video.onloadedmetadata = function(e) {
video.play();
};
rtc.sendAddStream(localStream);
},false,true);//为了防止自己能听到自己发出的声音,可以启动音频后不添加到本地,只发给远程
$(this).find(" > span").html("结束语音");
$("#chat_dialogForOne button[name='openVideo']").hide();
}else{//关闭语音聊天
rtc.closeStream();
resetVideoButton();
}
});
/**
* 关闭对话框
*/
$("#chat_dialogForOne").on("hidden.bs.modal",function(e){
resetVideoButton();
if(rtc != null){
rtc.close();
rtc = null;
chat_sendMsg(4,"");//向服务端发起取消对话
}
//清除聊天记录 chat_dialogForOne bubbleDiv
var lis = $(this).find("ul[name='bubbleDiv'] > li");
for (var i = 0 ; i < lis.length; i++){
$(lis[i]).remove();
}
});
/**
* 像服务端发送数据,返回是否发送成功
* @param {Int} type ,发送数据类型,
* type=0发送身份标识,
* @param {string} msg
*/
var chat_sendMsg = function(type,msg){
if(chat_socket == null || chat_socket == 0){
return false;
}
chat_socket.send(type,msg);
return true;
}
/**
* 是否同意对话 i 1是 0 否
* @param {*} i
*/
var chat_ready = function(i){
chat_sendMsg("3",i);//回复对方
if(i == 1){//同意
var uid = $("#chat_ready_id").data("uid");
var dialogfor = $("#chat_dialogForOne");
var dialogforname = dialogfor.find("label[name='name']");
rtc = rtc_getTool(onmessage,onaddstream,function(){
dialogfor.modal("hide");
},function(){
dialogforname.html($("#chat_ready_id").html());
dialogfor.modal("show");
});
rtc.createPeerConnection();
var bt = $("#u" + uid);
bt.html("取消对话");
bt.removeClass("btn-success");
bt.addClass("btn-primary");
}
$("#chat_dialog").modal('hide');
}
/**
* 添加好友发送的内容到聊天面板
* @param {*} showId 聊天框id
* @param {*} message 消息json对象
* @param {*} is_i right or left代表别人说的话
*/
var showMessage = function(showId,message,is_i){
if(message.data.length != 0){
var li = $('
');
var img = $('');
var you_msg = $('');
you_msg.html(message.data);
span.append(you_msg);
var bottomLevel = $('');
span.append(bottomLevel);
var bottomLevel = $('');
span.append(bottomLevel);
li.append(img);
var div = $("");
var name = $('昵称['+message.id+'] ');
div.append(name);
div.append($('