【经验贴】Java搭建一个以yy直播为主的直播聊天室

自己在yy直播开播，获取房间的topid和subSid；这个很容易知道的，再把下面emded代码贴上去，即可把yy直播引用

<embed width="100%" height="100%" align="middle" wmode="opaque" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="never" quality="high" src="http://c2.web.yystatic.com/r/rc/main/main/1/60/main.swf?type=yyscene&topSid=（topid）&subSid=（subSid）">

直播模块完成，是不是很简单，上面代码已经自带直播窗口控制，包括全屏控制、音量控制。

然后就是聊天室模块，参考别人教程，搭建WebSocket，参考文章：http://www.cnblogs.com/xdp-gacl/p/5193279.html

文章已经讲述的特别清楚了，按照他打代码即可。。。

（tip1：webstock的ws地址记得把工程名字带上，不然访问不到哦！）

（tip2：webstock并发测试文章分享：http://www.cnblogs.com/jiafuwei/p/6383062.html）

（tip3：webstock在线测试网址：http://www.blue-zero.com/WebSocket/）

下面我把自己的页面贴出来

这个页面还包括了，保存至桌面、qq客服、qq表情图像（gif文件没发上来，很容易找到的）

html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>直播</title>
<link rel="stylesheet" href="../../views/css/amazeui.min.css">
<link rel="stylesheet" href="../../views/css/style.css">
<style type="text/css">
/* qqFace */
.qqFace {
	margin-top: 1%;
	background: #fff;
	padding: 2px;
	border: 1px #dfe6f6 solid;
}

.qqFace table td {
	padding: 0px;
}

.qqFace table td img {
	cursor: pointer;
	border: 1px #fff solid;
}

.qqFace table td img:hover {
	border: 1px #0066cc solid;
}
</style>
</head>
<body>
	<ul class="m-nav am-nav am-nav-pills am-fr">
		<li id="login"><a>登录</a></li>
		<li id="register"><a>注册</a></li>
		<li id="userimg" style="display: none;"><a class="am-icon-user"></a>
			<a id="user"></a></li>
		<li id="out" style="display: none;"><a class="am-icon-sign-out">退出登录</a></li>
	</ul>

<!-- 这个qq客服的，直接去官网申请会给你个代码的，再拷下来就行 -->
	<a target="_blank"
		href="http://wpa.qq.com/msgrd?v=3&uin=910969601&site=qq&menu=yes"><img
		border="0" src="http://wpa.qq.com/pa?p=1:910969601:51" alt="加客服了解更多"
		title="加客服了解更多" /></a>

	<div class="am-u-lg-6 am-u-md-4 am-u-sm-12">
		<form class="am-form" name="loadform">
			<label>登录账号</label> <input type="text" id="account" name="account">
			<br> <label id="nameid" style="display: none;">昵称</label> <input
				type="text" id="name" name="name" style="display: none;"> <br>
			<label>密码</label> <input type="password" name="password"
				id="password"> <br> <input id="submit" type="button"
				value="提交">
		</form>
	</div>

	欢迎来到直播间
	<br />
	<div class="input" id="saytext" name="saytext"></div>
	<br />
	<input id="text" type="text" />
	<span class="am-icon-smile-o" id="emotion"></span>
	<button onclick="send()">发送消息</button>
	<hr />


	<div id="down">
		<a href="">保存到桌面</a>
	</div>



	<div style="height: 500px; width: 500px">
		<embed width="100%" height="100%" align="middle"
			wmode="opaque" type="application/x-shockwave-flash"
			allowfullscreen="true" allowscriptaccess="never" quality="high"
			src="http://c2.web.yystatic.com/r/rc/main/main/1/60/main.swf?type=yyscene&topSid=4614&subSid=66854914">
	</div>
	
	<div id="my-alert" class="am-modal am-modal-alert" tabindex="-1"></div>
</body>
<script src="../../views/js/jquery-1.8.0.min.js"></script>
</html>
<script type="text/javascript" src="../../views/js/base-config.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
	$(function() {
		$('#emotion').qqFace({
			id : 'facebox',
			assign : 'text',
			path : '../../views/emotion/' //表情存放的路径
		});
	});
