1

[Link],440 --> [Link],090

2
[Link],120 --> [Link],470
your server to allow for incoming web socket connections.

3
[Link],470 --> [Link],630
This means the server will be able to accept connections and will be setting up the
client to make the

4
[Link],630 --> [Link],550
connection then we'll have a persistent connection and we can send data back and
forth whether it's

5
[Link],550 --> [Link],730
data from the server to the client or data from the client to the server because
that is the beauty

6
[Link],730 --> [Link],930
of web sockets.

7
[Link],930 --> [Link],720
You can send data in either direction.

8
[Link],750 --> [Link],870
Now in order to set up the web sockets we're going to be using a library called
socket I O.

9
[Link],060 --> [Link],040
Just like Express makes it really easy to set up an HTP server socket I O makes it
dead simple to set

10
[Link],040 --> [Link],350
up a server that supports web sockets and to create a front end that communicates
with the server socket

11
[Link],350 --> [Link],810
Io has a back and front end library.

12
[Link],830 --> [Link],590
We're going to be using both to set up Web sockets to get started over inside of
the terminal.

13
[Link],590 --> [Link],000
Let's go ahead and install the most recent version of socket IO using NPM I the
module name is socket

14
[Link],190 --> [Link],390
dot I O.

15
[Link],500 --> [Link],920
And the most recent version.

16
[Link],940 --> [Link],310
At one point four point eight we'll be using the same dev flag to update the
package Chaisson file.

17
[Link],380 --> [Link],210
Once this is in place we can go ahead and make a few changes to our server file.

18
[Link],210 --> [Link],570
First up we're going to go ahead and load in the library.

19
[Link],750 --> [Link],190
I'm going to make a constant called socket.

20
[Link],200 --> [Link],130
And I'm going to set an equal to the require statement for the socket I O library
with this in place.

21
[Link],190 --> [Link],420
We now need to integrate socket o into our existing web server.

22
[Link],420 --> [Link],220
Currently we use Express to make our web server.

23
[Link],290 --> [Link],560
We create a new Express app we configure our middleware and we call app.

24
[Link],590 --> [Link],360
Listen now behind the scenes Express is actually using a built in node module
called HTP to create this

25
[Link],360 --> [Link],130
server.

26
[Link],170 --> [Link],070
We're going to need to use HTP ourselves configure express to work with HTP then
and only then will

27
[Link],070 --> [Link],220
we also be able to add a socket I O support.

28
[Link],250 --> [Link],270
Now if that sounded like a mouthful I promise it's actually going to be pretty
easy.

29
[Link],270 --> [Link],480
We only have to change a few lines to get things to work.

30
[Link],690 --> [Link],580
First up we're going to load in this module it's called HTP.

31
[Link],620 --> [Link],210
So let's make a constant called HTP.

32
[Link],260 --> [Link],540
It's a built in node module so there's no need to install it.

33
[Link],560 --> [Link],730
We can simply require HTP just like this from here.

34
[Link],720 --> [Link],480
We're going to go ahead and create a server using this HTP library just below our
app variable.

35
[Link],560 --> [Link],260
Let's make a variable called server.

36
[Link],350 --> [Link],710
And what we're going to do is call HTP dot create server.

37
[Link],720 --> [Link],160
Now you might not know it but you're actually already using the Create server
method behind the scenes

38
[Link],460 --> [Link],070
when you call app dot listen on your express app.

39
[Link],100 --> [Link],080
It literally calls this exact same method passing in the app as the argument for
create server create

40
[Link],080 --> [Link],450
server takes a function.
41
[Link],450 --> [Link],460
This function looks really similar to one of our express callbacks.

42
[Link],510 --> [Link],530
It gets called with a request and a response.

43
[Link],530 --> [Link],560
Now as I mentioned HTP is actually used behind the scenes for Express they're
integrated so much so

44
[Link],560 --> [Link],450
that you can actually provide the app as the argument.

45
[Link],490 --> [Link],610
And we are done now before we integrate socket I'll just go ahead and wrap up this
change.

46
[Link],610 --> [Link],040
We're now using the HTP server as opposed to the Express server.

47
[Link],080 --> [Link],670
So instead of calling app listen we're going to call server listen once again.

48
[Link],680 --> [Link],860
There's no need to change the arguments passed in here.

