chat/client.js
2020-10-24 11:44:53 +08:00

340 lines
14 KiB
JavaScript
Executable File

(function (document, window) {
var _layer = {
create: function (tag, html, _p) {
_p = _p || document.body;
var _ele = document.createElement(tag);
_ele.innerHTML = html || ' ';
_p.appendChild(_ele);
return (function (a, pp) {
var ss = function (ele, p) {
var _ret = {
get: function () {
return ele;
},
on: function (evt, f) {
ele['on' + evt] = f;
return _ret;
},
addClass: function (clsName) {
ele.className += clsName;
return _ret;
},
remove: function () {
p.removeChild(ele);
},
html: function (s) {
if (s) ele.innerHTML = s;
return ele.innerHTML;
},
css: function (name, value) {
ele.style[name] = value;
return _ret;
},
find: function (s) {
data = ele.querySelector(s);
if (data) {
return ss(data);
}
return null;
},
center: function () {
ele.style['left'] = (window.innerWidth - ele.offsetWidth) / 2 + 'px';
ele.style['top'] = (window.innerHeight - ele.offsetHeight) / 2 + 'px';
return _ret;
}
};
_ret[0] = ele;
return _ret;
}
return ss(a, pp);
})(_ele, _p);
},
alert: function (message) {
var tpl = `<div class="layui-layer-shade" times="3" style="z-index: 19891016; background-color: rgb(0, 0, 0); opacity: 0.3;"></div>
<div class="layui-layer layui-layer-dialog" id="layui-layer3" type="dialog" times="3"
showtime="0" contype="string" style="z-index: 19891017; ">
<div class="layui-layer-title" style="cursor: move;">信息</div><div id="" class="layui-layer-content"></div><span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span><div class="layui-layer-btn layui-layer-btn-"><a class="layui-layer-btn0 close-dialog">确定</a></div><span class="layui-layer-resize"></span></div>`;
var dialog = _layer.create('div', tpl).addClass('layer-wrapper');
dialog.find('.layui-layer-content').html(message);
var _c = function () {
dialog.remove();
return false;
};
dialog.find('.layui-layer-close1').on('click', _c);
dialog.find('.close-dialog').on('click', _c);
dialog.find('.layui-layer-dialog').center();
},
msg: function (message) {
var msgString = `<div class="layui-layer layui-layer-dialog layui-layer-border layui-layer-msg layui-layer-hui"
id="layui-layer3" type="dialog" times="3" showtime="0" contype="string" style="z-index: 19891017; ">
<div id="" class="layui-layer-content">` +
message + '</div><span class="layui-layer-setwin"></span></div>';
var ele = _layer.create('div', msgString).addClass('layer-wrapper');
var child = ele.get().children[0]
child.style['left'] = (window.innerWidth - child.offsetWidth) / 2 + 'px';
// child.style['top'] = (window.innerHeight - child.offsetHeight)/2 + 'px';
ele.find('.layui-layer-dialog').css('top', (window.innerHeight - child.offsetHeight) / 2 + 'px');
setTimeout(function () {
ele.remove();
}, 4000);
},
loading: function (message, time) {
var tpl = `<div class="layui-layer-shade" times="3" style="z-index: 19891016; background-color: rgb(0, 0, 0); opacity: 0.3;"></div>
<div class="layui-layer layui-layer-dialog layui-layer-msg" id="layui-layer4" type="dialog" times="4" showtime="0" contype="string" style="z-index: 19891018; top: 430.5px; left: 360px;"><div id="" class="layui-layer-content layui-layer-padding"><i class="layui-layer-ico layui-layer-ico16"></i><span class="loading-text"></span></div><span class="layui-layer-setwin"></span></div>`;
var dialog = _layer.create('div', tpl).addClass('layer-wrapper');
dialog.find('.loading-text').html(message);
var _c = function () {
dialog.remove();
return false;
};
if (typeof (time) == 'number' && time > 0) {
setTimeout(function () {
dialog.remove();
}, 4000);
}
dialog.find('.layui-layer-dialog').center();
},
closeAll: function () {
document.querySelectorAll('.layer-wrapper').forEach(function (ele) {
ele.parentNode.removeChild(ele);
});
}
};
window['layer'] = _layer;
})(document, window);
(function (w, d) {
var __server = 'http://' + location.host,
chatServer = __server + '/chat_server/',
socket = null, _username = "无名氏",
_initStart = false,
loadJs = function (src, callback) {
var s = d.createElement('script');
s.setAttribute('src', src);
if (typeof (callback) == 'function') {
s.onload = callback;//;
}
d.head.appendChild(s);
},
loadCss = function (src, callback) {
var s = d.createElement('link');
s.setAttribute('href', src);
s.setAttribute('rel', 'stylesheet');
if (typeof (callback) == 'function') {
s.onload = callback;//;
}
d.head.appendChild(s);
},
getCookie = function (name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
},
loading = 0,
_ = {
init: function () {
socket = io(__server + ':3000?username=' + _username);
socket.on('error notice', function (err) {
try {
layer.alert('服务器提示:' + err)
} catch (e) {
alert('服务器提示:' + err)
}
console.error('服务器提示:', err)
});
socket.on('message', function (data) {
if (typeof (ret.onMessage) == 'function') {
ret.onMessage(JSON.parse(data));
} else console.log(data);
});
socket.on('updatePerson', function (data) {
if (typeof (ret.onUpdatePerson) == 'function') {
ret.onUpdatePerson(JSON.parse(data));
} else console.log(data);
});
socket.on('connect', function () {
setTimeout(function () {
layer.closeAll();
}, 500);
console.log('connect server success');
});
socket.on('reconnect', function () {
// layer.closeAll();
console.log('reconnect server success');
});
socket.on('disconnect', function () {
layer.loading('连接服务器中...', 0);
});
layer.loading('连接服务器中...', 0);
}
},
ret = {
/**
* 发送消息
* @param string message
*/
sendMessage: function (message) {
if (!socket) {
alert("请先使用start()注册聊天服务!");
}
socket.emit('message', message);
},
sendMessageTo: function (message, uuid) {
if (!socket) {
alert("请先使用start()注册聊天服务!");
}
socket.emit('message_to', JSON.stringify({contenet: message, uuid: uuid}));
},
startWithSession: function (session_id) {
if (_initStart) {
alert('已经start过了');
return;
}
_initStart = true;
if (!session_id) {
try {
layer.alert("用户的session不能为空!")
} catch (e) {
alert("用户的session不能为空!")
}
return false;
}
_username = 'nickname&session=' + session_id;
loadJs(__server + '/socket.io/socket.io.js', _.init);
},
start: function (username) {
if (_initStart) {
alert('start()已经被调用过了');
return;
}
_initStart = true;
try {
layer.msg('此方法即将被废弃请使用startWidthSession()')
} catch (ex) {
}
if (!username) {
setTimeout(function () {
try {
layer.alert("请输入用户名!")
} catch (e) {
alert("请输入用户名!")
}
}, 50);
return false;
}
_username = username;
loadJs(__server + '/socket.io/socket.io.js', _.init);
},
regUser: function (username, pwd1, pwd2, nickname, email, valicode, onDataBack) {
if (!username || !pwd1 || !pwd2 || !nickname || !email || !valicode) {
try {
layer.alert("所有的参数都填写了吗!")
} catch (e) {
alert("所有的参数都填写了吗!")
}
return;
}
if (typeof (onDataBack) != 'function') {
try {
layer.alert("没有设置数据处理函数!")
} catch (e) {
alert("没有设置数据处理函数!")
}
return;
}
var postData = {
'username': username,
'pwd1': pwd1,
'pwd2': pwd2,
'email': email,
'nickname': nickname,
'valicode': valicode
};
$.post(chatServer + 'account/reg.php', postData, function (ret) {
if (ret['code'] == 0) {
onDataBack('success', ret['data']);
} else {
onDataBack('error', ret['message']);
}
}, 'json');
},
showMessage:function(message){
try {
layer.msg(message);
} catch (e) {
alert(message);
}
},
showAlert:function(message){
try {
layer.alert(message);
} catch (e) {
alert(message);
}
},
userLogin: function (username, password) {
return new Promise((resolve, reject) => {
if (!username || !password) {
ret.showAlert('必须填写用户名和密码');
resolve(false);return;
}
var xhr = $.ajax({
url: chatServer + 'account/login.php',
async: false,
type: 'post',
dataType: 'json',
data: {username: username, password: password}
});
if (xhr.status != 200) {
resolve(false);
} else {
var data = xhr.responseJSON;
if (data.code == 0) {
resolve(data.data)
}else{
ret.showMessage(data.message);
resolve(false);
}
}
});
},
sendEmailCode: function (email) {
return new Promise((resolve, reject) => {
$.post(chatServer + 'sendEmail.php', {'email': email}, function (ret) {
if (ret['code'] == 0) {
resolve(ret['data']);
} else {
reject(ret['message']);
}
}, 'json');
});
},
addEventListener: function (eventName, callback) {
},
onMessage: function (data) {
console.log(data);
},
onUpdatePerson: function (data) {
console.log(data);
}
};
//ret.__proto__['get_cookie'] = get_cookie;
w.Chat = ret;
if (typeof (w['jQuery']) == 'function' ) {
loadCss('https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css');
//loadJs('https://cdn.bootcss.com/layer/3.1.0/layer.js');
} else {
loadJs('https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js', function () {
loadCss('https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css');
//loadJs('https://cdn.bootcss.com/layer/3.1.0/layer.js');
});
}
})(window, document);