1 $(function () {
2 var CookieObj = {}, socket = io(), headInfo = "群聊 (";;
3 window.onbeforeunload = function (e) {
4 if (document.cookie) return false;
5 }
6 render();
7 /*
8 *登录
9 */
10 var onLogin = function (e) {
11 var xhr;
12 if (!$('#username').val() || !$('#userpassword').val()) return;
13 xhr = $.ajax({
14 url: '/login',
15 type: 'POST',
16 dataType: 'json',
17 data: {
18 name: $('#username').val(),
19 password: $('#userpassword').val()
20 }
21 })
22 .done(function (data, textStatus, jqXHR) {
23 if (data.value === 'Y') {
24 render();
25 } else {
26 $('#SignInErr').html(data.msg);
27 }
28 })
29 .fail(function (jqXHR, textStatus, errorThrown) {
30 $('#SignInErr').html('Error occured! Please try again.');
31 });
32 };
33 /*
34 *注册
35 */
36 var onSignup = function (e) {
37 var xhr;
38 if (!$('#upName').val() || !$('#upPassword').val()) return;
39 xhr = $.ajax({
40 url: '/signup',
41 type: 'POST',
42 dataType: 'json',
43 data: {
44 name: $('#upName').val(),
45 password: $('#upPassword').val()
46 }
47 })
48 .done(function (data, textStatus, jqXHR) {
49 if (data.value === 'Y') {
50 $('#SignUpErr').html(data.msg || 'Login now with these credentials.');
51 } else {
52 $('#SignUpErr').html(data.msg || 'Invalid username');
53 }
54 })
55 .fail(function (jqXHR, textStatus, errorThrown) {
56 $('#SignUpErr').html('Error occured! Please try again.');
57 });
58 };
59
60 var onMsgSubmit = function () {
61 var str = $("#msg").val();
62 var sendMsg = replace_em(str);
63 if (!sendMsg || sendMsg.length > 1261) {
64 alert("err:内容为空或者内容长度超出限制！")
65 $('#msg').val('');
66 return;
67 }
68 var roomOf = $("#headmessages strong").html();
69 socket.emit('chat message', sendMsg, CookieObj.h_imgPath, roomOf);
70 $('#msg').val('');
71 return false;
72 };
73
74 socket.on('sysJoin', function (msg) {
75 var joinInfo = "";
76 joinInfo = '' + msg + ''
;
77 $(joinInfo).appendTo($("#messages")).animate({ "opacity": 0.5 }, 2000,
function () {
78 $(
this).animate({ "opacity": 1 }, 1500,
function () {
79 $(
this).animate({ "opacity": 0.3 }, 1000
);
80 });
81 });
82 scroll();
83 });
84
85 socket.on('chat message',
function (name, msg, img) {
86 var str = ''
;
87 if (name ==
CookieObj.name) {
88 str = '
' + msg + '
' + ''
;
89 }
else {
90 str = '
' + msg + '
'
;
91 }
92 $('#messages'
).append(str);
93 scroll();
94 });
95
96 /*房间选择*/
97 //默认是进广场，从其他房间执行如下函数
98 $("#selectmenu li").eq(0).on("click",
function (e) {
99 e.stopPropagation();
100 $("#selectRoom"
).hide();
101 $("#headmessages strong").html("Square"
);
102 socket.emit('join', 'Square', $("#gloableName"
).html());
103 $("#messages"
).empty();
104 });
105 $("#selectmenu li").eq(1).on("click",
function (e) {
106 e.stopPropagation();
107 $("#selectRoom"
).show();
108 });
109 //选择秦时明月或火影忍者房间
110 $("#selectRoom li").on("click",
function () {
111 var roomName = $(
this).children("span"
).html();
112 var userName = $("#gloableName"
).html();
113 $("#headmessages strong"
).html(roomName);
114 socket.emit('join'
, roomName, userName);
115 $("#messages"
).empty();
116 });
117
118
119
120 /*
121 *接收所有已注册用户的信息
122 */
123 socket.on('onlineUser',
function (online) {
124 var onlineStr = ''
;
125 for (
var i = 0; i < online.length; i++
) {
126 var item =
online[i];
127 onlineStr += '
' + item.name + '[Online]'
;
128 }
129 $("#AllOnline"
).empty();
130 $("#oncount"
).html(online.length);
131 $("#AllOnline"
).append(onlineStr);
132 });
133 socket.on('outlineUser',
function (outline) {
134 var outlineStr = ''
;
135 for (
var i = 0; i < outline.length; i++
) {
136 var item =
outline[i];
137 outlineStr += '
' + item.name + '[Outline]'
;
138 }
139 $("#AllOutline"
).empty();
140 $("#AllOutline"
).append(outlineStr);
141 });
142 socket.on('allUser',
function (doc) {
143 $('#allcount'
).html(doc.length);
144 });
145 socket.on('disconnect',
function (name, msg) {
146 var leftInfo = ""
;
147 leftInfo = '
' + msg + ''
;
148 $(leftInfo).appendTo($("#messages")).animate({ "opacity": 0.3 }, 2000,
function () {
149 $(
this).animate({ "opacity": 1 }, 1500,
function () {
150 $(
this).animate({ "opacity": 0.3 }, 1000
);
151 });
152 return this;
153 });
154 scroll();
155 });
156
157 /*当前房间人员信息*/
158 var Lastr, r1, r2, r3;
159 socket.on('SquareRoom',
function (roomInfo) {
160 r1 =
roomInfo;
161 UpdateRoom();
162 });
163 socket.on('QinRoom',
function (roomInfo) {
164 r2 =
roomInfo;
165 UpdateRoom();
166 });
167 socket.on('NarutoRoom',
function (roomInfo) {
168 r3 =
roomInfo;
169 UpdateRoom();
170 });
171 function UpdateRoom() {
172 var $Nowroom = $("#headmessages strong").html(), roomCount, roomStr = ''
;
173 switch ($Nowroom) {
174 case "Square": Lastr = r1;
break;
175 case "The Legend of Qin": Lastr = r2;
break;
176 case "Naruto": Lastr = r3;
break;
177 default: Lastr =
r1;
178 }
179 roomCount =
Lastr.length;
180 for (
var i = 0; i < roomCount; i++
) {
181 var item =
Lastr[i];
182 roomStr += '
' + item.name + '[Online]'
;
183 }
184 $("#roomCount"
).html(roomCount);
185 $("#Roommembers ul"
).empty();
186 $("#Roommembers ul"
).append(roomStr);
187 }
188 /*
189 *切换/退出账号
190 */
191 $("#changeUser").on('click',
function () {
192 var res = confirm("Are you sure you want to quit and switch to another account??"
);
193 if (res) {
194 UL();
195 }
else {
196 $("#control"
).hide();
197 $("#setContent"
).hide();
198 $("#stateSelect"
).hide();
199 }
200 });
201 $("#layout").on('click'
, UL);
202 function UL() {
203 if (document.cookie) {
204 $('#loginDiv').addClass('hidden'
);
205 $('#main').removeClass('hidden'
);
206 var uname = getCookie("userInfo"
);
207 CookieObj = JSON.parse(uname.substr(2
));
208 $.ajax({
209 url: '/layout'
,
210 type: 'POST'
,
211 dataType: 'json'
,
212 data: {
213 name: CookieObj.name
214 }
215 })
216 .done(
function (data, textStatus, jqXHR) {
217 if (data.value === 'Y'
) {
218 clearCookie();
219 window.location.reload();
220 }
221 });
222 };
223 }
224
225 $('#signinForm #loginBtn'
).click(onLogin);
226 $('#signupForm #signupBtn'
).click(onSignup);
227 $('#chatMsgForm #send'
).click(onMsgSubmit);
228
229 $("#clear").on("click",
function () {
230 $('#messages'
).empty();
231 });
232
233 /*
234 *监听滚动条事件
235 */
236 $('#messages').get(0).onscroll =
function () {
237 $("#messages .Liright").css("margin-right", 1
);
238 }
239
240 /*
241 *屏蔽回车键
242 */
243 $(document).keydown(
function (event) {
244 switch (event.keyCode) {
245 case 13:
return false;
246 }
247 });
248 /*
249 *用户信息
250 */
251 $(".headImg").eq(0).on('click',
function (e) {
252 e.stopPropagation();
253 if ($("#control").get(0).style.display == "none"
) {
254 $("#control"
).show();
255 }
else {
256 $("#control"
).hide();
257 $("#setContent"
).hide();
258 $("#stateSelect"
).hide();
259 }
260 });
261
262 /*更改资料*/
263 $("#set").on("click",
function () {
264 $("#setContent"
).show();
265 $("#stateSelect"
).hide();
266 });
267 /*构造头像选择内容*/
268 var imgStr = ''
;
269 for (
var i = 1; i <= 18; i++
) {
270 imgStr += '
'
;
271 if (i % 6 == 0
) {
272 imgStr += "
"
;
273 }
274 }
275 $("#setThree #imgContent ul").eq(0
).append(imgStr);
276 $("#setThree #imgContent li img").on("click",
function (e) {
277 e.stopPropagation();
278 var $index = $(
this).attr("data-in"
);
279 $("#setThree #imgContent img").removeClass("imgSelected"
);
280 $("#setThree #imgContent img").eq(($index - 1)).addClass("imgSelected"
);
281 });
282 /*人物头像模态框*/
283 $("#setThree"
).dialog({
284 autoOpen:
false,
285 title: "Changing Avatar"
,
286 modal:
true,
287 width: 578
,
288 resizable:
false,
289 buttons: {
290 "Ok":
function () {
291 var selectedImg = $(".imgSelected").attr("data-in"
);
292 // alert(selectedImg);
293 $.ajax({
294 url: "/updateImg"
,
295 type: "POST"
,
296 data: {
297 name: $('#control div span').eq(0
).html(),
298 imgIndex: selectedImg
299 }
300 }).done(
function (data) {
301 if (data.value === 'Y'
) {
302 $("#setThree").dialog("close"
);
303 $('.headImg').eq(0).attr('src', '/img/' + selectedImg + '.jpg'
);
304 $('#setContent'
).hide();
305 $('#control'
).hide();
306 // alert(data.msg);
307 }
308 });
309 ;
310 }
311 }
312 });
313 /*个性签名模态框*/
314 $("#setTwo"
).dialog({
315 autoOpen:
false,
316 title: "Personalized signature setting"
,
317 modal:
true,
318 resizable:
false,
319 buttons: {
320 "OK":
function () {
321 var $newSign = $("#setTwo input[type='text']").eq(0
).val();
322 if ($newSign != ''
) {
323 $.ajax({
324 url: '/updateSign'
,
325 type: 'POST'
,
326 data: {
327 name: $('#control div span').eq(0
).html(),
328 newSign: $newSign
329 }
330 }).done(
function (data) {
331 if (data.value === 'Y'
) {
332 $("#setTwo p").eq(0
).html(data.msg);
333 setTimeout(
function () {
334 $('#control div em').eq(0
).html($newSign);
335 $("#setTwo").dialog('close'
);
336 $("#setTwo p").eq(0).html(''
);
337 }, 1000
);
338 }
339 });
340 }
341 },
342 "Cancel":
function () {
343 $(
this).dialog('close'
);
344 }
345 }
346 });
347 /*密码模态框*/
348 $("#setOne"
).dialog({
349 autoOpen:
false,
350 title: "Changeing User password"
,
351 modal:
true,
352 resizable:
false,
353 buttons: {
354 "Ok":
function () {
355 var $oldpass = $("#setOne #oldpass").val(), $newpass = $("#setOne #newpass"
).val();
356 if ($oldpass != '' && $newpass != ''
) {
357 $.ajax({
358 url: '/changepass'
,
359 type: 'POST'
,
360 data: {
361 name: $('#control div span').eq(0
).html(),
362 oldpass: $oldpass,
363 newpass: $newpass
364 }
365 }).done(
function (data, textStatus, jqXHR) {
366 if (data.value === 'Y'
) {
367 $("#setOne p").eq(0
).html(data.msg);
368 setTimeout(
function () {
369 clearCookie();
370 $("#setOne p").eq(0).html(''
);
371 window.location.reload();
372 }, 1000
);
373 }
else if (data.value === 'N'
) {
374 $("#setOne p").eq(0
).html(data.msg);
375 $("#setOne #oldpass").val(''
);
376 $("#setOne #newpass").val(''
);
377 }
378 });
379 }
380 },
381 "Cancel":
function () {
382 $(
this).dialog('close'
);
383 }
384 }
385 });
386 $("#setContent li").eq(0).click(
function (e) {
387 e.stopPropagation();
388 $("#setOne").dialog("open"
);
389 });
390 $("#setContent li").eq(1).click(
function (e) {
391 e.stopPropagation();
392 $("#setTwo").dialog("open"
);
393 });
394 $("#setContent li").eq(2).click(
function (e) {
395 e.stopPropagation();
396 $("#setThree").dialog("open"
);
397 });
398
399 /*
400 *成员信息面板控制:包括所有成员和具体房间成员的状态
401 */
402 $("#rightSide #Roommembers ul"
).hide();
403 $("#Allmembers div").css({ 'backgroundColor': "rgb(70,130,180)", "color": "white"
});
404 $("#Allmembers div i").addClass("glyphicon glyphicon-triangle-bottom"
);
405 $("#Roommembers div i").addClass("glyphicon glyphicon-triangle-right"
);
406 $("#rightSide div >div").click(
function (e) {
407 var $title = $(
this), $anotherTitle = $(
this).parent().siblings("div"
);
408 if ($title.next('ul').is(":visible"
)) {
409 $title.siblings('ul'
).hide();
410 $title.children("i").removeClass("glyphicon glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-right"
);
411 $title.css({ 'backgroundColor': "", "color": ""
});
412 }
else {
413 $anotherTitle.children('ul'
).hide();
414 $anotherTitle.children('div').css({ 'backgroundColor': "", "color": ""
});
415 $anotherTitle.children("div").children("i").removeClass("glyphicon glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-right"
);
416 $title.css({ 'backgroundColor': "rgb(70,130,180)", "color": "white"
});
417 $title.siblings('ul').slideToggle(500
).show();
418 $title.children("i").removeClass("glyphicon glyphicon-triangle-right").addClass("glyphicon glyphicon-triangle-bottom"
);
419 }
420 });
421
422 /*函数集*/
423
424 /*
425 *保证scroll始终在最底端
426 */
427 function scroll() {
428 $('#messages,#oldMsg ul'
).animate({
429 scrollTop: 999999999
430 }, 0
);
431 }
432
433 /*
434 *删除cookie
435 */
436 function clearCookie() {
437 var keys = document.cookie.match(/[^=;]+(?=\=)/
g);
438 if (keys) {
439 var i =
keys.length;
440 while (i--
) {
441 document.cookie = keys[i] + '=0;expires=' +
new Date(0
).toUTCString();
442 }
443 }
444 }
445
446 /*
447 *获取cookie
448 */
449 function getCookie(sname) {
450 var aCoookie = document.cookie.split(";"
);
451 for (
var i = 0; i < aCoookie.length; i++
) {
452 var aCrumb = aCoookie[i].split("="
);
453 if (sname == aCrumb[0
])
454 return decodeURIComponent(aCrumb[1
]);
455 }
456 return null;
457 }
458
459 /*
460 *界面render
461 */
462 function render() {
463 if (document.cookie) {
464 $('.container').addClass('hidden'
);
465 $('#main').removeClass('hidden'
);
466 var uname = getCookie("userInfo"
);
467 CookieObj = JSON.parse(uname.substr(2
));
468 socket.emit('join', $("#headmessages strong"
).html(), CookieObj.name);
469 $('.headImg').eq(0).attr('src'
, CookieObj.h_imgPath);
470 $('#control div span').eq(0
).html(CookieObj.name);
471 $('#control div em').eq(0
).html(CookieObj.personalizedSign);
472 };
473 }
474 $('.emotion'
).qqFace({
475 id: 'facebox'
,
476 assign: 'msg'
,
477 path: 'img/'
//表情存放的路径
478 });
479 function replace_em(str) {
480 str = str.replace(/\);
481 str = str.replace(/\>/g, '>'
);
482 str = str.replace(/\n/g, '
'
);
483 str = str.replace(/\[em_([0-9]*)\]/g, '
'
);
484 return str;
485 }
486 /*查询聊天记录*/
487 $("#chatRecord").on('click',
function () {
488 $.ajax({
489 url: "/queryChatMsg"
,
490 type: "POST"
,
491 data: {
492 roomName: $("#headmessages strong"
).html()
493 }
494 }).done(
function (data) {
495 var Msg =
data.msg;
496 var msgStr = ''
,
497 $name = $('#control div span').eq(0
).html();
498 for (
var i = 0; i < Msg.length; i++
) {
499 var item =
Msg[i];
500 if (item.name ==
$name) {
501 msgStr += '
' + item.name + ' ' + item.saytime + '
' + item.msg + ''
;
502 }
else {
503 msgStr += '
' + item.name + ' ' + item.saytime + '
' + item.msg + ''
;
504 }
505 }
506 $("#oldMsg ul"
).empty();
507 $("#oldMsg ul").css({ "background-img": 'url("/img/loading.gif")'
});
508 $("#rightSide"
).hide();
509 $("#oldMsg"
).show();
510 setTimeout(
function () {
511 $("#oldMsg ul"
).append(msgStr);
512 scroll();
513 }, 2000
);
514 });
515 });
516
517 /*关闭历史记录窗口*/
518 $("#oldMsgHead i").on('click',
function () {
519 $("#oldMsg ul"
).empty();
520 $("#oldMsg"
).hide();
521 $("#rightSide"
).show();
522 });
523 /*清空聊天历史消息*/
524 $("#clearoldMsg i").on('click',
function () {
525 var result = confirm("This action will delete the chat record on the database. Do you want to continue?"
);
526 if (result) {
527 $.ajax({
528 url: '/deleteMsg'
,
529 type: 'POST'
,
530 data: {
531 roomName: $("#headmessages strong"
).html()
532 }
533 }).done(
function (data) {
534 if (data.value === 'Y'
) {
535 alert(data.msg);
536 $("#oldMsg ul"
).empty();
537 $("#oldMsg"
).hide();
538 $("#rightSide"
).show();
539 }
540 });
541 }
542 });
543 //多行文本输入框自动聚焦
544 $("#msg"
).focus();
545 //获取当前城市以及城市天气
546 function findWeather() {
547 var cityUrl = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'
;
548 $.getScript(cityUrl,
function (script, textStatus, jqXHR) {
549 var citytq = remote_ip_info.city;
// 获取城市
550 var url = "http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&city=" + citytq + "&day=0&dfc=3"
;
551 $.ajax({
552 url: url,
553 dataType: "script"
,
554 scriptCharset: "gbk"
,
555 success:
function (data) {
556 var _w = window.SWther.w[citytq][0
];
557 var _f = _w.f1 + "_0.png"
;
558 if (
new Date().getHours() > 17
) {
559 _f = _w.f2 + "_1.png"
;
560 }
561 var img = "
![](http://i2.sinaimg.cn/dy/main/weather/weatherplugin/wthIco/20_20/" +<span style="color:#000000;"> _f
</span><span style="color:#008080;">562</span> + ")
"
;
563 // var tq = citytq + " " + img + " " + _w.s1 + " " + _w.t1 + "℃～" + _w.t2 + "℃ " + _w.d1 + _w.p1 + "级";
564 var tq = img + _w.s1 + ' ' + citytq + "
" + _w.t2 + "℃～" + (_w.t1 || 25) + "℃ " + ""
;
565 $('#weather'
).html(tq);
566 }
567 });
568 });
569 }
570
571 findWeather();
572 });