49
[Link],870 --> [Link],170
They're exactly the same they're built really closely to each other.

50
[Link],170 --> [Link],110
So the server listen arguments are the same as the Express app lesson method
arguments.

51
[Link],200 --> [Link],890
Now that we have this in place we haven't actually changed any app functionality.

52
[Link],890 --> [Link],060
Our server is still going to work on port three thousand but we're still not going
to have access to

53
[Link],060 --> [Link],640
socket.

54
[Link],750 --> [Link],730
So over in the terminal I can prove this by clearing the terminal output and
starting up our server

55
[Link],790 --> [Link],660
using gnomon gnomon server forward slash server.

56
[Link],850 --> [Link],650
J.S. and I'm just going to load localhost 3000 in the browser and see what I get
back right here.

57
[Link],710 --> [Link],410
What do we get.

58
[Link],460 --> [Link],720
We get our HTL.

59
[Link],750 --> [Link],370
Welcome to the chat app shows up.

60
[Link],390 --> [Link],280
This means that our app is still working even though we're now using the HTP
server.

61
[Link],310 --> [Link],080
The next thing that we're going to do is configure the server to also use socket I
O.

62
[Link],170 --> [Link],060
That's the entire reason we made this change on the next line.

63
[Link],130 --> [Link],350
We're going to make a variable called I O we'll talk about that in just a second.

64
[Link],390 --> [Link],200
We're going to set it equal to a call to socket I O.

65
[Link],320 --> [Link],810
And we're going to pass in the server that we want to use with our web sockets.

66
[Link],960 --> [Link],170
Right.

67
[Link],180 --> [Link],070
Here we have access to that server via the server variable so we'll pass that in as
the first and only

68
[Link],070 --> [Link],830
argument.

69
[Link],850 --> [Link],660
Now when we get back is our web sockets server on here we can do anything we want
in terms of emitting

70
[Link],810 --> [Link],460
or listening to events.

71
[Link],520 --> [Link],840
This is how we're going to communicate between the server and the client and we'll
talk more about that

72
[Link],840 --> [Link],230
in just a second.

73
[Link],310 --> [Link],500
With this in place our server is ready to go.

74
[Link],500 --> [Link],440
We are ready to accept new connections.

75
[Link],440 --> [Link],850
The problem is we don't have any connections to accept when we load our Web page
we're not doing anything.

76
[Link],870 --> [Link],700
We're not actually connecting to the server and we are going to need to manually
run some javascript

77
[Link],700 --> [Link],040
code to initiate that connection process.

78
[Link],060 --> [Link],720
Now when we integrated socket I O with our server we actually got access to a few
cool things.

79
[Link],730 --> [Link],580
First up we got access to a route that accepts incoming connections which means
that we can now accept

80
[Link],640 --> [Link],970
web socket connections and we got access to a javascript library that makes it
really easy to work with

81
[Link],970 --> [Link],460
socket I O on the client.

82
[Link],460 --> [Link],920
This library is available at the following path forward slash socket I O board
slash socket dot I O

83
[Link],040 --> [Link],930
dot J.

84
[Link],940 --> [Link],030
S If you load this javascript file on the browser you can see it's just a really
long javascript library.

85
[Link],030 --> [Link],730
This contains all of the code we're going to need on the client to make the
connection and to transfer

86
[Link],730 --> [Link],500
data whether it's server at a client or client to server.

87
[Link],690 --> [Link],480
But we're going to do in order to make the connection from our HTL file is load
this in I'm going to

88
[Link],480 --> [Link],250
go back to localhost 3000 and now we can go ahead and move into Adam opening up
index.

89
[Link],300 --> [Link],090
H DML and down near the bottom of the body tag we're going to add a script tag
loading in the file we

90
[Link],090 --> [Link],650
just pulled up in the browser.

91
[Link],830 --> [Link],480
First up will make the script tag itself.

92
[Link],250 --> [Link],980
Opening and closing it.

93
[Link],290 --> [Link],140
And in order to load in an external file We're going to use the source attribute
providing the path.

94
[Link],230 --> [Link],590
Now this path is relative to our server.

95
[Link],660 --> [Link],780
It's going to be a forward slash socket I go forward slash socket Dom IO.

