-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchat.ejs
117 lines (98 loc) · 3.29 KB
/
chat.ejs
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<html>
<head>
<title>Chat with socket.io and nodejs</title>
<style>
#nickWrap {
width: 500px;
}
#contentWrap {
width: 500px;
display: none;
}
#nickError {
color: brown;
}
#messages {
height: 500px;
}
</style>
</head>
<body>
<div id="nickWrap">
<p>Please enter your name</p>
<p id="nickError"></p>
<form id="nickForm">
<input type="text" id="nickName">
<input type="submit" value="Join">
</form>
</div>
<div id="contentWrap">
<div id="chat">
<div id="messages"></div>
<form id="send-message">
<input type="text" id="message">
<input type="submit" value="Send">
</form>
</div>
<div id="users"></div>
</div>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
jQuery(($) => {
var socket = io.connect();
var $contentWrap = $('#contentWrap');
var $nickWrap = $('#nickWrap');
var $messageForm = $('#send-message');
var $messageBox = $('#message');
var $users = $('#users');
var $chat = $('#chat');
var $messages = $('#messages');
var $nickForm = $('#nickForm');
var $nickName = $('#nickName');
var $nickError = $('#nickError');
$messageForm.submit((e) => {
e.preventDefault();
socket.emit('send message', { name: socket.nickname, msg: $messageBox.val() });
$messageBox.val('');
return false;
});
$nickForm.submit((e) => {
e.preventDefault();
socket.emit('new user', $nickName.val(), (data) => {
if (data) {
$contentWrap.show();
$nickWrap.hide();
} else {
$nickError.html('The username already taken! please try another.');
}
});
$nickName.val('');
return false;
})
socket.on('new message', (data) => {
$messages.append("<b>" + data.name + "</b> : " + data.msg + "<hr>");
});
socket.on('old messages', (data) => {
console.log(data);
for (var i = data.length - 1; i >= 0; i--) {
$messages.append("<b>" + data[i].name + "</b> : " + data[i].message + "<hr>");
}
});
socket.on('users', (nicknames) => {
var html = '';
for (var i = 0; i < nicknames.length; i++) {
html += nicknames[i] + "<br>";
}
$users.html(html);
});
socket.on('user join', (nickname) => {
$messages.append("<b>" + nickname + "</b> join the conversation.<hr>");
});
socket.on('user left', (nickname) => {
$messages.append("<b>" + nickname + "</b> has left the conversation.<hr>");
});
});
</script>
</body>
</html>