-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
193 lines (164 loc) · 6.96 KB
/
index.html
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet"
href="style.css">
<title> NodeJS Socket.io Example </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card chat-box"
style="display: none;">
<div class="card-content">
<span class="card-title">Conversations</span>
<ul class="convo"></ul>
</div>
<div class="card-action">
<div class="row">
<div class="input-field col s9">
<i class="material-icons prefix">mode_edit</i>
<textarea id="chat_msg"
class="materialize-textarea"></textarea>
<label for="chat_msg">Write your message...</label>
</div>
<div class="input-field col s3">
<button class="btn waves-effect waves-light btn-send btn-block"
name="action">Send
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
<div class="card overlay intro">
<div class="card-content">
<div class="row">
<div class="col s12">
<h1 class="purple-text text-darken-3 center-align">Hi there</h1>
<h3>What do I call you?</h3>
</div>
</div>
<div class="row">
<div class="input-field col s9">
<i class="material-icons prefix">mode_edit</i>
<input placeholder="Placeholder"
id="user_name"
type="text"
class="validate">
<label for="user_name">Call me...</label>
</div>
<div class="input-field col s3">
<button class="btn waves-effect waves-light btn-intro btn-block"
name="action">Go
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="node_modules/socket.io-client/dist/socket.io.js"></script>
<script>
/**
Spec:
- user sees input-box to type name
- user types in his/her name and clicks a button
- socket.io client is initialized afterward
- user sees chat-box where s/he can type message
- user clicks 'send' button after typing message
- socket.io client emits the message
- and socket.io server broadcasts the message to connected users
*/
// @user is the user browsing index.html (you)
// @socket is the instance of Socket.io client
let user, socket;
// the user is asked to type his/her name and press Go!
$('.btn-intro').click(() => {
const userInp = $('#user_name').val();
if (!userInp || userInp.trim() == '') {
showMessage(`Don't you have a name, bruh?`);
return;
}
user = userInp;
displayCard();
});
// user types in the message and clicks Send
$('.btn-send').click(() => {
const msg = $('#chat_msg').val();
if (!msg || msg.trim() == '') {
showMessage(`Nah, you must type something and then retry sending...`);
return;
}
const obj = {
sender: user,
text: msg,
time: new Date()
};
// this is how we emit (send) message to socket.io server
socket.emit('chat message', obj);
$('#chat_msg').val('');
});
// nothing important,
// just to get rid of repetitive code
// and for the sake of not making the code look ugly
function showMessage(msg) {
M.toast({
displayLength: 4500,
html: msg
});
}
// hides user-name input
// and shows chat-box
function displayCard() {
$('.chat-box').show();
$('.intro').hide();
initializeSocketConnection();
}
// this is client-side socket.io initialization
// initialize only after we have a user name
// @url is the server url
// @path is the path that is defined in server-side
function initializeSocketConnection() {
const url = 'http://localhost:3000';
socket = io(url, {
path: '/ChatHub',
query: { user } // socket.handshake.query on the server-side to get this value
});
// whenever there is a new chat message
// whether it's sent by you or other people connected to the ChatHub
socket.on('chat message', msg => {
// it's you when the msg.sender returns you :/ duh
const className = msg.sender == user ? 'm-self' : 'm-other';
const html = `<li class="${className}">
<h6>
${msg.sender} -
<span>
${new Date(msg.time).toLocaleString()}
<span>
</h6>
<h5>${msg.text}</h5>
</li>`;
$('.convo').append(html);
});
// whenever a new user joins the ChatRoom
// simulation: open this index.html in a different tab/browser
socket.on('new user', user => {
showMessage(`User ${user.user} joined the ChatRoom`);
});
}
</script>
</body>
</html>