96
[Link],800 --> [Link],490
J Yes exactly as we typed in the browser just moments ago by adding the script tag
we're now loading

97
[Link],490 --> [Link],160
in the library and on the browser we have access to all sorts of methods available
because of the socket

98
[Link],160 --> [Link],980
library one of those methods is going to let us initiate a connection request and
that's exactly what

99
[Link],980 --> [Link],780
we're going to do down below.

100
[Link],840 --> [Link],610
Let's add a second script to tag this time instead of loading an external script.

101
[Link],640 --> [Link],470
We're going to write some javascript right in line right in here we can add any
javascript and this

102
[Link],470 --> [Link],080
javascript is going to run right after the socket IO library loads a little bit
later on we'll be breaking

103
[Link],080 --> [Link],180
this out into its own file but for the moment we can simply have our javascript
code right inside of

104
[Link],180 --> [Link],470
our h tim l file right here but we're going to do is call I O I O is a method
available to us because

105
[Link],470 --> [Link],980
we loaded in this library.

106
[Link],060 --> [Link],710
It's not native to the browser.

107
[Link],770 --> [Link],590
And when we call it we're actually initiating the request we're making a request
from the client to

108
[Link],590 --> [Link],480
the server to open up a web socket and keep that connection open.

109
[Link],480 --> [Link],030
Now what we get back from Iowa is really important.

110
[Link],030 --> [Link],900
We're going to want to save that in a variable called socket just like this.

111
[Link],900 --> [Link],600
This creates our connection and it stores the socket in a variable and this
variable is critical to

112
[Link],600 --> [Link],560
communicating.

113
[Link],600 --> [Link],510
It's exactly what we need in order to listen for data from the server.

114
[Link],580 --> [Link],030
And in order to send data to the server now that we have this in place let's go
ahead and save our TNL

115
[Link],030 --> [Link],650
file.

116
[Link],720 --> [Link],030
We're going to move into the browser and we're going to open up the chrome
developer tools.

117
[Link],250 --> [Link],070
Now regardless of what browser you use whether it's IEEE Safari Firefox or chrome
you're going to have

118
[Link],100 --> [Link],290
access to a set of developer tools which makes it really easy to debug and see
what's going on behind

119
[Link],290 --> [Link],000
the scenes in your web page.

120
[Link],030 --> [Link],620
We're going to be using the chrome developer tools here to do a little debugging.

121
[Link],720 --> [Link],680
I'd highly recommend using Chrome for these videos just so you can follow along
exactly.

122
[Link],850 --> [Link],990
To open up the developer tools we go to settings more tools developer tools.

123
[Link],990 --> [Link],720
You can also use the keyboard shortcut as shown here for your operating system.

124
[Link],820 --> [Link],760
When you open developer tools you're going to be greeted with an overwhelming set
of options you're

125
[Link],770 --> [Link],930
most likely brought to the elements panel if you've never used the developer tools
before the panel

126
[Link],930 --> [Link],010
we're going to be using right now is the network panel.

127
[Link],170 --> [Link],390
The network panel keeps track of all of the requests made by your web page.

128
[Link],400 --> [Link],020
So if I make a request for a javascript file I'm going to see that in a nice list
here.

129
[Link],110 --> [Link],420
We're going to have to refresh the page in order to see the list of network
requests.

130
[Link],490 --> [Link],340
And right here we have six the network request at the very top is the first one
that was made and the

131
[Link],340 --> [Link],880
one at the very bottom is the last one that was made.

132
[Link],010 --> [Link],590
The first one was for the page you see here it's for the H T and L file that loads
Welcome to the chat

133
[Link],650 --> [Link],270
app.

134
[Link],280 --> [Link],990
The second one is for that javascript file that we saw in the browser.

135
[Link],000 --> [Link],400
This gives us the library and gives us access to calling that I O method which
starts the connection

136
[Link],400 --> [Link],080
process the next four are all related to starting up and maintaining that
connection with this in place.

137
[Link],120 --> [Link],400
We now have that live connection between the client and the server and we can start
communicating whatever

138
[Link],400 --> [Link],810
we want to communicate.

139
[Link],810 --> [Link],150
Now this communication could be anything at all.

140
[Link],180 --> [Link],480
This comes in the form of an event.

