You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
9.6 KiB
234 lines
9.6 KiB
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>聊天室</title>
|
|
<script type="text/javascript" src="__CSS__/kefu/js/jquery.min.js"></script>
|
|
<link href="__CSS__/kefu/css/jquery-sina-emotion.min.css" rel="stylesheet">
|
|
<link href="__CSS__/kefu/css/chat.css" rel="stylesheet">
|
|
<script type="text/javascript" src="__CSS__/kefu/js/jquery-sina-emotion.js"></script>
|
|
<script type="text/javascript" src="__CSS__/kefu/js/swfobject.js"></script>
|
|
<script type="text/javascript" src="__CSS__/kefu/js/web_socket.js"></script>
|
|
|
|
<body onload="connect();">
|
|
<div class="newWindow ">
|
|
<div class="window-header">
|
|
<img src="/static/css/kefu/img/btcex.png" width="40px" height="40px"
|
|
style="margin-right:10px;float:left;margin-top:4px;border-radius:2px;" alt="头像">
|
|
<p class="company-name font16">BTCEXCOIN</p>
|
|
<p class="autograph font12" title="">BTCEXCOIN</p>
|
|
</div>
|
|
<div class="window-content">
|
|
<div class="content-left">
|
|
<div class="chat-content">
|
|
|
|
|
|
</div>
|
|
<div class="pc-visitor-footer">
|
|
<form>
|
|
<div class="function-bar">
|
|
<div class="talk-function-bar">
|
|
<div class="svgWrap">
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
<label class="changeColor-wrap">
|
|
<svg data-title="表情" class="function-icon icon-face face" width="24px"
|
|
height="24px" viewBox="0 0 24 24" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"><!-- 表情 -->
|
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none"
|
|
fill-rule="evenodd">
|
|
<g id="Imported-Layers-Copy-7">
|
|
<rect id="Rectangle-3" x="0" y="0" width="24" height="24"></rect>
|
|
<path class="svgColor"
|
|
d="M5,12 C5,15.8656805 8.1343195,19 12,19 C15.8656805,19 19,15.8656805 19,12 C19,8.1343195 15.8656805,5 12,5 C8.1343195,5 5,8.1343195 5,12 Z M3,12 C3,7.02975 7.02975,3 12,3 C16.97025,3 21,7.02975 21,12 C21,16.97025 16.97025,21 12,21 C7.02975,21 3,16.97025 3,12 Z"
|
|
id="Combined-Shape" fill="#8FA1B3" fill-rule="nonzero"></path>
|
|
<path class="svgColor"
|
|
d="M9,8 C8.172,8 7.5,8.672 7.5,9.5 C7.5,10.328 8.172,11 9,11 C9.828,11 10.5,10.328 10.5,9.5 C10.5,8.672 9.828,8 9,8"
|
|
id="Fill-2" fill="#8FA1B3"></path>
|
|
<path class="svgColor"
|
|
d="M15,8 C14.172,8 13.5,8.672 13.5,9.5 C13.5,10.328 14.172,11 15,11 C15.828,11 16.5,10.328 16.5,9.5 C16.5,8.672 15.828,8 15,8"
|
|
id="Fill-2-Copy" fill="#8FA1B3"></path>
|
|
<path class="svgColor"
|
|
d="M9.55730755,18.9802954 C12.5582692,18.9802954 15.0860829,16.7646048 15.4989445,13.8196019 C15.5756198,13.2726656 15.1943979,12.7671285 14.6474616,12.6904532 C14.1005252,12.6137779 13.5949881,12.9949998 13.5183128,13.5419361 C13.2434436,15.5026194 11.5576081,16.9802954 9.55730755,16.9802954 C9.0050228,16.9802954 8.55730755,17.4280106 8.55730755,17.9802954 C8.55730755,18.5325801 9.0050228,18.9802954 9.55730755,18.9802954 Z"
|
|
id="Oval-26" fill="#8FA1B3" fill-rule="nonzero"
|
|
transform="translate(12.033030, 15.830470) rotate(39.000000) translate(-12.033030, -15.830470) ">
|
|
</path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="inputArea">
|
|
<textarea class="textarea" id="textarea" name="content" placeholder="请输入文字"></textarea>
|
|
</div>
|
|
</form>
|
|
|
|
<span class="send-btn submit-btn-wrap">发送</span>
|
|
</div>
|
|
</div>
|
|
<div class="content-right">
|
|
<div class="content-right-top font14">关于我们</div>
|
|
<div class="company-content font12">
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
if (typeof console == "undefined") { this.console = { log: function (msg) { } }; }
|
|
|
|
var ws, name, client_list = {};
|
|
function connect() {
|
|
ws = new WebSocket("wss://cs.btcaholic.com/ct");
|
|
|
|
ws.onmessage = onmessage;
|
|
ws.onclose = function () {
|
|
console.log("连接关闭，定时重连");
|
|
connect();
|
|
};
|
|
ws.onerror = function () {
|
|
console.log("出现错误");
|
|
};
|
|
}
|
|
|
|
|
|
function onmessage(e) {
|
|
|
|
var data = JSON.parse(e.data);
|
|
console.log(data)
|
|
switch (data['type']) {
|
|
case 'login':
|
|
var bild = '{"type":"bild","room_id":"{:session('kefu')}"}';
|
|
ws.send(bild);
|
|
break;
|
|
case 'bild':
|
|
var id = data.room_id;
|
|
if (!id) {
|
|
alert('房间出错！');
|
|
}
|
|
break;
|
|
case "say":
|
|
if (data.group == '{:session('kefu')}<?php echo $_GET['toid']?>')
|
|
{
|
|
$(".chat-content").append('<div class="heisay"><div class="say_content"><p>游客' + data.time.substr(10, 9) + '</p><span>' + data.content + '</span></div></div>').parseEmotion();
|
|
$(".chat-content").scrollTop(3000);
|
|
}
|
|
return;
|
|
case "save":
|
|
|
|
save_message(data);
|
|
return;
|
|
}
|
|
|
|
}
|
|
$(".send-btn").click(function () {
|
|
var text = $(".textarea").val();
|
|
//解析新浪微博图片
|
|
text.replace(/(http|https):\/\/[\w]+.sinaimg.cn[\S]+(jpg|png|gif)/gi, function (img) {
|
|
return "<a target='_blank' href='" + img + "'>" + "<img src='" + img + "'>" + "</a>";
|
|
}
|
|
);
|
|
//解析url
|
|
text.replace(/(http|https):\/\/[\S]+/gi, function (url) {
|
|
if (url.indexOf(".sinaimg.cn/") < 0)
|
|
return "<a target='_blank' href='" + url + "'>" + url + "</a>";
|
|
else
|
|
return url;
|
|
}
|
|
);
|
|
if (text == '') {
|
|
return;
|
|
}
|
|
var time = getNowFormatDate();
|
|
var message = '{"content":"' + text + '","type":"say","room_id":"{:session('kefu')}","toid":"<?php echo $_GET['toid']?>","group":"{:session('kefu')}<?php echo $_GET['toid']?>"}';
|
|
$(".chat-content").append('<div class="mysay"><p>我 ' + time + '</p><span>' + text + '</span></div>').parseEmotion();
|
|
$(".chat-content").scrollTop(3000);
|
|
console.log(11111);
|
|
ws.send(message);
|
|
$(".textarea").val("");
|
|
})
|
|
$('.face').click(function (event) {
|
|
$(this).sinaEmotion();
|
|
event.stopPropagation();
|
|
});
|
|
|
|
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
|
|
$("textarea").on("keydown", function (e) {
|
|
// 按enter键自动提交
|
|
if (e.keyCode === 13 && !e.ctrlKey) {
|
|
e.preventDefault();
|
|
$(".send-btn").click();
|
|
return false;
|
|
}
|
|
// 按ctrl+enter组合键换行
|
|
if (e.keyCode === 13 && e.ctrlKey) {
|
|
$(this).val(function (i, val) {
|
|
return val + "\n";
|
|
});
|
|
}
|
|
});
|
|
function getNowFormatDate() {
|
|
var date = new Date();
|
|
var currentdate = date.toLocaleTimeString();
|
|
return currentdate;
|
|
}
|
|
function save_message(data) {
|
|
$.post("{:url('Index/save_message')}", data, function (e) {
|
|
//
|
|
});
|
|
}
|
|
$(function () {
|
|
$.post("{:url('Index/chat_record')}", "fid=<?php echo $_GET['toid']?>", function (data) {
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (data[i].fid !== '{:session('kefu')}'){
|
|
$(".chat-content").append('<div class="heisay"><div class="say_content"><p>' + data[i].fid + '' + data[i].time.substr(10, 9) + '</p><span>' + data[i].content + '</span></div></div>').parseEmotion();
|
|
}
|
|
else {
|
|
$(".chat-content").append('<div class="mysay"><p>我 ' + data[i].time.substr(10, 9) + '</p><span>' + data[i].content + '</span></div>').parseEmotion();
|
|
}
|
|
}
|
|
$(".chat-content").append('<div class="mysay"> </div>');
|
|
$(".chat-content").scrollTop(3000);
|
|
});
|
|
})
|
|
</script>
|
|
<script>
|
|
document.addEventListener('visibilitychange', function () {
|
|
var isHidden = document.hidden;
|
|
if (isHidden) {
|
|
console.log('暂停');
|
|
} else {
|
|
console.log('开始');
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
window.onfocus = function() {
|
|
console.log('开始');
|
|
};
|
|
|
|
//当前窗口失去焦点
|
|
window.onblur = function() {
|
|
console.log('暂停');
|
|
};
|
|
*/
|
|
|
|
|
|
|
|
</script>
|