1
00:00:02,370 --> 00:00:03,890
We want to use socket.io

2
00:00:03,940 --> 00:00:07,570
and we have to add it on both the server and the client,

3
00:00:07,570 --> 00:00:14,800
so both on the node app here and on the react app because client server will communicate through web sockets,

4
00:00:15,070 --> 00:00:22,250
so we have to establish that communication channel on both ends, on the frontend react and on the backend,

5
00:00:22,250 --> 00:00:23,700
node.

6
00:00:23,710 --> 00:00:26,370
Now let's start on the backend here

7
00:00:26,530 --> 00:00:32,770
and for that, I'll quit my development server here and I will install this socket.io package with npm

8
00:00:32,780 --> 00:00:41,500
install --save socket.io, let me hit enter here and this will install the package into our node

9
00:00:41,650 --> 00:00:43,160
project.

10
00:00:43,180 --> 00:00:45,220
Now how do we use it?

11
00:00:45,220 --> 00:00:46,960
Well let's go to app.js,

12
00:00:46,970 --> 00:00:54,600
so to the first file that runs when we start our server and there, we should set up our socket.io connections

13
00:00:54,640 --> 00:00:58,130
we want to expose. Just as we set up our routes there

14
00:00:58,150 --> 00:01:02,250
in the end, we forward requests to our routes

15
00:01:02,340 --> 00:01:06,440
and you could of course also do the socket.io set up in a different file but I'll do it here

16
00:01:06,550 --> 00:01:14,230
but just as we set up our routes for the normal http requests, we can also set up our socket.io channels

17
00:01:14,470 --> 00:01:18,410
and keep in mind, socket.io uses a different protocol,

18
00:01:18,510 --> 00:01:24,850
web sockets and therefore web socket requests will not interfere with the normal http requests which

19
00:01:24,850 --> 00:01:27,190
are sent by default by the browser.

20
00:01:27,190 --> 00:01:30,250
So how do we set up socket.io here?

21
00:01:30,250 --> 00:01:37,650
Well once we connect to our database, when we start up our server, there I also want to establish or I

22
00:01:37,660 --> 00:01:40,070
want to set up my socket.io connection.

23
00:01:40,150 --> 00:01:54,500
I'll create a new constant, io and I will require the socket.io package here. This package or the thing

24
00:01:54,500 --> 00:02:04,380
we are exporting here actually exposes a function which requires our created server as an argument.

25
00:02:04,380 --> 00:02:12,440
Now the listen method here does actually return us a new node server, so we can store that in a constant,

26
00:02:12,440 --> 00:02:14,720
this is the node server we spun up,

27
00:02:14,750 --> 00:02:16,220
it's stored here.

28
00:02:16,340 --> 00:02:20,090
We have to pass that to a function returned by require socket.io,

29
00:02:20,360 --> 00:02:26,630
so we add parentheses here to execute that function that is returned by socket.io and we pass the server

30
00:02:26,630 --> 00:02:27,550
to it.

31
00:02:27,680 --> 00:02:30,130
This sets up socket.io

32
00:02:30,200 --> 00:02:34,210
and I mentioned that web sockets build up on http,

33
00:02:34,250 --> 00:02:41,300
now since this server here uses http, we used that http server to establish our web socket connection that

34
00:02:41,300 --> 00:02:44,670
uses that http protocol as a basis you could say.

35
00:02:44,840 --> 00:02:51,800
Now this gives us an io, a socket.io object which does set up all the web socket stuff behind the scenes

36
00:02:51,800 --> 00:02:54,320
for us and which we now can use.

37
00:02:54,440 --> 00:03:01,010
Now we can use it to define a couple of event listeners for example, for example to wait for new connections,

38
00:03:01,040 --> 00:03:03,380
so whenever a new client connects to us.

39
00:03:03,680 --> 00:03:10,520
So then we execute a certain function where we get the client, the so-called socket that did connect as an

40
00:03:10,520 --> 00:03:14,980
argument or the connection as an argument to be precise,

41
00:03:15,050 --> 00:03:19,880
so this is the connection between our server and the client which connected and this function will be

42
00:03:19,880 --> 00:03:22,610
executed for every new client that connects,

43
00:03:22,610 --> 00:03:27,080
so not only one time but as often as required, as many clients as connect.

44
00:03:27,500 --> 00:03:32,320
So here I will print client connected

45
00:03:32,320 --> 00:03:37,810
and right now if I run npm start, we'll never see client connected in the console,

46
00:03:37,810 --> 00:03:42,760
we don't see it here because we established all that on the server side,

47
00:03:42,760 --> 00:03:47,470
we now got a waiting socket connection or port

48
00:03:47,500 --> 00:03:53,710
you could say but we got no client which would connect and that of course is the next step we have to

49
00:03:53,710 --> 00:03:54,230
do.