141
[Link],580 --> [Link],400
Events can be emitted from either the client or the server and either the client or
the server can listen

142
[Link],430 --> [Link],750
for events.

143
[Link],750 --> [Link],460
Let's talk about an event that might happen in an e-mail app in an email app.

144
[Link],470 --> [Link],840
For example the server might emit an event called new e-mail when a new e-mail
comes in.

145
[Link],840 --> [Link],830
The client is then going to listen for that event when it fires it'll get the new
e-mail data and it

146
[Link],830 --> [Link],750
will render the e-mail to the screen below the other ones.
147
[Link],820 --> [Link],560
The same thing could happen the other way maybe the client wants to create a new e-
mail and send it

148
[Link],560 --> [Link],530
to someone else.

149
[Link],550 --> [Link],490
It's going to ask for the e-mail address of the person and the message it's then
going to emit an event

150
[Link],580 --> [Link],220
on the client that the server is going to listen to.

151
[Link],220 --> [Link],680
So this whole server client relationship is entirely ran via these events.

152
[Link],680 --> [Link],620
Now we're going to be creating custom events for our specific application
throughout this section.

153
[Link],690 --> [Link],950
But for now we're going to look at a couple of different ones that are built in
that let you keep track

154
[Link],950 --> [Link],190
of new users and disconnecting users.

155
[Link],190 --> [Link],920
This means we'll be able to do something like greet a user when they join our
application in order to

156
[Link],920 --> [Link],970
play around with this over inside of Adam inside of server Dom.

157
[Link],000 --> [Link],710
J.S. we are going to call a method on I O.

158
[Link],880 --> [Link],990
I o dot on I O dot on lets you register an event Lessner we can listen for a
specific event and do something

159
[Link],050 --> [Link],010
when that event happens.
160
[Link],090 --> [Link],370
One built in event that we're going to use the most popular one is called
connection.

161
[Link],370 --> [Link],190
This lets you listen for a new connection meaning that a client connected to the
server and it lets

162
[Link],190 --> [Link],780
you do something when that connection comes in in order to do something you provide
a callback function

163
[Link],810 --> [Link],190
as the second argument and this callback function is going to get called with a
socket.

164
[Link],270 --> [Link],010
The socket argument is really similar to the socket argument we have access to over
inside an index.

165
[Link],070 --> [Link],450
HTL this represents the individual socket as opposed to all of the users connected
to the server.

166
[Link],780 --> [Link],170
Now with this in place we can do whatever we like.

167
[Link],180 --> [Link],710
For example I could use council that like to print a little message.

168
[Link],800 --> [Link],070
New user connected every time a user connects to our app we're going to print a
message to the con.

169
[Link],490 --> [Link],140
I'm going to go ahead and save the server japes file move into the terminal and
you're going to see

170
[Link],140 --> [Link],680
that the message actually already exists to explain why we need to understand one
thing about web sockets

171
[Link],010 --> [Link],660
web sockets.

172
[Link],670 --> [Link],670
As I mentioned they are a persistent technology meaning that the client and server
they both keep the

173
[Link],670 --> [Link],190
communication channel open for as long as both of them want to if the server shuts
down the client doesn't

174
[Link],190 --> [Link],120
really have a choice.

175
[Link],180 --> [Link],370
And the same thing for the client and server relationship.

176
[Link],510 --> [Link],270
And I close a browser tab the server cannot force me to keep the connection open.

177
[Link],310 --> [Link],130
Now when a connection drops the client it's still going to try to reconnect when we
restart the server

178
[Link],170 --> [Link],220
using gnomon.

179
[Link],240 --> [Link],490
There's about a quarter of a second of time where the servers down and the client
notices that it says

180
[Link],490 --> [Link],560
well 00 server went down let's try to reconnect and eventually it reconnects.

181
[Link],570 --> [Link],690
And that's why we're seeing the message right here.

182
[Link],690 --> [Link],480
New user connected.

183
[Link],640 --> [Link],390
I'm going to go ahead and shut down the server and over inside of the client.

184
[Link],450 --> [Link],420
You're going to see that network requests are being made right here.

185
[Link],420 --> [Link],280
We're trying to reconnect to the server and you can see they're failing because the
server is not up.
186
[Link],490 --> [Link],920
Now if we go back into the terminal and we restart the server over inside of the
client We're going

