1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
.row
.col-md-9
.panel.panel-primary
.panel-heading
h3.panel-title(style='font-size:13px;') Chat Message
.panel-body#div_msgbody(style='min-height:590px;max-height:590px;overflow:auto;max-width:750px;')
#div_msg.panel-content(style='word-wrap:break-word;word-break: break-word;')
.panel-footer
#div_footer(style='height:36px;line-height:36px')
.row
.col-md-8(style='color:#3f51b5;font-weight:bold') Chat History:
input#chat_history
.col-md-4.right-align-text
a#link_clear(href='javascript:void(0)') Clear
.row
.col-md-10
input#txt_msg.form-control(type='text' style='height:40px;resize:none' maxlength=200 placeholder='Input message here.')
.col-md-2.right-align-text
button#btn_send.k-button.k-primary(type='button' style='height:40px;width:100%')
span.glyphicon.glyphicon-send
span(style='margin-left:5px') Send
.col-md-3
.panel.panel-primary
.panel-heading
h3.panel-title(style='font-size:13px;') Members
.panel-body.panel-inner-height(style='overflow:auto;')
#div_users.panel-content(style='word-break: break-word;')
.panel-footer
.left-margin-10
span.text-color#total Member Count:0
#chat_historyWindow(style='display:none')
#chat_historyContent.panel-content(style='word-wrap:break-word;word-break: break-word;')
span#notify
block scripts
script(type='text/javascript' src='/javascripts/local/other/chat.js')
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
"dependencies"
: {
"array-splice"
:
"^0.1.1"
,
"body-parser"
:
"~1.8.4"
,
"busboy"
:
"^0.2.12"
,
"cassandra-driver"
:
"^3.0.0"
,
"cookie-parser"
:
"~1.3.3"
,
"debug"
:
"~2.0.0"
,
"express"
:
"~4.9.8"
,
"express-session"
:
"1.12.1"
,
"gridfs-stream"
:
"^1.1.1"
,
"jade"
:
"^1.11.0"
,
"log4js"
:
"^0.6.29"
,
"mongoose"
:
"~4.2.3"
,
"morgan"
:
"^1.6.1"
,
"request"
:
"^2.67.0"
,
"serve-favicon"
:
"~2.1.3"
,
"socket.io"
:
"^1.3.7"
,
"string.prototype.endswith"
:
"^0.2.0"
,
"string.prototype.startswith"
:
"^0.2.0"
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
var
chatUserCount = 0;
var
chatUsers = {};
var
server = app.listen(app.get(
'port'
),
function
() {
debug(
'Express server listening on port '
+ server.address().port);
});
var
io = require(
'socket.io'
)(server);
io.on(
'connection'
,
function
(socket) {
socket.on(
'joinchat'
,
function
(obj) {
console.log(
'a user connected:'
+obj.UserName);
socket.name = obj.UserName;
if
(!chatUsers.hasOwnProperty(obj.UserName)) {
chatUsers[obj.UserName] = obj;
chatUserCount++;
}
io.emit(
'joinchat'
, { chatUsers: chatUsers ,chatUserCount: chatUserCount,joinedUser: obj});
});
socket.on(
'leftchat'
,
function
() {
console.log(
'a user left'
);
if
(chatUsers.hasOwnProperty(socket.name)) {
var
obj = chatUsers[socket.name];
delete
chatUsers[socket.name];
chatUserCount--;
io.emit(
'leftchat'
, { chatUsers: chatUsers, chatUserCount: chatUserCount, leftUser: obj });
}
});
socket.on(
'disconnect'
,
function
() {
if
(chatUsers.hasOwnProperty(socket.name)) {
var
obj = chatUsers[socket.name];
delete
chatUsers[socket.name];
chatUserCount--;
io.emit(
'leftchat'
, { chatUsers: chatUsers, chatUserCount: chatUserCount, leftUser: obj });
}
});
socket.on(
'message'
,
function
(obj) {
io.emit(
'message'
, obj);
});
socket.on(
'error'
,
function
(exception) {
console.log(
'SOCKET ERROR'
);
socket.destroy();
});
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
var
popupNotification = $(
"#notify"
).kendoNotification({
autoHideAfter: 2000,
height: 60,
stacking:
"down"
}).data(
"kendoNotification"
);
var
socket = io();
var
loginUser = sessionStorage.getItem(
"LoginUser"
);
if
(loginUser ==
null
) {
window.location.href =
"/"
;
return
;
}
var
userObj = eval(
"("
+ loginUser +
")"
);
sessionStorage.removeItem(
'chatUser'
);
socket.emit(
"joinchat"
, userObj);
socket.on(
'joinchat'
,
function
(data) {
if
(!sessionStorage.getItem(
'chatUser'
)) {
sessionStorage.setItem(
'chatUser'
, JSON.stringify({
"user"
: [] }));
}
var
usersObj = JSON.parse(sessionStorage.getItem(
'chatUser'
));
if
(usersObj.user.indexOf(data.joinedUser.UserID) == -1) {
usersObj.user.push(data.joinedUser.UserID);
sessionStorage.setItem(
'chatUser'
, JSON.stringify(usersObj));
setchartdetail(data);
if
(data.joinedUser.UserID != userObj.UserID) {
popupNotification.show(
'<span style="color:red">'
+ data.joinedUser.FullName +
' joined in.</span>'
,
'info'
);
}
}
});
socket.on(
'leftchat'
,
function
(data) {
var
usersObj = JSON.parse(sessionStorage.getItem(
'chatUser'
));
var
index = usersObj.user.indexOf(data.leftUser.UserID);
usersObj.user.splice(index, 1);
sessionStorage.setItem(
'chatUser'
, JSON.stringify(usersObj));
setchartdetail(data);
popupNotification.show(
'<span style="color:red">'
+ data.leftUser.FullName +
' left.</span>'
,
'warning'
);
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$(
"#btn_send"
).click(
function
() {
sendmsg();
})
$(
"#txt_msg"
).keydown(
function
(e) {
if
(e.keyCode == 13) {
sendmsg();
}
});
function
sendmsg() {
var
msg = $.trim($(
"#txt_msg"
).val());
if
(msg) {
var
msgObj = { user: userObj, msg: msg };
socket.emit(
"message"
, msgObj);
}
$(
"#txt_msg"
).val(
""
);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
socket.on(
'message'
,
function
(data) {
var
msgObj = data;
var
userAvatar =
'/images/userlogin.png'
;
if
(msgObj.user.UserName == userObj.UserName) {
$(
"#div_msg"
).append(
"<div class='row-margin'>"
+
"<img src='"
+ userAvatar +
"' style='height:40px;width:40px;right:-660px;position:relative'/>"
+
"<span style='right:-530px;position:relative'>"
+ msgObj.user.FullName +
"</span>"
+
"<div class='demo clearfix fr'>"
+
"<span class='triangle'></span>"
+
"<div class='article' style='word'>"
+ msgObj.msg
+
"</div></div></div>"
);
db.transaction(
function
(tx) {
tx.executeSql(
'INSERT INTO ChatRecords(userId,sendUserId,fullname,content) VALUES("'
+ userObj.UserID +
'","'
+ msgObj.user.UserID +
'","'
+ msgObj.user.FullName +
'","'
+ msgObj.msg +
'")'
);
});
}
else
{
$(
"#div_msg"
).append(
"<div class='row-margin'>"
+
"<img src='"
+ userAvatar +
"' style='height:40px;width:40px;position:relative'/>"
+
"<span style='left:10px;position:relative'>"
+ msgObj.user.FullName +
"</span>"
+
"<div class='demo clearfix'>"
+
"<span class='triangle'></span>"
+
"<div class='article'>"
+ msgObj.msg
+
"</div></div></div>"
);
db.transaction(
function
(tx) {
tx.executeSql(
'INSERT INTO ChatRecords(userId,sendUserId,fullname,content) VALUES("'
+ userObj.UserID +
'","'
+ msgObj.user.UserID +
'","'
+ msgObj.user.FullName +
'","'
+ msgObj.msg +
'")'
);
});
}
var
objDiv = document.getElementById(
"div_msgbody"
);
objDiv.scrollTop = objDiv.scrollHeight;
});
|
1
2
3
|
db.transaction(
function
(tx) {
tx.executeSql(
'INSERT INTO ChatRecords(userId,sendUserId,fullname,content) VALUES("'
+ userObj.UserID +
'","'
+ msgObj.user.UserID +
'","'
+ msgObj.user.FullName +
'","'
+ msgObj.msg +
'")'
);
});
|
1
2
3
4
|
var
db = openDatabase(
'ChatHistory'
,
'2.0'
,
'chat records'
, 10 * 1024 * 1024);
db.transaction(
function
(tx) {
tx.executeSql(
'CREATE TABLE IF NOT EXISTS ChatRecords (id INTEGER PRIMARY KEY AUTOINCREMENT,userId TEXT NOT NULL DEFAULT "",sendUserId TEXT NOT NULL DEFAULT "",fullname TEXT NOT NULL DEFAULT "",content TEXT NOT NULL DEFAULT "",indate DATETIME default CURRENT_TIMESTAMP)'
);
});
|