0:00:25
what is going on guys welcome back to
0:00:28
another session or bill breaking fix
0:00:32
yes you guessed it the rule coders
0:00:36
yeah i hope you're all doing very well
0:00:38
and um another session another another
0:00:42
session of fun and excitement and
0:00:45
learning with breaking stuff and then
0:00:50
which is going to be fantastic
0:00:53
all right guys so um i just wanted to
0:00:56
kind of break down a bit
0:01:02
uh actually first of all let's try and
0:01:06
get the acknowledgement of the country
0:01:10
goes i begin today by acknowledging the
0:01:13
traditional custodians of the land on
0:01:16
which we gather today and pay my
0:01:18
respects to the elders past present and
0:01:20
future i extend their respect to
0:01:23
aboriginal and torres strait islander
0:01:28
all right fantastic that is all done
0:01:33
so you might be wondering what are we
0:01:35
going to be doing today
0:01:38
so what we can uh underneath um so
0:01:44
just to give you a bit of a recap
0:01:50
managed to remove the connection id from
0:01:55
dynamodb yes today and
0:02:00
successful which was brilliant
0:02:05
now in terms of the
0:02:07
adwords websocket integration what's
0:02:10
happening is that when the user connects
0:02:15
uh his connection id would get
0:02:20
stored in the in the database
0:02:22
and when it would this disconnect then
0:02:26
the connection id will be removed
0:02:29
so that is where we are all up to at the
0:02:33
so today what we're going to be doing is
0:02:47
websocket and in wiring the websocket in
0:02:52
all right so let's get down to it
0:02:59
where do we want to go
0:03:02
we wanted to go to
0:03:09
um let's share my screen
0:03:12
to be honest i have never done that so i
0:03:14
don't know what's gonna happen but
0:03:17
let's see how we go
0:03:24
so share my screen
0:03:27
i guess first of all we'll have to do a
0:03:29
bit of researching
0:03:31
and then do it in that way
0:04:19
working with websocket
0:04:21
frontend mobile aws um
0:04:26
building voice chat right
0:04:29
yeah this might be it
0:04:32
let's check this one out
0:04:35
because now what we want to do we want
0:04:41
wire the websocket in the front end
0:04:47
it was wrapped around talking don't
0:04:49
don't require pc connection
0:04:51
actually let's play a bit of music
0:05:20
all right i'll change this
0:05:39
hope you guys can hear it now
0:06:02
so now what we want to do is
0:06:32
actually forget the music
0:06:35
that's kind of distracting me a bit
0:06:39
all right um i put this back to my
0:06:54
okay it's away so how we're gonna do
0:06:58
so client we need to call back talking
0:07:03
brief explanation we know the view
0:07:07
right so uh it was good i've gone
0:07:10
through the last one
0:07:12
where i was preparing up here and have
0:07:14
one problem that only that this
0:07:16
showed you how to configure website by
0:07:21
you need to know how to integrate it
0:07:27
you need to know how to
0:07:34
create into your application
0:07:37
aha yeah this wouldn't help you though
0:07:42
no i don't need that one can't bring in
0:07:45
the okay oh so we have this one we don't
0:07:48
need to worry about comforting the back
0:07:51
which we have already done
0:07:54
um allow lambda rolls yeah that's fine
0:07:58
so note yeah this is all done
0:08:03
uh just to keep an eye on the chat as
0:08:10
good to have you right
0:08:14
those three was a bit too too loud um
0:08:18
because i don't know how to
0:08:21
how to measure how
0:08:25
i just basically turned it off
0:08:29
tory him him he must have been
0:08:32
occupied with something really important
0:08:37
um he couldn't make it so
0:08:45
today you're stuck with me
0:08:53
just to give a bit of a brief um
0:08:56
overview of what i'm doing at the moment
0:08:58
um i'm i'm trying to
0:09:00
wire the web socket to the front and now
0:09:05
because i i haven't done this before so
0:09:15
whether i can find a how to do it
0:09:19
um this indication is going to um
0:09:22
let's connect to the verb soccer
0:09:32
view application chat and user
0:09:37
it doesn't really talk about the front
0:09:41
any more messages no
0:09:57
let's actually play some
0:10:10
i mean now if uh this is too loud as
0:10:22
actually i don't really
0:10:30
actually that's fine
0:10:47
so video chat app websocket now
0:10:52
how to use website
0:10:55
connect to clients
0:11:18
applications yeah that is the one
0:11:25
actually i'm already feeling this
0:11:43
creating your website you know it's a
0:11:47
you need to create a website
0:11:49
and this is automatically attempted to
0:11:52
open up into the server
0:11:55
so this just tells
0:12:01
so basically what we need to do in our
0:12:15
connection creating a websocket object
0:12:22
client application
0:12:30
i would probably need
0:12:47
okay yeah so i need
0:13:06
okay so this is the backhand
0:13:19
let's change the music
0:13:24
making me fall asleep to be honest
0:14:26
okay that's the backhand no i don't need
0:14:33
this is how simple application using
0:14:37
we have no computer
0:15:18
so how would this work
0:15:22
i would have to call
0:15:25
so we would have to call it
0:15:30
when the user opens up the board page
0:15:34
only then he will be able to connect
0:15:37
so windows overload
0:16:08
and just kind of working with
0:16:13
and use happening community back service
0:16:22
setting up club can i connect
0:16:25
as a client from uws
0:16:28
can i connect to personal kpi as a
0:16:34
as a client from it to this giveaway
0:16:38
oh wow no one answered it that's pretty
0:16:56
so that would be there
0:17:11
send message from um
0:17:45
in this video we're going to implement
0:17:46
the real-time chat application
0:17:54
on the board and he says join the chat
0:17:59
and so we've got the
0:18:21
message one message how is he getting
0:18:52
connect yeah this is exactly the one we
0:18:55
want connect so here's your okay so he's
0:19:00
so we basically have to add in our own
0:19:10
disconnects in the public
0:19:14
okay so what exactly is he doing
0:19:22
pause the music because i'm gonna
0:19:25
hear a tutorial and then we can take it
0:19:35
will show us the prompts which we'll be
0:19:37
able to enter our public message
0:19:39
once we'll do currently he just calls
0:19:42
the onsen public message callback
0:19:44
and here it asks us for the public
0:19:46
message and once we enter it it logs it
0:19:49
to the console like we see here on the
0:19:52
left we see a list of users once we'll
0:19:54
get the list of users from our socket
0:19:56
we're going to display them here
0:19:58
currently we just have fake information
0:20:07
there's is just updates in real time
0:20:12
once we enter the message
0:20:14
it will call the onsen private message
0:20:17
as you can see here now we have the two
0:20:19
variable which is the recipient of our
0:20:26
also it works in a similar way with the
0:20:28
disconnect button he just calls the
0:20:30
disconnect callback which we it worked
0:20:32
to the console all are
0:20:34
when we're in a disconnected state we
0:20:36
see that our indicator has turned to
0:20:39
and now we have a button to connect when
0:20:42
we click the connect button it will call
0:20:48
are on connect callback which is here
0:20:50
currently it just logs connect to the
0:20:52
console but we're going to change it to
0:20:54
connect to our websocket also it works
0:20:57
in a similar way with the disconnect
0:20:59
button it just calls the disconnect
0:21:00
callback which we have here
0:21:03
when we send a public message it will
0:21:05
show us a prompt in which we'll be able
0:21:07
to enter our public message right so
0:21:10
doing is basically also it works in a
0:21:13
similar way with a disconnect button it
0:21:15
just calls the disconnect callback which
0:21:19
when we send a public message it will
0:21:22
similar to the oxygen
0:21:25
we'll call the x to our socket
0:21:27
once we get the list of users from its
0:21:31
start implementing our client-side code
0:21:34
first let's reset the ui and remove the
0:21:37
now we'll also need to create a variable
0:21:39
that will hold the url of the websocket
0:21:41
which we'll connect to we'll get it by
0:21:43
going to api gateway and copying the
0:21:48
we'll also need to add a variable which
0:21:50
will hold the socket that we're going to
0:21:53
when we create the variable we will set
0:21:56
because we're using react we're going to
0:21:58
use the use ref hook but if you were
0:22:00
writing this in plain javascript that
0:22:01
would be a regular variable that we
0:22:03
currently set to null now when the user
0:22:05
clicks the connect button and the on
0:22:07
connect callback is called let's create
0:22:09
the socket first let's check that the
0:22:11
socket is not already connected we're
0:22:13
going to check if the socket is in a
0:22:15
ready state that is different from open
0:22:17
then we're going to initiate and create
0:22:19
the socket you probably noticed that
0:22:21
we're using socket.current and again
0:22:23
it's just a reacting and if you're using
0:22:25
plain javascript then you would just say
0:22:28
this is how we're going to connect to
0:22:30
the socket we initiate a new websocket
0:22:33
instance and the only argument it
0:22:34
requires is the url of the socket that
0:22:36
we're going to connect to which we took
0:22:38
from api gateway now let's add a few
0:22:41
event listeners for when the socket
0:22:43
connects closes or receives a message
0:22:46
so we added the three event listeners
0:22:48
when the socket is opened we'll call on
0:22:52
when it's closed on socket close and
0:22:54
then when we receive a message from the
0:22:56
socket we will call on socket message so
0:22:58
let's create the three callbacks for
0:23:02
when we receive an event that the socket
0:23:04
was opened we should set his
0:23:06
right so i basically need to
0:23:12
dogs group and initiate it in that way
0:23:17
right uh that's this is going to be fun
0:23:25
right so let's jump into
0:24:03
this is our reaper
0:24:06
so what we're gonna do basically is
0:24:31
actually index page opens
0:24:34
but we're taking you we're importing
0:24:43
the script and the other one
0:24:50
in this index.html
0:24:54
i'm just gonna look for that
0:24:57
ah here we go so script so we can
0:25:04
function on script or still front end
0:25:08
what i'm going to basically do is put in
0:25:09
still front end because this is
0:25:12
all kind of everything is hap
0:25:16
everything there for the
0:25:20
between the front end and the back end
0:25:25
so i'll just put it over here
0:25:47
here function on connect
0:26:03
absolute on connect
0:26:07
i'll be naming this way because it's a
0:26:11
and then we're gonna make a method and
0:26:14
then at the top what i'm gonna do
0:26:40
okay i'll just zoom
0:27:13
so let's go and get that
0:27:30
okay um i would have to get my mfa code
0:27:34
just bear with me i don't have the
0:27:38
on me so i'll just get that one and
0:27:40
we'll come back and get the
0:27:45
straight away then all right i'll be
0:28:12
uh the mfa code of this
0:28:24
cool so this is working fine
0:28:38
actually i'm gonna
0:28:39
delete this one because we don't need
0:28:45
so get this small resources
0:29:03
and then paste it over here because we
0:29:06
want to be connecting to this
0:29:13
okay so this would be here websocket url
0:29:20
how do we connect to this one now
0:29:24
i just want to have a look
0:29:46
function on connect
0:29:49
um so this would basically be
0:30:32
no don't need that
0:30:36
this is just the websocket
0:31:22
okay so public website that one
0:31:31
so that's okay i had the same problem
0:31:35
you can use all this on this client the
0:31:39
to set the option transport to
0:32:15
so i don't get first steps building log
0:32:48
so first of all we need to initialize
0:33:39
the connector is new
0:33:43
all it takes is the url
0:33:53
url in the protocol
0:33:55
what would be the protocol
0:34:03
protocol would probably be
0:34:07
screen it's a stream
0:34:10
let's go to his definition
0:34:14
i don't need this definition
0:34:20
let's check it so pretty cool okay so
0:34:24
that's optional that that's one we won't
0:34:27
pass this one if that's optional
0:34:42
okay and then what we need to do
0:34:46
is connection errors even error as well
0:34:54
first the simple event with the name
0:34:56
arrow is sent to the websocket
0:35:02
so you don't put this simple example to
0:35:05
create new webs okay
0:35:07
connection is to set
0:35:11
connecting to the server and
0:35:16
a custom protocol is named in the
0:35:19
request for example
0:35:23
example wednesday is connecting the
0:35:26
register will open
0:35:28
once the connection is ready to transfer
0:35:35
sending data to the server
0:36:14
using json to transfer every single
0:36:17
message from the cell
0:36:19
okay we are not doing that connecting
0:36:28
yeah possibly we need to
0:36:31
just do this and then
0:36:46
send message no close
0:36:49
probably one on open
0:37:05
function and here's some text at the
0:37:08
service that should be waiting
0:37:14
okay cool so we can send it some text as
0:37:35
websocket does send
0:37:55
okay and what we can do
0:38:07
that would be it's probably
0:38:10
on lower configuration and
0:38:33
all right let's check if this would work
0:38:36
in the first place
0:38:41
oh i need to create
0:38:44
a separate feature branch that's my
0:38:48
i should have done that first
0:39:02
okay get rid of all this
0:39:06
and whoops that's in maine that this is
0:39:12
this is very dangerous
0:39:15
we're not supposed to do in the main
0:39:21
okay get checked out
0:39:24
so we'll get checkout does it
0:39:28
with you check on minus b
0:39:33
creates and switches to
0:39:37
branch which is denoted by minus b so we
0:40:04
of course and now we can make all of our
0:40:36
okay so this is our websocket well
0:40:40
basically we're trying to do here
0:40:43
is we are trying to
0:40:50
connect to the websocket so here
0:40:53
is the function that actually connects
0:40:56
would be called in
0:41:05
all right let's check if this works
0:41:15
cool so that works okay
0:41:24
yeah that should be fine
0:41:32
um to be honest i don't even know if it
0:41:36
but it's rather cry
0:41:38
um what was the command here
0:41:44
actually what i'm gonna do is in
0:41:56
okay so that takes option
0:41:58
so what i'm gonna basically do is
0:42:03
display console.log
0:42:22
what was the server
0:42:32
live server oops that is not the one we
0:42:44
okay because that's not in the right
0:42:47
i need to go to client
0:42:56
okay so did we get our
0:43:00
console roblox open is no function
0:43:06
so it's calling it but it's not
0:43:12
it's not a function why not
0:43:46
that's fine i did the right thing
0:43:48
and connection open
0:44:08
and then it takes into argument
0:44:54
maybe try this and see if this doesn't
0:45:37
is it connecting though
0:46:01
which means what would say
0:46:23
yeah that is right
0:46:26
all of them i can't know where it's
0:47:35
it's okay this okay connect
0:47:42
i want to open this one up and statuses
0:47:49
probably looked into functional
0:48:15
and then reps okay
0:48:44
this is the ready state
0:50:05
roxaki euros that one which is fine
0:50:10
okay cool let's try this
0:50:16
see what this gives us back
0:50:39
oh okay so webshop is not a function
0:50:46
why is he showing me that
0:50:50
that's okay on open
0:52:16
there's no function but
0:52:21
what is you there nothing should exist
0:52:27
it's actually running but i don't know
0:52:32
yeah it does should exist
0:52:40
don't want to be clicking on that no way
0:52:52
server i'm trying to characterize
0:53:26
so when you get on
0:53:37
event is already open hands there's
0:53:45
okay so if we do this
0:54:18
i'm so cute all right let's see there
0:54:22
you go this must have been a problem
0:54:52
not there's not the one
0:54:57
to close by talking about
0:55:00
wanna please don't function and stop
0:55:45
just gives that warm
0:55:57
just put that browsers
0:56:55
right guys um this was
0:56:58
a good progress um we
0:57:01
uh i think we're really close of getting
0:57:04
the um client connected to the websocket
0:57:08
which is fantastic um
0:57:11
yeah if you if you want him uh if you
0:57:15
want to see more of the progress and
0:57:21
where we get um hopefully this function
0:57:26
functionality working all right
0:57:29
until then have a great
0:57:34
or night wherever you are in the world
0:57:36
and we'll see you tomorrow
0:57:42
melbourne eastern um australian eastern
0:57:47
same time same place and the same task
0:57:50
all right have a good night guys cheers