187
[Link],920 --> [Link],420
to try to reconnect again.

188
[Link],510 --> [Link],000
We're going to get a successive result from the server and boom we are back just
like that.

189
[Link],090 --> [Link],130
Now when we reconnect you can see that we get the message over here and that's why
we saw it when we

190
[Link],130 --> [Link],060
first added it to the server DHHS file.

191
[Link],060 --> [Link],600
Now the connection of that also exists over in the client.

192
[Link],600 --> [Link],010
That means on the client we can do something when we successfully connect to the
server.

193
[Link],010 --> [Link],350
It might not happen right away.

194
[Link],420 --> [Link],030
It might take a little time over inside of Adam.

195
[Link],120 --> [Link],920
We can add this event inside of index HTL right below our call to.

196
[Link],980 --> [Link],790
Oh right here we're going to call Sacket dot on we want to listen for an event and
this event is a little

197
[Link],790 --> [Link],280
different than the one we have here.

198
[Link],410 --> [Link],900
It's not on connection.

199
[Link],910 --> [Link],940
It's on CONNECT THE on method here is exactly the same as the one we use in server.

200
[Link],000 --> [Link],940
J.S. the first argument is the event name and the second argument.

201
[Link],960 --> [Link],390
That is the callback function.

202
[Link],450 --> [Link],460
In this case we don't get access to a socket argument since we already have it
right here called socket.

203
[Link],630 --> [Link],060
In this case all I'm going to do is use console dialog to print a little message to
the console connected

204
[Link],810 --> [Link],890
to server.

205
[Link],910 --> [Link],610
Awesome.

206
[Link],020 --> [Link],350
Now that we have this in place we can go into the browser and go to a new tab in
the developer tools.

207
[Link],390 --> [Link],870
We're going to load the console tab the console tab is kind of like the terminal
inside of node.

208
[Link],030 --> [Link],250
If we use cancel that log in our client side javascript code those messages are
going to show up here.

209
[Link],250 --> [Link],410
As you can see we also have some errors these errors occurred when our server was
down as I was showing

210
[Link],410 --> [Link],570
you how it reconnects.

211
[Link],760 --> [Link],270
But if we refreshed the page as you're going to see connected to server shows up
right here as soon

212
[Link],270 --> [Link],000
as the connection happens the client and the server they both had that event fired
the client prints

213
[Link],000 --> [Link],410
connected to server and the server prints new user connected with this in place
we've now used the event

214
[Link],470 --> [Link],600
system in socket.

215
[Link],650 --> [Link],110
So we haven't set our own custom events but we have taken advantage of some built
in ones.

216
[Link],130 --> [Link],200
The last thing we're going to talk about in this video is the disconnect event
which lets you do something

217
[Link],200 --> [Link],000
on both the server and the client when the connection drops.

218
[Link],200 --> [Link],900
We're going to add an event listener on the client together and your challenge will
be to do the same

219
[Link],900 --> [Link],290
thing on the server on the client.

220
[Link],290 --> [Link],520
Down below our connect event we can call socket on again to listen to a new event.

221
[Link],610 --> [Link],460
Once again the name of the event here is the name of a built in event.

222
[Link],570 --> [Link],950
So it's only going to work if you type it correctly.

223
[Link],970 --> [Link],130
This one is called Disconnect the disconnect event is going to fire when ever the
connection drops.

224
[Link],200 --> [Link],300
If the server goes down the client is going to be able to do something for now that
something is just

225
[Link],300 --> [Link],180
going to be Lague a message console log unable to connect.

226
[Link],310 --> [Link],870
Actually on cable is the incorrect terminology disconnected.

227
[Link],920 --> [Link],480
From server.

228
[Link],540 --> [Link],460
Much clearer now that we had this message in place.

229
[Link],570 --> [Link],520
We can actually save our index.

230
[Link],650 --> [Link],560
TMF I'll go over to the browser and we can give it a refreshed to load in our new
javascript file.

231
[Link],580 --> [Link],320
I'm going to go ahead and make my browser screen just a little bit smaller so he
can see it in the background

232
[Link],350 --> [Link],690
of the terminal.

233
[Link],730 --> [Link],010
I'm going to go to the terminal.

234
[Link],080 --> [Link],350
I'm going to shut down the connection by shutting down the server.

