0:00:25
what is going on everyone welcome back
0:00:27
to another session of buildbreaking fix
0:00:30
brought to you by yours truly yeah rule
0:00:34
that is uh we are doing tori
0:00:38
doing well doing well like yesterday was
0:00:44
long day so i apologize
0:00:47
that i didn't make it
0:00:49
don't worry it happens man
0:00:58
you're okay uh uh uh everything
0:01:03
is okay that's all what that matters
0:01:08
yeah basic basically
0:01:10
i had i had this this project due
0:01:14
and like it took me way longer than i
0:01:18
and then like i had to stay up really
0:01:20
not late the night before and then i
0:01:22
like took a nap in the afternoon and i
0:01:25
set my alarm to get up for
0:01:28
the show like an hour before and i just
0:01:30
like blew through my lungs
0:01:33
and then i woke up and like oh crap it's
0:01:38
um now and but it's a good the
0:01:42
thing that you got some proper rest
0:01:44
because i i know how how it feels
0:01:48
when you've been working on a project
0:01:52
for that that long you're just
0:01:55
you care about nothing but sleep at that
0:01:58
oh man i really needed i was very tired
0:02:02
and then yeah like
0:02:04
i i under mess i underestimated how long
0:02:07
it would take me to do the project
0:02:15
welcome to the devil yeah
0:02:19
all right um so yeah tour is very
0:02:24
awesome and we're gonna play some
0:02:27
acknowledgement of the country so here
0:02:33
i begin today by acknowledging the
0:02:35
traditional custodians of the land on
0:02:37
which we gather today and pay my
0:02:39
respects to the elders past present and
0:02:42
future i extend their respect to
0:02:44
aboriginal and torres strait islander
0:02:51
that was smooth silk
0:02:54
right so a bit for recap what we did
0:02:57
actually tried to do yesterday was um we
0:03:03
try to wire up the front end uh in order
0:03:06
to call webs uh in in order to connect
0:03:09
to websocket um but as you know
0:03:13
brand new learning
0:03:16
learning all right man i really i
0:03:19
finally feel like i can do do something
0:03:25
nah man it's always
0:03:28
good to have you and um and
0:03:30
learn from you and everything so
0:03:33
the best part of this show is that we
0:03:39
let's get down to it
0:03:43
so i think i missed the episode
0:03:47
um where you got the database working
0:03:50
you like got that lambda function
0:03:56
a bit of a really as in
0:03:59
a regular stupid mistake
0:04:05
show you and i think they might make a
0:04:08
lot more sense if i
0:04:11
show you in the code rather than just
0:04:19
it was the template though right it was
0:04:24
so it's always something simple
0:04:28
well those those template files they get
0:04:32
they're so hard to debug i mean i can't
0:04:35
imagine this is even a small project
0:04:39
if you have like a huge stack
0:04:43
that would be there must be pools man
0:04:45
there must be tools
0:04:48
i think the most important tool
0:04:52
there would be when they have that kind
0:04:55
of a big ass and template
0:04:59
ctrl c um no sorry ctrl f or command f
0:05:07
if you know what i mean
0:05:08
no i don't follow you with the macro
0:05:15
all right um so the problem
0:05:31
disconnect lambda permissions
0:05:36
instead of saying it depends on the
0:05:43
i was saying that it depends on itself
0:05:49
does that make sense
0:05:52
instead of saying it depends on the
0:05:54
function we were saying it depends on
0:05:57
itself you mean its own permission
0:06:02
you know how at the moment we have web
0:06:07
lam disconnected lambda permission it
0:06:11
this this connects handler function
0:06:31
i i i put that there man
0:06:36
because i wrote that i wrote that but i
0:06:38
don't know how we missed it
0:06:41
and i read it i read it too
0:06:50
see the most important thing is that we
0:06:54
out i don't uh i mean we shouldn't
0:06:58
really care who who did this part or not
0:07:02
because at the end of the day we're
0:07:04
working on it together so it's let's do
0:07:07
a post post mortem
0:07:12
well i think i think i think in the
0:07:18
silly things like that is just maybe
0:07:20
just using better variable names
0:07:24
that would be the key
0:07:27
because it's everything's the same
0:07:29
except for the ending part which is
0:07:31
permission which i guess is just a
0:07:33
little too easy to overlook by like
0:07:36
three four different people
0:07:39
exactly and i think that was basically
0:07:43
the reason why in the other repo which
0:07:46
was from aws they had short names
0:08:01
forward and make sure we do not do this
0:08:06
long naming conventions anymore
0:08:10
wow yeah i mean if it was like if it was
0:08:12
like i feel like if it was something
0:08:14
else it's so it's so much easier to
0:08:17
debug but since it's in this
0:08:20
yaml it's like this cloud formation
0:08:22
stack then like it's so hard because you
0:08:27
i don't i don't i'm not really sure how
0:08:29
you debug it i'm not experienced enough
0:08:33
all i did so all i did
0:08:37
was you know how we
0:08:40
the lambda function that was working
0:08:47
and then we compared the code
0:08:51
i did exactly this same thing so what i
0:09:02
functions from the other repo
0:09:05
as in in this way and pasted them here
0:09:12
gotcha gotcha and then i realized wow
0:09:18
yeah well good catch man good job nice
0:09:27
the best part is that
0:09:30
you have been there and it's all it's
0:09:34
teamwork isn't not an individual
0:09:43
all right cool so now we need to
0:09:47
okay um i will forget this one
0:09:54
show you it working
0:09:57
uh i believe you we're gonna find out
0:10:07
because the last thing i'll i want to do
0:10:12
realize that this is not working anymore
0:10:19
and guess what i changed my password as
0:10:22
oh you get that password manager working
0:10:29
so are we are we working on um the
0:10:31
enhancement folder now
0:10:34
yes the front-end one okay and i do i
0:10:39
uh you should have permissions um if you
0:10:41
want to have a look but if you don't
0:10:43
have permissions i'll give you them
0:10:46
straight yeah i wonder if i am a
0:10:51
i think you must be
0:10:58
let me know if you're not and um
0:11:01
i'll give you the access
0:11:16
i can't i can't spell i can't spell
0:11:26
that happens that happens
0:11:28
i'm um yeah my my brain was so toast
0:11:33
this is different i don't blame you
0:11:40
it's like just like smoke like black
0:11:43
black black dirty smoke just coming out
0:11:48
oh i know i know that
0:11:54
even when you sleep you're
0:11:58
dreaming about the code
0:12:00
oh man i was so tired i it was like it
0:12:04
was like i got it was like i got
0:12:08
wow yeah i was like just so tired i was
0:12:11
like i got blacked out i was just like
0:12:12
went to bed and then the next thing i
0:12:14
knew it was like 9 00 p.m
0:12:22
yeah i mean my girlfriend was sweet she
0:12:24
just kept letting me sleep because she
0:12:26
knew how tested it was
0:12:30
she didn't know my intentions were to
0:12:32
get up and do the show
0:12:35
no no um just as long as
0:12:38
you're feeling restful because we can
0:12:43
productive if this smoke isn't coming
0:12:48
so that was the most important part
0:12:53
i'm sure i'm sure some it's still
0:12:55
smoldering a bit like just
0:13:02
i wanna go to explore table items
0:13:06
sorry about that i just finished all
0:13:08
right luckily on 15 minutes ago
0:13:11
yeah how's how's the work going is it
0:13:14
it is pretty as in fast-paced man but
0:13:20
how can i how can i find out if i'm a
0:13:25
um oh okay i am i am i'm good yeah
0:13:31
yeah okay cool so i'll do this connect
0:13:34
and then you should go in
0:13:38
and dynamodb which is over here
0:13:42
are you looking at it
0:13:45
yeah i'm watching now
0:13:49
this is it and if we do
0:13:55
the id shouldn't be here
0:14:00
voila nice nice good work
0:14:07
um okay cool so now we go to
0:14:10
we don't need that reaper so we can
0:14:12
close that i don't want i don't want any
0:14:18
windows to be open then what i need
0:14:22
is that just a distraction
0:14:25
okay websock integration that's in
0:14:32
is this already opened i'm pretty sure
0:14:35
because i literally opened it
0:14:42
this is the backhand one i need the
0:14:44
front and one come on
0:15:05
uh what did we want to do brain come
0:15:08
back brain come back i need you
0:15:11
you know what branch we're on by the way
0:15:14
websocket integration i
0:15:20
that's weird how come i don't see it
0:15:28
you know what i think i think i have a
0:15:33
that's why i think i have a fourth
0:15:35
version i made that pr
0:15:38
let me let me just
0:15:40
how to deal with that i can i can't yeah
0:15:43
that's going to be annoying if i worked
0:15:44
from a fork version let me get the full
0:15:47
yeah yeah get that one
0:15:56
so i've done some javascript code i
0:15:59
would want you to have a look
0:16:02
how much i'll be on the right track
0:16:09
when you're ready obviously yeah i'm
0:16:11
just gonna i'm gonna
0:16:14
just gonna download the repo
0:16:20
okay open with get oh desktop thanks
0:16:25
all right um sure this is
0:16:38
this is a fun weekend
0:16:41
where we try our best to
0:16:43
get the projects up running live
0:16:47
i'm just i'm just kidding don't take my
0:16:52
that's not going to happen
0:16:56
what's what's left to do
0:16:59
um so the left to do is then client side
0:17:04
into integration for websocket and then
0:17:07
we're gonna make it live for just
0:17:10
internal thing and
0:17:12
test the web socket
0:17:18
one more functionality
0:17:22
and then after that we're
0:17:24
going to be doing some internal testing
0:17:26
and then we'll go live
0:17:37
looking at the code now
0:17:40
um you're still trying to so are you
0:17:44
it's almost done okay okay it's it's
0:17:48
it's done all right so perfect
0:17:57
this is one i did i don't know how much
0:18:00
of this is correct
0:18:02
but what i'm doing is okay so the
0:18:05
overall concept is that
0:18:08
you know when the user is taken to the
0:18:15
with there's a board and you can create
0:18:21
you can create the notes etc etc
0:18:25
as soon as that part
0:18:31
connect it to the websocket
0:18:34
okay yep so you want to do it on on load
0:18:52
created a global variable
0:18:54
and i'm using this one over here
0:18:58
you might wanna you might wanna put the
0:19:01
the websocket url in like env
0:19:05
like you did with the other url so
0:19:07
somebody doesn't spam it
0:19:15
the goal ben is working but um i just
0:19:19
wanted to speed things up a bit
0:19:28
that's a good suggestion though
0:19:34
this is there so this
0:19:37
is our own connect function
0:19:40
and i'm just instantiating the
0:19:45
javascript web socket object and passing
0:19:50
url to it and then i'm calling the on
0:19:54
open method and simply just
0:20:00
open status and if
0:20:02
if it doesn't happen
0:20:04
then i'm throwing the exception
0:20:08
yeah but the problem with this is that
0:20:13
saying that this method doesn't exist
0:20:16
well always one socket on
0:20:19
oh yeah you um it isn't a function so
0:20:22
when you do like events like that
0:20:31
i'm looking at the mdm docs just to
0:20:33
double check too yeah so
0:20:36
um i think you would write dot open and
0:20:42
so you don't you don't make it a
0:20:48
yeah like that and then and then the
0:20:50
event will be actually
0:20:57
kind of pass through yeah through that
0:21:04
so it's like an arrow function you can
0:21:06
think of it that way
0:21:09
yes but where do we use this event then
0:21:13
if you're passing it probably here
0:21:22
well what are we doing on the on event
0:21:24
yeah you can you can just log it there
0:21:28
let's do that that
0:21:32
and then that should enter that that's
0:21:35
all you need to do
0:21:38
that would be pretty easy stuff then um
0:21:41
i think you have a syntax error though
0:21:43
because you um do you have a syntax
0:21:46
there no you don't you're good i don't
0:21:49
i don't think that try catch
0:21:52
okay yeah you're good man
0:21:56
oh let a go and see how much have we got
0:22:02
index yeah i want to open index
0:22:09
yes it's coming up as null
0:22:17
which one was it index html
0:22:25
so you're saying this this event is not
0:22:30
a minute it's saying on index.html
0:22:35
if you actually just click on that it'll
0:22:37
actually show you in the dev tools where
0:22:42
so it's from local storage
0:22:44
ah right i see i see yeah
0:22:49
nice nice little shortcut
0:22:51
although it doesn't work well when in
0:22:55
ah right i see a bunch of crazy stuff
0:22:58
yeah but i think react uh have um
0:23:02
reaction developer tools in which you
0:23:05
crack the components and everything
0:23:07
isn't it yep yep that's right
0:23:13
okay we need to go back
0:23:16
and do this same thing but this time we
0:23:25
it looks like the function didn't fire
0:23:30
is it wrapped in another function or
0:23:32
something that isn't being is it is it
0:23:44
on connect hold on i'm
0:23:48
on connect okay so that onconnect
0:23:51
function is not being called though
0:23:54
if i do it in that way um wait
0:24:00
wait what wait what's going on
0:24:04
i'm looking at my vs code too sorry
0:24:11
so oh you are exporting that function
0:24:27
vanilla javascript
0:24:35
window on load blah blah blah window
0:24:38
history blah blah blah
0:24:40
document get ancient blah blah blah
0:24:42
window on load so you could like you
0:24:53
throw it in one of those on load events
0:24:56
instead instead of having multiple on
0:24:58
load events you could just make one on
0:25:00
load event to fire off all that stuff at
0:25:04
right so i see that that that's that way
0:25:08
yeah it's like it's generally better
0:25:10
that way you just have fewer event
0:25:12
listeners because they can be like
0:25:15
well in this case it wouldn't really
0:25:16
matter but they can if you have a lot
0:25:18
they'll get expensive for the browser
0:25:21
i see i see what you mean
0:25:24
okay cool then we can wrap everything up
0:25:26
in this in this online function
0:25:32
and then and then it should hopefully
0:25:34
fire because maybe
0:25:39
maybe there was a pro this isn't a way i
0:25:41
usually write code so i'm not like super
0:25:43
familiar with it but i think
0:25:45
that could be part of it too is it
0:25:49
maybe know what the on connect function
0:25:52
ah right i see yeah that would make
0:25:54
sense to be honest
0:25:58
that's the script so refactoring yeah i
0:26:01
i really have to be careful when
0:26:05
wait what's this um oh i i know wait um
0:26:10
so this this is the html file
0:26:18
yeah yeah yeah it's an html file
0:26:21
okay um html so where are you injecting
0:26:27
where you where's your like script tag
0:26:32
still front-end file
0:26:34
oh it's at the top here
0:26:39
yeah okay so it should already be there
0:26:42
then you're right okay cool
0:26:54
this one is there okay these are okay
0:26:57
this one is on load
0:27:01
console we don't need this
0:27:05
but that's already working
0:27:15
don't need this to be on on load
0:27:19
yeah i don't need this to be on one load
0:27:23
just need this one and that one cool
0:27:27
you can get rid of that
0:27:31
yeah and and since since you have the on
0:27:38
wow sorry my i gotta brighten my screen
0:27:59
there we go all right since since you
0:28:05
since you since you're
0:28:07
um loading all that all of that still
0:28:11
front-end file at the top
0:28:14
you can just call the function inside of
0:28:17
that file and it will run
0:28:23
why didn't i think of that
0:28:26
in fact all of that stuff there you
0:28:28
could probably likely do the same thing
0:28:30
instead of making this separate script
0:28:33
right right right i see so you'll see
0:28:36
don't worry man i do the front end
0:28:41
you already could run so that means i
0:28:53
you can you can just do your on load
0:28:55
events like inside this file actually
0:29:03
okay so on load is this one
0:29:08
okay and then i wanna be
0:29:12
holding the on connect over here
0:29:15
so what this can do is basically
0:29:23
and then i can call the on load
0:29:48
cool and if i go back to my index or
0:29:54
this unload function okay this
0:29:57
okay that can come over there as well
0:30:01
yeah and then if you if you do want it
0:30:04
on the on load event just do the unload
0:30:06
event inside that file
0:30:11
um like your window on load
0:30:15
yes but i don't think these were part
0:30:20
no they were just hanging there yeah
0:30:22
yeah okay cool so we can get rid of that
0:30:26
and get rid of all this don't need that
0:30:52
on the html so test
0:31:11
oh no don't even try this on me
0:31:17
scriptures and reference canary property
0:31:23
still front end 295 so it's can't read
0:31:32
i'm going a minute
0:31:35
yeah you can't read this property
0:31:50
so the problem is i think i know what
0:31:53
the problem is i'm taking a good yes at
0:31:55
it so your script tag is at the top of
0:31:57
your html file right
0:32:04
so generally generally the practice is
0:32:06
that you put the script tags on the
0:32:11
because because if you're doing
0:32:13
something that depends on the
0:32:15
html which in that case you are
0:32:18
then it hasn't it hasn't been parsed by
0:32:21
the browser yet because the browser will
0:32:24
see this script tag and do everything in
0:32:26
that script tag first and then move on
0:32:32
okay there is there is another way where
0:32:34
you can just write defer in the script
0:32:36
tag there and then it will like
0:32:38
basically it tells the browser like hey
0:32:41
do this when there's like nothing else
0:32:47
what would you reckon
0:32:50
well the classic like the classic way
0:32:54
the older way the classic way is to do
0:32:57
like you put the script tags after the
0:33:02
of the html or you can just write defer
0:33:06
on the script tag itself which is like a
0:33:08
property that was added in like i don't
0:33:11
know 2015 or something 2016.
0:33:17
so yeah there's there's different ways
0:33:22
hobby doing that way
0:33:51
so would they be a part of the body or
0:33:55
just under the body
0:33:57
like before the closing tag of the html
0:34:04
cool right so let's try that one
0:34:36
no no no no it wasn't that one i guess
0:34:39
it was uncle promised i cannot read
0:34:42
properties of undefined read reading
0:35:06
load is there and it's 21. so the
0:35:10
to get board name the board names
0:35:18
which we are giving over there
0:35:28
was that working before yes it was all
0:35:31
this stuff was working yesterday
0:35:35
didn't check it in this way because um i
0:35:39
um i didn't really refactor the code i
0:35:43
just wrote the program and um
0:35:46
asking the code that's here
0:35:48
it wasn't refactoring yeah
0:35:53
looks like there's fetch fetch problems
0:35:56
too like it's not oh
0:36:03
api has been changed which is right all
0:36:07
right that would make sense okay
0:36:16
all right i'm gonna stop sharing the
0:36:18
screen because i don't wanna give out
0:36:23
just bear with me i'll be right back
0:36:26
there's there's naughty people out there
0:36:31
spending up all your money
0:36:35
very annoying people
0:36:38
all right stages prod yeah that is the
0:36:46
in my environment js do this and then a
0:36:54
let's check or i'm coming back now
0:37:28
well you know what i think you're good
0:37:30
because i don't think anyone's watching
0:37:31
right now um probably though
0:37:35
where's cute jesse man
0:37:38
where's hugh jesse we're gonna secure
0:37:45
he hasn't been if for the last i think
0:37:51
must be a busy busy work schedule
0:37:58
hectic i would say hectic work schedule
0:38:02
apparently seems like it
0:38:06
so let's go and play that
0:38:10
right there we go and
0:38:16
what what am i doing
0:38:34
still a problem ah perfect here we go
0:38:44
so nothing came now which looks really
0:38:47
promising let's see if it's inserted in
0:38:53
that's how easy it was
0:38:58
thanks tori you're the man
0:39:01
yeah all of all it is is like um
0:39:08
that like like there's two ways of
0:39:12
event listeners is just like you can do
0:39:15
like socket dot on open or you can do
0:39:19
socket ad event listener but if you use
0:39:24
close or whatever other types of event
0:39:27
listeners there are then those ones you
0:39:29
just use the like like a arrow function
0:39:33
versus like the ad ad
0:39:36
so it's just something to keep in mind
0:39:38
if you ever run into that problem
0:39:40
right right right yeah
0:39:43
that makes a lot of sense so i'll
0:39:46
keep that in mind now
0:39:48
cool so this was really quick than i
0:40:03
now what we need to basically do is we
0:40:08
um make this project
0:40:11
live as in internally and then
0:40:20
urls so they can test the websocket but
0:40:27
okay this is basically gonna be a bit of
0:40:35
messages as well now
0:40:40
so there's a there's a method on the
0:40:41
websocket called send
0:40:46
so we can we can just write something to
0:40:49
uh actually first of all do we need that
0:40:52
method on the backhand first
0:41:00
no no because it's talking directly to
0:41:02
the websocket we've already set up the
0:41:04
lambdas and everything the api websocket
0:41:06
gateway it's it's connecting through
0:41:08
that url that you have at the top it's
0:41:11
not actually connecting through the
0:41:18
yes well what i meant is that
0:41:22
you know when a client
0:41:28
and um how will the
0:41:30
backhand know to send that message
0:41:34
to all the other users as well
0:41:37
oh yeah oh oh that part gotcha well do
0:41:40
you want to just try for the sake of the
0:41:44
see if we can we can just send and
0:41:46
receive a message from the websocket on
0:41:48
the client side and then next time
0:41:51
work on that that like
0:41:55
yeah i don't think it should i don't
0:41:57
think it should be too bad because you
0:42:08
users from the database when it's sent a
0:42:13
just like grab all the users from the
0:42:15
database who are connected and then send
0:42:18
the message back to them
0:42:22
loop over them sending a message
0:42:27
yes yes that's exactly what i'm i'm
0:42:30
thinking how we should be
0:42:33
with your spot on so um
0:42:36
in the front end what do you think we
0:42:40
we need to do first
0:42:42
as in create a method as in just send
0:42:47
it to the web server is it
0:42:49
so do you have like uh like when you
0:42:51
create a note and save it or something
0:42:54
we can just like fire an event that
0:42:56
would just send the message with the
0:42:59
you could just say hi for now or
0:43:03
okay cool so basically that would
0:43:15
here's how i'm thinking that you it
0:43:20
so once the user connects to the
0:43:27
movements and everything
0:43:30
would be visible to the other users
0:43:32
connected to the same websocket
0:43:37
what do you mean what do you mean
0:43:39
movements so you know that um when we
0:43:46
do in that way don't worry about that
0:43:48
i'll show you what i mean
0:43:51
i don't want you go away
0:44:06
you're happy you're so happy about it
0:44:11
all right i'll i'll work on this one
0:44:18
i'm worried about my application next
0:44:22
application which one as a job
0:44:25
application or what yeah
0:44:27
i have an interview next week
0:44:32
well it's it's the it's the second stage
0:44:38
when is it though as in what day
0:44:41
wednesday wednesday morning like super
0:44:47
how'd you feel about it honestly it's
0:44:51
these parts are more challenging for me
0:44:54
because it's it's just like a behavioral
0:44:56
part like it but they're like you have
0:45:02
an hour about yourself
0:45:04
like basically sell yourself for an hour
0:45:06
it's like tell your life story is
0:45:08
basically you just call a life story but
0:45:11
i'm just really bad at preparing for
0:45:18
uh because i you know honestly like i
0:45:20
can talk about myself in a
0:45:23
in a manner that's not very coherent
0:45:27
yeah and to make it coherent requires a
0:45:32
and i'd just rather be coding
0:45:40
you know what you what you might do
0:45:46
make a video of yourself
0:45:52
building a web page as in a really
0:45:56
fabric and just writing your story in
0:46:03
kind of what i thought about doing
0:46:05
and then i and then i was yeah i won't
0:46:07
get into it too much but then i was like
0:46:09
i'm just i'm just like procrastinating
0:46:12
so badly right now
0:46:19
understand but it's all
0:46:21
worth it i used to be that sort of a
0:46:25
i i've gotten into this personal
0:46:30
growth program and i've gone
0:46:37
personal personal growth
0:46:40
he's actually really teaching me the
0:46:42
tricks uh as in how to condition your
0:46:45
mind and also be really proactive and
0:46:48
just really good at
0:46:51
not being procrastinating so that's been
0:46:54
really yeah too much
0:46:57
that's good that's good
0:47:02
you know what i said about
0:47:06
that when you make any movement
0:47:09
then the other users
0:47:11
should be able to see you as well
0:47:14
and then see your movements on the board
0:47:18
yeah yeah so it's essentially one
0:47:21
maintains that see
0:47:24
for example if you're
0:47:26
connected to the websocket
0:47:30
at the moment on your end okay
0:47:32
so you would be able to see exactly what
0:47:41
drag it so this will be kind of a live
0:47:49
that's what's in my mind and the goal
0:47:54
because the existing scrambler
0:47:57
that we are enhancing to
0:47:59
uh include the persistence
0:48:01
story that already does it
0:48:04
but they do it by us okay io
0:48:12
let's just copy their code
0:48:23
i mean i mean it's not a bad idea to be
0:48:26
honest like there's not much difference
0:48:28
between just traditional websockets and
0:48:31
and their implementation of using socket
0:48:34
so i'm like after that
0:48:36
and mostly serious
0:48:40
because i don't even know what to copy
0:48:44
that is a beautiful
0:48:48
challenge well well
0:48:53
we can work on that issue over time
0:48:55
because that's like
0:48:57
that's like a huge task
0:48:59
oh right okay i see all right all right
0:49:04
the way the way i think about it i've
0:49:05
never done it so i would have to go and
0:49:07
research but the way i think about it is
0:49:09
like you would have to
0:49:15
so each client in their code would have
0:49:17
to have some sort of like
0:49:22
listener event for like scroll events
0:49:27
that scroll listener would have to be
0:49:33
200 milliseconds or 100 milliseconds
0:49:39
sending messages to
0:49:45
or however like maybe faster if you
0:49:48
don't if you want lower latency
0:49:53
those messages would basically contain
0:49:56
the coordinates of the mouse position
0:50:00
the cursor position of the other users
0:50:04
the position of any board element that's
0:50:07
moving around on the
0:50:11
um i'm board just admit something
0:50:15
everything is going off my head at the
0:50:19
i'm like i don't i'm kind of just making
0:50:22
this up too i'm just i'm just trying to
0:50:26
if you said in an interview
0:50:28
like hey we want multiple mouses to move
0:50:32
across the screen at the same time using
0:50:34
websockets like this is the way i think
0:50:36
about it and maybe it's totally wrong
0:50:41
yeah yeah true and i think
0:50:43
that is all it's it's about as in just
0:50:55
this guy really knows his stuff that i
0:50:58
have no idea about but
0:51:01
can i just pretend i know what he's
0:51:11
i don't i i i'm sorry i don't know how
0:51:14
much you work on like the front end and
0:51:16
the dawn and stuff
0:51:18
so oh um yeah i know
0:51:22
kind of the basics but i didn't really
0:51:25
know the functionality you were
0:51:27
describing i think that's kind of brand
0:51:31
okay so there are like you know how
0:51:33
there's an onload event yeah like so
0:51:36
like there's all these different
0:51:37
listeners that are part of like the the
0:51:40
so that they're they're listening for
0:51:42
certain events that happen on the dom or
0:51:45
whatever so like one of them is an on
0:51:49
or oh i write okay
0:51:51
which basically just tracks like
0:51:55
um if you're scrolling and i said on
0:51:57
scroll actually meant like on on mouse
0:52:01
there's like a mount there's like a move
0:52:02
event that you can listen to
0:52:05
so basically whenever you move your your
0:52:07
mouse or your pointer
0:52:12
uh what is it the the tablet thingy
0:52:14
whatever like a stylus like you can
0:52:17
listen to these events
0:52:18
and it will fire every time you move
0:52:22
every single time like which is not
0:52:24
really good because it really eats that
0:52:29
if you do that basically in that event
0:52:32
object you get a bunch of stuff
0:52:34
like the position of the the current
0:52:37
position of your mouse
0:52:41
right i see so in there basically you
0:52:44
could get that information for each
0:52:48
client and send that information to the
0:52:52
and then basically you would write some
0:52:55
that would say hey i got this message
0:52:57
from the websocket with these cursor
0:52:59
information and now draw draw these
0:53:04
on the on the screen
0:53:06
with those coordinates
0:53:12
interesting but i'm not saying that
0:53:15
that's the best way to do it that was
0:53:16
like the only way i could think on the
0:53:19
right right try to say
0:53:21
there might be a better better way there
0:53:26
yeah why am i breaking is that yeah you
0:53:37
what i'm thinking at the moment
0:53:42
we need to come back to it
0:53:44
oh yeah definitely because that is that
0:53:50
i think so it sounds pretty long and
0:53:54
it sounds like something that would need
0:53:56
to be like really nicely optimized for
0:53:59
performance yeah because if you have
0:54:03
say you have like 10 people doing them
0:54:04
it's like it's gonna like chew up to
0:54:08
chew up the browser like like it's going
0:54:10
to be pretty resource intensive i would
0:54:16
but maybe not maybe not i don't know
0:54:17
maybe it's not that bad
0:54:22
that makes complete sense man do you
0:54:24
want to try to send a message
0:54:30
we go to our function on connect
0:54:38
i want to put all of these
0:55:03
send message and then how would we do
0:55:07
so it's just you just
0:55:11
you take your websocket
0:55:14
variable whatever you saved it in and
0:55:17
do um no you don't need to make a new
0:55:19
one okay cool you just use the existing
0:55:22
one if you've saved it do this
0:55:25
and then it should be it should be send
0:55:33
and then that's a function that will
0:55:42
yeah i think you can i think you can
0:55:45
send let me let me see um
0:55:50
buffer blah blah blah blah blah can you
0:55:53
i think you just stringify the object
0:55:55
which i think is action default right
0:56:05
you don't know unless you try it
0:56:11
i think you i but you don't you need the
0:56:13
action default thing
0:56:21
you know how we send the action default
0:56:44
i think we would just send the same
0:56:50
so in this one what would we say
0:56:53
recently on default
0:56:55
isn't it default to get back a message
0:56:58
before is in there as in it's not
0:57:02
oh i would have to activate that first
0:57:07
all right fine we'll have to come back
0:57:12
yeah all right what i'm gonna do is
0:57:17
oh you could have finished that line
0:57:23
all right come on mate 13 hours of work
0:57:30
well yeah you're a trooper so you would
0:57:33
and then basically all you need to do
0:57:35
next is just have another listener
0:57:50
why would we need send message up
0:57:53
because we are sending the message to
0:57:56
the server yeah it's like a post request
0:57:58
i think that way and then there's
0:58:00
another event listener that's like
0:58:03
um it's called it's called on message or
0:58:07
message like it's on message so
0:58:09
websocket on message and then you
0:58:12
basically do the same thing you did for
0:58:18
thing and then that's where you receive
0:58:20
any messages and that's pretty much it
0:58:23
like the basics of it that's it
0:58:25
it's not bad at all
0:58:26
all right so you just send and you
0:58:29
receive and then you just do something
0:58:34
i mean there's probably some error
0:58:40
yeah of course yeah i think that's
0:58:41
pretty much it man
0:58:47
yeah i can't actually wait to get this
0:58:49
functionality working because it sounds
0:58:52
much fun to be honest
0:58:54
um just have to check what changes that
0:58:58
yeah that's fine you can commit days and
0:59:07
there is a nice um
0:59:09
pattern i could tell you how to use
0:59:13
that i find quite nice which is like um
0:59:20
what is it called not modular pattern
0:59:26
it's kind of like the modular pattern
0:59:28
but the modular pattern is like where
0:59:32
have private data but basically you
0:59:37
uh the name is escaping me but like
0:59:39
basically you just create an object
0:59:42
and then you just hang all these
0:59:44
functions and stuff off the object it's
0:59:47
kind of it's kind of nice for these i
0:59:49
mean it's my preference for like vanilla
0:59:53
but you don't have to do it
0:59:57
i just like it when you have like tons
1:00:02
stuff that needs to happen in sync so
1:00:05
then you have like one function that's
1:00:08
on load and then you like kick off some
1:00:12
other function whatever
1:00:16
i'm talking too much man
1:00:21
do you want to repeat that maybe
1:00:24
no i am i'm just talking nonsense
1:00:33
uh i'm just reading kind of yeah my
1:00:38
yeah my brain's dead too
1:00:51
okay push this bad boy
1:00:56
all right um that is it guys
1:01:02
stop sharing there we go
1:01:07
there's a there's a gecko or frog i mean
1:01:09
going off in the background
1:01:17
well um was a really good progress we
1:01:20
managed to get the
1:01:23
uh client connected to the
1:01:31
hey man think of magic it's just it's a
1:01:33
team effort like you said man yeah yeah
1:01:39
we did it together and um yeah
1:01:42
we are one step closer to
1:01:48
working and i mean the next session
1:01:51
we'll be focusing on something really
1:01:53
different so if you want to check that
1:01:58
same time same place and
1:02:01
a different task yes there you go you
1:02:08
have a good night and we'll see you on
1:02:12
catch you guys now
1:02:13
have a good night thank you