</script>

接下来是js

var appIndex = {
		base : location.href,
		urlSaveToDesktop	:top.window.WXYH.base + "/Live/down.do",	//保存到桌面
		urlLogin	:top.window.WXYH.base + "/Live/login.do",	//登录注册
		urllogout	:top.window.WXYH.base + "/Live/logout.do",	//退出登录
		urlCheckLogin	:top.window.WXYH.base + "/Live/checklogin.do",	//退出登录
};

$(document).ready(function(){
	//登录
	$("#down").on("click", function(e) {
		$("#nameid").hide();
		$("#name").hide();
		$("#account").val("");
		$("#password").val("");
	});
	
	//注册
	$("#register").on("click", function(e) {
		$("#nameid").show();
		$("#name").show();
		$("#account").val("");
		$("#password").val("");
	});
	
	$("#submit").on("click", function(e) {
		var form = $("form[name=loadform]"); 
		
		$.ajax({
			url:appIndex.urlLogin,
			type:"post",
			data:form.serialize(),
			dataType:"json",
			success:function(res){
				var retcode = res.retcode;
				if(retcode==1){
					alert(res.retmsg);
					$("#account").val("");
					$("#password").val("");
					$("#name").val("");
					
					$("#userimg").show();
					$("#out").show();
					$("#login").hide();
					$("#register").hide();
					$("#user").html(res.name);
				}else{
					alert(res.retmsg);
					$("#account").val("");
					$("#password").val("");
					$("#name").val("");
				}
			}
		});
	});
	
	$("#down").on("click", function(e) {
		$.ajax({
			url:appIndex.urlSaveToDesktop,
			type:"post",
			data:{},
			dataType:"json"
		});
	});
	
	$("#out").on("click", function(e) {
		logout();
	});
	
	$.fn.qqFace = function(options){
		var defaults = {
			id : 'facebox',
			path : 'face/',
			assign : 'content',
			tip : 'em_'
		};
		var option = $.extend(defaults, options);
		var assign = $('#'+option.assign);
		var id = option.id;
		var path = option.path;
		var tip = option.tip;
		
		if(assign.length<=0){
			alert('缺少表情赋值对象。');
			return false;
		}
		
		$(this).click(function(e){
			var strFace, labFace;
			if($('#'+id).length<=0){
				strFace = '<div id="'+id+'" style="position:absolute;display:none;z-index:1000;" class="qqFace">' +
							  '<table border="0" cellspacing="0" cellpadding="0"><tr>';
				for(var i=1; i<=75; i++){
					labFace = '['+tip+i+']';
					strFace += '<td><img src="'+path+i+'.gif" onclick="$(\'#'+option.assign+'\').setCaret();$(\'#'+option.assign+'\').insertAtCaret(\'' + labFace + '\');" /></td>';
					if( i % 15 == 0 ) strFace += '</tr><tr>';
				}
				strFace += '</tr></table></div>';
			}
			$(this).parent().append(strFace);
			var offset = $(this).position();
			var top = offset.top + $(this).outerHeight();
			$('#'+id).css('top',top);
			$('#'+id).css('left',offset.left);
			$('#'+id).show();
			e.stopPropagation();
		});

		$(document).click(function(){
			$('#'+id).hide();
			$('#'+id).remove();
		});
	};
});
var websocket = null;
// 判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
	websocket = new WebSocket("ws://localhost:8080/CR/websocket");
} else {
	alert('当前浏览器版本过低，请更新或者更换浏览器！')
}

// 连接发生错误的回调方法
websocket.onerror = function() {
	setMessageInnerHTML("WebSocket连接发生错误");
};

// 连接成功建立的回调方法
websocket.onopen = function() {
	setMessageInnerHTML("WebSocket连接成功");
	checklogin();
}

// 接收到消息的回调方法
websocket.onmessage = function(event) {
	setMessageInnerHTML(event.data);
}

// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
	closeWebSocket();
	logout();
}

// 将消息显示在网页上
//后期要修改！！
function setMessageInnerHTML(innerHTML) {
	var str=innerHTML;
	str = str.replace(/\</g,'<');
	str = str.replace(/\>/g,'>');
	str = str.replace(/\n/g,'<br/>');
	str = str.replace(/\[em_([0-9]*)\]/g,'<img src="../../views/emotion/$1.gif" border="0" />');
	
	$("#saytext").append(str+'<br/>');
	$("#text").val("");
}

// 关闭WebSocket连接
function closeWebSocket() {
	websocket.close();
}

// 发送消息
function send() {
	$.ajax({
		url:appIndex.urlCheckLogin,
		type:"post",
		data:{},
		dataType:"json",
		success:function(res){
			if(res.retcode==1){
				var message = $("#text").val();
				var name=$("#user").html();
				websocket.send(name+"发表："+message);
			}else{
				alert("请先登录！");
			}
		}
	});
}

//检查此session上的登录信息
function checklogin(){
	$.ajax({
		url:appIndex.urlCheckLogin,
		type:"post",
		data:{},
		dataType:"json",
		success:function(res){
			if(res.retcode==1){
				$("#account").val("");
				$("#password").val("");
				$("#name").val("");
				
				$("#userimg").show();
				$("#out").show();
				$("#login").hide();
				$("#register").hide();
				$("#user").html(res.loginname);
			}
		},
	});
}

//退出登录
function logout(){
	$.ajax({
		url:appIndex.urllogout,
		type:"post",
		data:{},
		dataType:"json",
		success:function(res){
			window.location.reload(); 
		},
	});
}

jQuery.extend({ 
	unselectContents: function(){ 
		if(window.getSelection) 
			window.getSelection().removeAllRanges(); 
		else if(document.selection) 
			document.selection.empty(); 
		} 
	}); 
	jQuery.fn.extend({ 
		selectContents: function(){ 
			$(this).each(function(i){ 
				var node = this; 
				var selection, range, doc, win; 
				if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof win.getSelection != 'undefined' && typeof doc.createRange != 'undefined' && (selection = window.getSelection()) && typeof selection.removeAllRanges != 'undefined'){ 
					range = doc.createRange(); 
					range.selectNode(node); 
					if(i == 0){ 
						selection.removeAllRanges(); 
					} 
					selection.addRange(range); 
				} else if (document.body && typeof document.body.createTextRange != 'undefined' && (range = document.body.createTextRange())){ 
					range.moveToElementText(node); 
					range.select(); 
				} 
			}); 
		}, 

		setCaret: function(){ 
			if(!$.browser.msie) return; 
			var initSetCaret = function(){ 
				var textObj = $(this).get(0); 
				textObj.caretPos = document.selection.createRange().duplicate(); 
			}; 
			$(this).click(initSetCaret).select(initSetCaret).keyup(initSetCaret); 
		}, 

		insertAtCaret: function(textFeildValue){ 
			var textObj = $(this).get(0); 
			if(document.all && textObj.createTextRange && textObj.caretPos){ 
				var caretPos=textObj.caretPos; 
				caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? 
				textFeildValue+'' : textFeildValue; 
			} else if(textObj.setSelectionRange){ 
				var rangeStart=textObj.selectionStart; 
				var rangeEnd=textObj.selectionEnd; 
				var tempStr1=textObj.value.substring(0,rangeStart); 
				var tempStr2=textObj.value.substring(rangeEnd); 
				textObj.value=tempStr1+textFeildValue+tempStr2; 
				textObj.focus(); 
				var len=textFeildValue.length; 
				textObj.setSelectionRange(rangeStart+len,rangeStart+len); 
				textObj.blur(); 
			}else{ 
				textObj.value+=textFeildValue; 
			} 
		} 
	});

后台处理就不贴出来了，主要都是登录信息处理。就这样一个直播聊天室就搭建完成了！

【经验贴】Java搭建一个以yy直播为主的直播聊天室

猜你喜欢