235
[Link],350 --> [Link],050
And over inside of the browser what do we get.

236
[Link],080 --> [Link],490
We get disconnected from server printing to the screen.

237
[Link],620 --> [Link],900
If I restart my server over inside of the terminal you can see we've automatically
connected and connected

238
[Link],900 --> [Link],020
to server prints to the screen.

239
[Link],180 --> [Link],470
Now the exact same event exists on the server.

240
[Link],480 --> [Link],360
We can listen for a disconnecting client and we can do something when they leave in
order to register

241
[Link],360 --> [Link],060
this event.

242
[Link],110 --> [Link],370
You are going to go into server dot J.S. and inside of our callback you're going to
call socket dot

243
[Link],490 --> [Link],050
on just like we do right here.

244
[Link],100 --> [Link],120
It's the exact same signature.

245
[Link],140 --> [Link],840
The first argument is the event name it's the disconnect event and the callback
function should do something

246
[Link],840 --> [Link],210
simple like print client disconnected.

247
[Link],230 --> [Link],810
Once you have that in place what I want you to do is open up the browser and open
up the terminal then

248
[Link],870 --> [Link],670
close the browser tab and you should see the message print in the server whatever
message you happen

249
[Link],710 --> [Link],760
to type here try to open up another browser tab close that one and make sure you
get the same message.

250
[Link],810 --> [Link],600
This message should print every time one of your browser tabs closes assuming that
browser tab had an

251
[Link],600 --> [Link],620
open connection socket dot on is your challenge.

252
[Link],620 --> [Link],870
Take a moment to knock this out.

253
[Link],880 --> [Link],330
Test it.

254
[Link],330 --> [Link],760
And when you're done click play

255
[Link],630 --> [Link],260
right all you needed to do was copy the exact same signature as we used here
socket.

256
[Link],360 --> [Link],150
On takes two arguments the first one is the name.

257
[Link],440 --> [Link],270
Disconnect is the event name we're trying to listen to.

258
[Link],380 --> [Link],430
And the second argument is the function to run when the event fires.

259
[Link],430 --> [Link],510
This means the function to run when a socket is disconnected.

260
[Link],540 --> [Link],870
In this case all we're going to do is use console dialog to print user was
disconnected just like this

261
[Link],130 --> [Link],230
and we're going to save the file which is automatically going to restart our
application.

262
[Link],450 --> [Link],030
I'm going to switch to the terminal and then to the browser so I can see the
terminal in the background.

263
[Link],110 --> [Link],470
I'm going to open up a new tab.

264
[Link],480 --> [Link],110
So when I close this one the chrome browser doesn't close completely.

265
[Link],140 --> [Link],540
I'm going to close the tab with open connection and right here inside of the
terminal we got user was
266
[Link],600 --> [Link],750
disconnected.

267
[Link],770 --> [Link],320
If I open up a new tab and go to a local host 3000 live right as I do it new user
connected Prince.

268
[Link],400 --> [Link],340
And as soon as I close it bam on the server user it was disconnected prints to the
screen.

269
[Link],340 --> [Link],190
Hopefully you're starting to see why web sockets are so awesome that instant two
way communication makes

270
[Link],220 --> [Link],650
any sort of realtime application effortless to build in the next video.

271
[Link],720 --> [Link],250
We're going to get into the very very interesting stuff you're going to learn how
to emit and listen

272
[Link],250 --> [Link],740
to custom events.

273
[Link],750 --> [Link],020
This means you can send any data you like from the server to the client and vice
versa.

274
[Link],030 --> [Link],580
Let's wrap this one up with a comment.

275
[Link],590 --> [Link],060
I'm going to shut down our server run and get status and I can see we only have
modified files.

276
[Link],080 --> [Link],740
So get commit with the M flag is going to get the job done right here we can add
our message and connect

277
[Link],100 --> [Link],600
and disconnect event handlers.

278
[Link],760 --> [Link],690
Awesome.
279
[Link],690 --> [Link],430
I'm going to make the commit and push it up to get hub.

280
[Link],420 --> [Link],790
There's no need to deploy to Heroku just yet.

281
[Link],790 --> [Link],520
With that in place we are done.

282
[Link],540 --> [Link],070
I'll see you in the next one.