Hello friends and everyone welcome back to net
code Hub channel I am Frederick and I'm happy to have you here today in this video we are going
to talk about advancing our chat application that we started in the first video so if you haven't
checked this out then please do check it out check the video description you're going to find it in
there so we are building a chat app using net8 blazer with interactive um web assembly render
mode okay yeah the name sounds confusing so it is net8 Blaze
r web app with interactive web assembly
so that is what we have started so check the video description for the first video now in the first
video you could see that we able to create our connection and our Hub we able to call this method
and our chat was working but we had an issue that we need to or it needs to be improved that is when
sending a chat we want to rather handle it with a model and let's also see if we can optimize the
code that we have written we can create um a class as a se
rvice to be use in in our chat application
all right so before we Dive Right into this make sure you have subscribed to this Channel and I'll
hit on that Bell to receive update as soon as I upload new content give this video a thumbs up if
you learn something here also I do offer coaching to people who are interested in Blazer or let me
say they not technologist talking about Blazer web assembly server Mari Blazer hybrid and Etc okay
so and web API is very important okay so if you're intere
sted check the video description and you're
going to find an email in there you can write to me through it all right the S of this project also
be available so if you want to grab um it check the video description and going to be possible
available as well all right so that is it let's dive into it here we can add the models here but
you know we have this uh client project we have the Ser projects and maybe later on we can decide
to add more models we do we want to organize our work so it's
better that we add a class Library so
we can um we can add them to each of the projects okay and we can add that model in there or maybe
you can also add it in the client and well you can do that so let's go solution right click on the
solution name let's click on new project and maybe for this I'm going to add a class library and
maybe this is going to be only modus okay so chat modus so this chart model here
I'm going to make it as chart or chat maybe chat will be okay so once you
have
this chat what else are you going to do so we're going to pass in some properties
here test username and our message so instead of this test they can make here as that's a
message you see we need to include component model the DAT annotation so we can make them
required we can restrict it whil um using this creating an instance of this okay so now
that we are done we can just go straight ahead to the server section I click on dependencies
and you know add project reference and quickly that
is a model so you have to add this you
also do the same CH to the client from the dependencies where click on it go to add project
references and then here get it done you see so we are sharing this between the two projects
and when you come to the pages chart page in here okay watch out so instead of creating
all this we going to remove everything from here I'm going to say that this is message oh is
it message nope this is chat so private chat so using chat model and now here we're going
to say that it's a chat and this equal to new you see is very simple now let's grab this
so here instead of passing on this long one no we going to not replace it with this you see
that is a m very simple one but from this we need to specify the data type so once have this
the T value so let's specify this T here as the chart there is a model and that is an object so
we don't need this anymore or do you think we need this no we don't so let's get rid of that
so all that we need to do here
is messages. add the chat and we are done but this is giv us error
why because of this so let's make it as a list of chart error sub you see so reoptimizing this
aside from that when it come here we can see message in chat chats let's here this these are
messages or we can make this as chats okay so it countes more readable to you and I so chat
and now here message or chat in chat what can we do in here to actually set this straight we
are going to modify this so instead of having this here
we can replace it with this very simple
one so control KD we format it well so chat in chat so chat in chat yeah so in here going
to say chat message then chat so this is is coming from the message property and that
is all so can see we have the date we break it we have the username we break it then we
have the message well you can customize the way that you want to suit what you want it's
just a demo and you can build upon this also aside from that when we come here instead
of having thi
s input test box we can guess we can get rid of this isn't it so let's get
rid of this one from this and that get rid of this and we're going to replace with with a very
simple one as well and this we can use edit form we see so we're going to use an
edit form here and now let's clear this okay we have an error why because this is chat okay now send message we can still
navigate to the same send in here okay but we're going to create a method for
that so let's it is a message and now we hav
e a username we have the message
you know this is not just a test it is rather message then we have this button as what
submit since an edit context or edit form you have to have a submit type using name placeholder
these are the placeholders that we need for each okay now here is still remain CH or we can from
this section we can actually do the same thing okay so let's maintain as it is connected or
disconnected and now with this maybe we can implement this font to t board okay now this
meod let's implement this now to change this we want to actually you know we are not getting
from the database so we want us that to type in the name once and we don't want to just to type
in all the time type in your name all time type in your name so you want to actually catch the
name that is just toss or types in so next time that you want to chat again we have the name
already okay this is just a feature that I'm introducing you can also introduce your own all
right okay you can also f
ollow this as well okay so aside from having all this what else can we
do again we're going to have this send message so you see this instead of having all this we're
going to remove this one make it as a void and I'll send meage going to check if this chat.
username name is null then assign it to this username okay and here we must passing this
message in here the chat in here as a model that's what we are doing now aside from having all
this if I click on send you know we have have to wri
te definition for this method if I submit this
method get fired so send chat or send message to chat clicked and we're going to write definition
for this so we are saying that you want to set the DAT time is equal to day. now so we set the
instance in here because we clear that one over here I believe you've seen that yes so when it
come here we have to set it and now this is no more my message it's rather what good chat it's
good that you are following you can just grab this and now messag
e the username so we checking
if the username is not equal to now it means user typ in the new one then you want to store it in
here so chat. usern name okay so that this the first time the user types in the name and I'll
send it we're going to have access to this we're going to store it here the next time we check is
the usern name equal to now no it is not because we have the name typed already and in there we're
going to assign it so when you click on send you know before we check if the
name is SC to now then
what we have installed already Please assign it to it and I'm go so isn't nullable okay this is
a correlation operator I think so Cor operator also so all right and aside from that we say
chat. message is equal to now so the next time we want to clear only the chart very simple one
okay so this is all that we need to do for this okay but one left do you know go to this method
send message I believe you've done that correction already good job if you haven't done it t
hen let's
go to the chap hop we want to get rid of all these guys in here and I want to maintain it replace
it with whatat and I will say this is chat grab this chat and now instead of all this we going
to clear this and now pass down here the first one is this one which one it's simple I think
you go for this one isn't it yes I also go for this okay now we're going to save this in here and
now let's try to run this again and I'll check it out so this is ready and now let's click on chat
a
nd check it out so chat and it's going to open so we have it here you can see there is a nice one
that we have built chat connected and I'll type in your name so net code Hub net code Hub and I'm
going to say hello so before I type in hello I'm going to grab this go to the next page and and
I paste this and I'll switch it in here and I can okay so I have in this that's next
code Hub and now here I'm going to say this is threed so let's wait for the
response so send you can see we have it so
we have the date in here we have the
name and we have the message let's respond so hi we have it so you see we have this a card
and then we have this page it so I can type in how are you now you can see that here we
don't need to pass in the name again it has in cash already check it so only thing that
you do is pass in here is because that we are not having authentication attached to this okay
that's the reason why we have to um hardly it's hardly or we have to manually um install this so
how are you I'm fine sir you know it's all the time make sure being being po being respectful
polite is the key okay so please how are you too okay so please I'm fine sir okay so send
it and I can see we can actually chat here when extend the next page you can also do same so
we've been able to customize our UI and also the code itself to simplify this and put everything
in a model that we can Implement okay now let's see what is the next thing that we can actually
do to implement or to m
odify um this chart system that we are building so this time around um
I don't think this is good when you check we have our UI in here as a Razer component and
in there b we have all the code the connection H connection creating and Etc the might be that
there might be a time that you want to actually increase or add some features to the system and
now currently what we have we have about line 78 so this could increase the number of codes on
this file okay so it's better that we exract all
the necessary ones and create them as a service
now when you create as a service we then have to register it and we can use a service in here I
think um this is the best way so let's try to to create a service for this and and see what we can
do so in the you can see that we created service in here not a service a project class Library
as a chart model so this is going to contain all our models the next thing here that's going
to do is you know the service that you're going to create is go
ing to be used by only the client
so there's no need for us to put it inside that class we can put it within this so right click
on the client we're going to create a new folder to this and we can say this is client services
or chat Services Etc so let's say this is chat Services inside this folder we're going to
create a class here and name this class as chat service so chat service so we have this service
in here now what is the first thing to do as far as this service is concerned you kn
ow when you
go through the chat page we have a connection um string is a connection string or yes H
connection now this H connection as soon as the page initializes we are building the H
connection we specify the nav manager and I we are linking straight to the URL that we specified
in the server section okay aside from that we want to register for a receive method so as soon as I
click on a message oring message this message have been registered already and now we can retrieve it
and I'll
pass in the content that it we need okay aside from receiving when it accept it we going
to add it to the chat list that we have in here and now we're going to invoke it so we display
it on the screen okay so let's first let's first of all create a class now within the class last
Constructor we want to initialize this as soon as the page load initially okay so the same thing as
here we want to load inside the page Constructor and now we can create this as a single method that
we can call u
m when the page initializes and you can call this and now this together okay then the
same method to can also do that and here we're not going to use this um invoke a sync method again
we're going to use an action whereby you're going to subscribe to that event and as soon as anything
get fired um the page which are subscribed already also will get rendered and I'm going to see the
current contest or the current data on the screen so once you have this client service created the
first thing
we're going to do here is we need to set up our action method and now the first thing
is we have our action as invoke chat display you can give it a name at all make sure it isable
aside from that you want to retrieve the chart list from the it so we want to have our service
in here so we have our list of chats and in here we have to bring in the chat. model Nam space so
that's our chat now let's create um a read only for this H connection so set this as H read only
for the h connection so
the H connection that we created we initialize it inside the the chat
page that is what we are bringing it in here okay so you have this have connection and we need
to create from the the very onset when the page is being called or this file is being called you
know we have to create constractor for this chat service and now we pass in navigation manager and
now in that we can get the navigation manager do2 absolute URI as you can see from the previous ones
then we build this so when build
is this going to be built when we create a constractor for um the
page okay for this chat service that's where we call all this aside from doing this we need to
create a single method here to receive message and now this message or this method received the
message you know when you check this chat um when you check our chat Hub we have this receive
message as a method and I pass in this so we have to create um a way to retrieve or to receive
a message from this method and thatly what we ar
e doing in here okay so receive message and that
is the method in here and now in that we add the chat to the list that we have already then we
invoke the display because here chart has been changed chart has been added to the list that we
have already so we have to update it or invoke it so we can see the current context or current
chat being added then the last one left here is to start the connection so after receiving
the chat finding this and I'm making all the methods available in her
e we have to start the
connection so let's have another method here to start connection and that is a start connection so
in here have connection do start then we need to create a property value for is connected which
is the bullan expression we can put it on top here so can see see that this is stopped and if I
click on send chat we're going to move that method from the UI to this place so send chart we sent
we call this method and now in here we pass in the chart model okay so the chat mo
del is going
to send it and now when it gets to this receive it's going to pass the same chat model to the
received and now it's going to be added to the list that we have in here so it's like it goes
in there and now it returns so when returning it's going to add to this list and I'm going to
display it on the screen you see good now this is the service that we need to create now we going
to consume this but first of all let's go to the program now in here we have
to reged service so buil
d services do add this is going to
be scope then let's say this chat service we did not create interface so we need only
one let's grab this also let's go to the server and now paste it in here so before the build paste it in here so
chat service it is consumed from the client service so that's fine because you know defaultly
the server has a page or project reference of the client so anything that you want to reference
in the client it is possible but if you want to reference anything from
the server to the
client it is not okay this is possible because you have the service inside a client and if
you don't put it if you don't register this going to have an error because anything that
must go through the client must pass on the server first okay we have this now let's go to
the chat page and now all all the list that we have in here we going to clear everything
okay maintain and leave only the chats so let's leave this the H connection we going to
clear this and um we going
to clear this as well so let's clear all from here
so it is no more we have only the chat and under username okay so in
here what are we or what can we do you know we have to inject this
chat service so let's put it on top and we say this inject chat service you see this chat service now this chart service this it's coming from the name space of this we
don't need the nav manager cuz you're not using it copy the chart service and now from
the list of chart you can get from the service also
from this you can get from the service then that is so here we have
the list we get from the service and also um this checking State or the the Boolean
expression which tells you if the connection is well established or not we just get it now with
this method what can we do we can just create um a page life cycle method and that's initialized
async and in that we invoke we subscribe to this but before we subscribe we have to implement um
ID posable interface so on top we have to add that ok
ay now we have to implement the interface
in it that reason why we having the error in that so in a page when the page load we are
subscribing now in the page disposing we want to unsubscribe from this and it has or it
must come from the page dispose method so dispose then we unsubscribe from this if
I click on send message what do I want to do I want to send a message and call this the
send chat service that's from the chat service and I'll pass in the model okay so this
is all that I nee
d to do very simple one yes so all I need to do here is to create a
service and I'll consume the service in there all right now I think it's okay let's
save this let's build this and check it out all right so the app is ready now let's click
on chat now let's see so we are in we're going to open another interface from this page we have
this we can let's extract this too as you know net code up so connected connected net code H
this time right net code so I'm going to say hi Fred and now thi
s is going to be Fred and
I'm going to say hi net code so each they are exchanging what high high now let's initialize
this first so we have it high FR I concent you know High net code you see this working isn't it
exactly it is working okay so we've been able to implement a Class A simple class to um cut out
everything from the UI and I we have it in the service that we can inject it dep injection and
now we are using it so what you're going to do next here is to save the chart to database
and
also retrieve the chart from the database and display it on the screen so in order to do that
we have to um install some packages ENT framework call framew call. tools and now we're going to
use an sqli database okay so let's quickly do that and you know we have our server then we have
our client this going to happen in the server so these are the step that we need to do first
we have to first install our packages after that you have to create a connection string
we create our abdb co
ntest class we register the connection string we perform migration we
create our repo then we expose controller we create create our endpoint that we can get to
save and I retrieve the list very simple okay so let's keep get this going now right click
on the dependencies or even when you have it here I have these packages installed already
so just install them any frameware call any frame call. SQL light and now to so in this
three packages when we are done let's start with our connection s
tring so go to upsetting.
Json and I in here we are adding a connection string and now the default connection here it is
what data source is equal to my chart. DB since we using an SQL light that is how we supposed to
uh specify because this going to create a file which is going to be attached to our system okay
so once you're done then let's go to pr. CS file and I register this connection in there so here
we're going to say that builder. services addb contest and let's pass in this appdb
contest but we have not created the appdb contest yet okay so let's go to solution
right click on the chat let's add a new folder to this and name it as data inside this
we need to create our abdb contest class so we said this is an app DB context and now since we have ENT framework
call installed we can H it from DB contest okay now it in here
we can create Constructor for this or we can use this one we can just clear this
we can use Constructor passing this option let's specify the DB co
ntest class by length here we can
use primary Constructor very simple one aside from that we can use DB set let's pass in a chart model
and now with the chart model we need to include the the name space and this is charts okay now
when we are done let's go to the program and I register this so abdb contest contest then we
need to specify the options so option. use SQL light oh supposed to be o see so dot use SQL light
then what we need to do here is to pass in the configuration do get conne
ction string and now what is the name of the
connection string that is the default okay so let me put this the next line so we have this here you see that so
up theb contest then I we pass an option. use an SQL light and in that we are specifying
the configuration the connection string in the very simple one you see okay so now that
we are done here what is the next thing to do we can perform database migration
let's try that and see but before that let's build this project and check it
ou
t so we're going to build the server project right click on this build
project so succeeded now let's click on package manager console
let's set the server to Startup project and our package manager console
we're going to add my migration so add migration let's make it t first now let's update database I think this be spell wrongly so
we're going to have an that let's see yes we know it already don't worry let's do it again yeah so it is done now let's create
our repo for this so right clic
k on this we're going to add a new folder to this
and we're going to say this is repost let's right click on this and add a class now
this class going to be let's say chart reple now this chart triple let's
use primary Constructor which was introduced in C version 12 and
we're going to say this is abdb contest then let's create a public asent task or save chat async and now you passing
this chat which coming from the modus we have it instance created and now in here here we're
going to say
that appdb contest. chat. add then we're going to add the chat so from that I
wait abdb contest do save changes async we save the changes so we saving it here and
now this is get so let's have public async task and there going to be list of chat
and now here you're going to say get chat async and now with this it Maps up
to await abdb contest. chat do two list from ENT call to list async
okay now let's register in the program. Cs file so in here builder.
services. add scop then let's add
chat repo okay now once we done with this
let's create a controller so before we do that we have to expose this so let's add
a controller service so do add controllers so we add controllers and we have to map
the controller down here so app do map controllers okay so we map it like this and aside from doing this we have to create controllers folder so
let's add this and say this is controllers now let's add a controller to this so API mt1 and you're
going to say that this is chart so in her
e we can still use primary
Constructor and we need to add chart repo so we need an end point here since we just need
only an end point for the client to consume okay but for saving we're going to implement it in the
hub so let's have HTTP get and here we have our public Asing task and this is coming from an
action result which we can also have list of chat so and in this we can have
a look at get chat so get chat a sync where about this map up to okay
then a wait chat repo do getet chat a
sync it say this what we are doing very simple
now in order to save the chart let's go to the Chart Hub and now in here let's inject the
chart Ripple now this is going to M possible since in the same server okay we can use the
rle but outside the server we have to use an endpoint so here we say chat repo then chat repo
so before we save we're going to say that I wait chat repo do save chat we passing this chat
model that is all very simple okay now aside from that let's consume this so befo
re we consume
this um let's reg this service before we forget so let's go to program. file in the client
service or the client project okay and now in here we have to register an um HTTP a service
okay so that's all we need if we don't do this we might forget it all right but I'm not working
on the the client now so we can still close it okay so in here this is working now let's run
this and see so I can see see that we have the app running but I want to open a database so
we need to insta
ll DB browser SQL light and click on open database and that is the database
that we created to open this and then click on browse data so you see we have an empty one in
here okay now we're going to test and see when we add we must see the data or the message in
here so let's say we have high this is not high it this Fred and I'm going to say hi so as soon
as I click on send it is here and when we come to our data and I refresh this you see we have it
in here let's open the next one so the
new one is ready now let me extend this in here okay so it
is high fret now I'm going to say this is um net code I'm going to say hello now if I click on send
I have this in here now let's check the database so you can see that here we have everything right
this working and we have to then display it in here because if I copy this and the third person
tries to access this the page becomes what blank but when you check the chart we have about two
chat in here we are not saying when you open
this you check the message from the the route API
SL chart we have this chart in here you see that we have these two chart so it is up to us to
consume this and display on the screen anytime a use a new user joins okay so let's Implement
that now let's go to the Chart page and now in there since we want to call the database on
the page loads up we want to actually have it in the um code okay the file so we are not
going to implement we're not going to use this class for now let's um write i
t within the code
so here from the chart page. Razer we are going to specify this down here so instead of this
using this service we can get rid of this we want to all the time make some some things simple
as well okay so for now we want to um clear this code and let's see we have to remove this okay so
we need to when the page initializes we know what we need to do already we have to create our
H connections and our list of chat so here we can specify these guys in here we have our chat we
have our H connection then we have a list of chats when the page loads up you want to build a hub so
in a very simple way we can build the Hub in here so after building the Hub what can we do we have
to bind up to the message that we're going to retrieve so what is a message or what is a method
that we're going to retrieve you know that's a receive message so when you check the chat H
it's going to call this method so I'm passing this model as a parameter now here we are going
to retrieve
it so from chat page you're going to retrieve it in here and now when we retrieve
it what are we doing this is a payload so that's the chart we adding it to the list of chart that
we have in here you see this is very simple okay it's very simple than using the class to handle
this that's the reason why we not using the class you want to make this project simple one for you
to get the understanding but the class you're going to use this later on so don't worry okay
we have to inject our con
nection string on top this a connection string that's the navigation
manager on top so let's inject it in here okay now this is solved so after adding the chart to
the list we have to start so crl k d we have to then start the connection okay so in order
to start the connection we have to have just a line of code then we can now start so once we
start that is where you want to make an endo API call so let's create an instance of an API know
the HTTP then we're going to use this HTTP call so
let's have this call okay so we can see that we
having the list this going to return return a list of what chat and we are getting from Jason as a
list of charts so there is a local host there's your port API route and then we have the the
controller name okay so we have this in here and aside from that we can test if our connection
is in order and that's what we did so from the end we can check if it's connected and also we have
to make a call to that method in the hub and that is a send
message so see from here what you're
doing here is we send a message we call this method we pass in this property is it property
this Modo as a payload when it comes to the chat H this is a method that we are sending it also
broadcast it to everybody and the current user has a meod receive message so we're also passing
the same message what is send to all clients then this message when it come to the chat page we
are receiving this message in here from the method there's a pillot coming in
we add it to
the chat of list and I we we um re the page to get this displayed when we make a call or we're
going to now add we're going to assign the list of chart that we have in here onto this chart
list that is when the page initializes okay so we can be adding multiple charts the next chart
that you want to we can add so this get assigned and displayed at the first time then the user can
now because since we are adding the user can now be adding more to this chart so we can display we
can see everything that a very simple thing that we are doing so when you compare this and using
the service I think this is much more easier to understand than the service that's why we using
this for now okay so don't mind the service will be there we're going to be using it later on
so since we are now going to use the service in here we have to remove this service and also from
this we want to check from the list of models as container that we have and we have to also remove
this becau
se we have them from this page okay now let's save this and let's run this application
and check it out all right so let's see it is opening now let's start everything again so I'm
going to say this is hi Fred I'm going to say maybe this is a good day so I'll just start the
conversation and it is in here then this is that's Cod okay so then I'll say ah good day how are
you then with this let's see so we have these two conversation here the next person joins
and now let's check it out so I'm
going to copy this go to the next page paste it here and
I see we have the message and maybe this person is so you connected this person is maybe this is
this is you right so this is you and you want to say that hey everyone now check it out send it
and I we get it the next person joins from this Angle now let's see it is is everything so you
can read all the messages yeah all right so that it for this video thank you so much for watching
and stay tuned for the next one the next feature th
at we're going to add to improve this chart
so I'm going to catch up again so then take care
Comments
Good job, thanks.
Good job, are you gonna create authentication and authorization as well soon?
Sir, do you have a sample coding for realtime when insert data from client service server app can send data to cloud or another database