这是游戏中的一个通信模块,单独拿出来就是一个在线聊天
源码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta http-equiv="Cache-Control" content="must-revalidate,no-cache">
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<title>北斗困虎棋</title>
<meta name="keywords" content="北斗困虎棋,老虎吃羊">
<meta name="description" content="北斗困虎棋,老虎吃羊">
<base href="." target="_blank">
<link href="./res/css.css" rel="stylesheet" media="screen" type="text/css">
<link href="./res/mobile.css" type="text/css" charset="utf-8">
<script src="./res/wsio.js"></script>
<script type="text/javascript">
var name="";
var rec="all";
var gamestate="";
var blkg=false;
function getMs(){
var wb=document.getElementById("wenb").value;
return wb;
}
function getTime(){
return new Date().toLocaleString()+' 星期'+('日一二三四五六'.charAt(new Date().getDay()));
}
setInterval(function(){document.getElementById("time").innerHTML='时间:'+getTime()},1000);
///
function okcn(){
var ours=document.getElementById("our");
ours.innerText='我['+name+']';
}
///connect//
function init(nameq) {
window.socket = io.connect("ws://localhost:18080/");
window.socket.emit("login", {name: nameq,gamestate:gamestate});
window.socket.on('login', function (obj) {
updateinfo(obj);
okcn();
});
window.socket.on('logout', function (obj) {
updateinfo(obj);
});
window.socket.on('msg', function (obj) {
if (obj != null) {
console.log(obj.msg);
if (obj.to == "all" || obj.to == name) {
var str = obj.msg;
document.getElementById("xxtx").style.display = "block";
document.getElementById("content").innerHTML += ("<div style='margin-left: 20px;text-align: right'>" + "<p style='color:red'>" + obj.from + "向我发送</p>" + str + "</div>");
document.getElementById("content").scrollTop = document.getElementById("content").scrollHeight;
document.getElementById("musicxx").play();
var xxid = setTimeout(function () {
document.getElementById("xxtx").style.display = "none";
clearTimeout(xxid);
}, 3000);
}
}
});
}
function updateinfo(obj){
var zxrs=document.getElementById("zxrs");
var lb=document.getElementById("fat");
lb.innerHTML='<div οnclick="dj(this)" class="shuli">广播</div>';
var list=obj.onlineUsers;
var Count=obj.onlineCount;
zxrs.innerHTML="在线人数"+Count+"人";
for(var k in list){
var strlb='<div οnclick="dj(this)" class="shuli">'+list[k]+'</div>';
lb.innerHTML+=strlb;
}
}
function fss() {
var colorz=document.getElementById("color").value;
var sizez=document.getElementById("size").value+"px";
var str='<p style="color:'+colorz+';font-size:'+sizez+'">'+ getMs()+'</p>';
if(getMs().length>0) {
document.getElementById("content").innerHTML +=("<div style='margin-left: 20px;text-align: left'>"+"<p style='color:chartreuse'>我向"+rec+"发送</p>"+str+"</div>");
document.getElementById("content").scrollTop = document.getElementById("content").scrollHeight;
window.socket.emit("ms", {msg: str, to: rec,from:name});
document.getElementById("wenb").value="";
}
}
/
function dj(e){
var allc=document.getElementById("fat").children;
for(var i=0;i<allc.length;i++){
allc[i].style.backgroundColor="#ff3291";
}
e.style.background="orange";
document.getElementById("fd").innerHTML= e.innerText;
if(e.innerText=="广播"){
rec="all";
}else {
rec = e.innerText;
}
document.getElementById("fat").style.display = "none";
blkg=false;
}
function changc(e){
document.getElementById("wenb").style.color= e.value;
}
function changc1(e){
document.getElementById("wenb").style.fontSize= e.value+"px";
}
window.οnkeydοwn=function(e){
if(e.keyCode==13){
fss();
}
}
function zhankai(){
if(!blkg){
document.getElementById("fat").style.display="block";
blkg=true;
}else {
document.getElementById("fat").style.display = "none";
blkg=false;
}
}
function loginin(){
document.getElementById("main1").style.display = "block";
document.getElementById("main2").style.display = "block";
document.getElementById("main3").style.display = "block";
document.getElementById("mainlogin").style.display = "none";
var nameq = document.getElementById("username").value;
name = nameq;
init(nameq);
}
</script>
<style type="text/css">
.shuli{ margin:10px ;
color:gold;
padding: 3px;
background: #ff3291;
cursor: pointer;
}
.shuli:hover{
background: orangered;
}
ul { list-style: none; }
#recordingslist audio { display: block; margin-bottom: 10px; }
::-webkit-scrollbar
{
width: 5px;
height: 5px;
background-color: rgba(213, 12, 54, 0.42);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(232, 10, 50, 0.3);
border-radius: 10px;
background-color: pink;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(217, 63, 113, 0.3);
background-color: rgba(232, 6, 113, 0.42);
}
</style>
</head>
<body style="margin:0 auto;text-align: center;background-image: url(./res/yang.jpg);background-size: cover;background-repeat: no-repeat">
<div id="topCall" class="dh_001">
<div class="dh_002">
<div class="dh_003">
<h1 style="color: orange;font-size: 1.5em">北斗困虎棋</h1>
</div>
</div>
</div>
<!----------------------------------------------------------------------------------------------------------------------------->
<div class="wz yahei" style="background: transparent;border:0">
<div style="height: 50px;background:transparent">
</div>
<div id="mainlogin" style="margin: 0 auto;height: 800px;width: 350px;background: rgba(204, 33, 94, 0.41);text-align: center;z-index: 10">
<br/><br/><br/><br/> <br/><br/>
<input type="text" id="username" placeholder="用户名" style="color: orangered;margin: 0 auto"><br/><br/>
<input type="password" id="pwds" placeholder="密码" style="color: orangered;margin: 0 auto"><br/><br/>
<button id="mianbt" style=";margin: 0 auto" οnclick="loginin();">登录</button>
</div>
<audio id="musicxx" controls="controls" style="display: none" src="./res/xiaoxi.wav" type="audio/mpeg"></audio>
<div id="main2" style="height: 50px;display: none">
</div>
<div id="main1" style="margin: 0 auto;background:transparent;height: 900px;;display: none">
<div style="background: rgba(110, 0, 36, 0.42);;margin: 0 auto">
<p style="color: rgba(204, 33, 94, 0.41)">----------------------------------------------------------</p>
<span id="our" style="color:yellow"></span><span style="color:snow">向好友</span> <span id="fd" style="color: orangered" ></span> <span style="color:snow">发消息</span>
<p id="xxtx" style="display: none"> <input type="image" src="./res/mess.gif" style="height: 30px;width: 30px;"></p>
<p> <span id="zxrs" style="color: chartreuse"></span><br/>
<span id="time" style="color: red;"></span></p>
<p style="color: rgba(204, 33, 94, 0.41)">----------------------------------------------------------</p>
</div>
<div id="main3" style="position:absolute;left:32%;top:10%;display: none;background: rgba(204, 33, 94, 0.41)">
<p style="color: gold;font-size: 2em;cursor: pointer" οnclick="zhankai();">好友列表<span style="">[ +/- ]</span> </p>
<div id="fat" style="display: none;height: 200px;overflow-y: scroll;font-size: 1.9em">
<div οnclick="dj(this)" class="shuli">广播</div>
</div>
</div>
<div id="content" style="margin:0 auto;background:rgba(110, 0, 36, 0.42);height: 200px;overflow-y: scroll;overflow-x: hidden">
</div>
<div style="margin: 0 auto;background:transparent;width: 100%">
<div style="background:rgba(110, 0, 36, 0.42);height: 90px;margin: 0 auto">
<textarea id="wenb" style="background: transparent;color:#1437aa;height: 80px;overflow-x: scroll;resize:none;font-size: 30px" placeholder="输入聊天"></textarea>
</div>
<p> <input id="size" type="range" min="5" max="100" value="40" οnchange="changc1(this)"/>
<input id="color" style="background: transparent;color: green" type="color" value="#1437AA" οnchange="changc(this);" >
<input style="background: transparent;color: snow;font-size: 2.5em" type="button" value="发送" οnclick="fss();">
</p>
</div>
<canvas id="canvas" style="background: orange;height: 400px"></canvas>
</div>
</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
<style type="text/css">
a{
cursor: pointer;
}
.date_selector, .date_selector * {
width: auto;
height: auto;
border: none;
background: none;
margin: 0;
padding: 0;
text-align: left;
text-decoration: none;
}
.date_selector {
background: #F2F2F2;
border: 1px solid #bbb;
padding: 5px;
margin: -1px 0 0 0;
position: absolute;
z-index: 100000;
display: none;
}
.date_selector_ieframe {
position: absolute;
z-index: 99999;
display: none;
}
.date_selector .bd_nav {
width: 17.5em; /* 7 * 2.5em */
}
.date_selector .month_nav, .date_selector .year_nav {
margin: 0 0 3px 0;
padding: 0;
display: block;
position: relative;
text-align: center;
}
.date_selector .month_nav {
float: left;
width: 55%;
}
.date_selector .year_nav {
float: right;
width: 35%;
margin-right: -8px; /* Compensates for cell borders */
}
.date_selector .month_name, .date_selector .year_name {
font-weight: bold;
line-height: 20px;
}
.date_selector .button {
display: block;
position: absolute;
top: 0;
width: 18px;
height: 18px;
line-height: 17px;
font-weight: bold;
color: #003C78;
text-align: center;
font-size: 120%;
overflow: hidden;
border: 1px solid #F2F2F2;
}
.date_selector .button:hover, .date_selector .button.hover {
background: none;
color: #003C78;
cursor: pointer;
border-color: #ccc;
}
.date_selector .prev {
left: 0;
}
.date_selector .next {
right: 0;
}
.date_selector table {
border-spacing: 0;
border-collapse: collapse;
clear: both;
width: 17.5em;
}
.date_selector th, .date_selector td {
width: 2.5em;
height: 2em;
padding: 0;
text-align: center;
color: black;
}
.date_selector td {
border: 1px solid #ccc;
line-height: 2em;
text-align: center;
white-space: nowrap;
color: #003C78;
background: white;
}
.date_selector td.today {
background: #FFFEB3;
}
.date_selector td.unselected_month {
color: #ccc;
}
.date_selector td.selectable_day {
cursor: pointer;
}
.date_selector td.selected {
background: #D8DFE5;
font-weight: bold;
}
.date_selector td.selectable_day:hover, .date_selector td.selectable_day.hover {
background: #003C78;
color: white;
}
</style>
</body>
</html>