Blazor in 2020 - part 4 - Misc.

1. Introduction: hello and welcome to the fourth class off the Siri's off blazer in 2000 and 20 now in this final one. Actually, we will cover everything that did not fit in the previous glasses. Say, for example, JavaScript interactions or running back round tossed very important things, but not basic stuff, not something that belongs into navigation, not something that belongs into any off the previous classes. So we'll cover more right now, and with that you will be able to use Blazer quite probably, so that let's get started. 2. Web sockets: Hello. In this lecture I will show you how to establish a web socket. A pure web. Soccer going from sea shop to see shop that is reclined side blazer. See Shop to the service side. See Sharper in this case, a P I Dr Corey P I C. Sharp. Right. So there is no javascript involved? None at all. And ah, below example. We have had simply states with state off the socket. A k in this case is opened obviously. And then what happens in the server? We actually have a little list which stores the scent messages And then every few seconds it sends back a message basically stating how much or rather, how many messages were received. So you see, lost Checked at 47. 17 now. And ah, now 20 HOK it's every three seconds. Ah, leisure. Low test Best right. Let's send it. Okay, so we have a little debug going on. Let's just skip through that. It came like that and we've sent now. And as you can see, it has changed. A came it has changed. Now let's take a look at how the whole thing works. It's actually quite interesting. OK, So in the solution. Explorer in the solution Explorer, we have two projects to different projects. We have a web application, one which is the a P I project. And then we have blazer Ramp one, which is the Blazer client side. Now, for the Blazer client side, we only care about index dot razor on for the application. The ap on project we really care about started Don't sense. So if we go into that, if we go into that, you can see that we have Ah. Ah, quite a tricky arrangement. Hair OK, Basically, to establish those sockets you need to have in the a p. I use web sockets and then the actual handling comes in hair you have use. Okay, you have used like that and then you check if the web socket is open, okay? Or rather, it's Web socket requests for now. OK, we have We have to check for that and then we check for the party offices, but path, Then it will accept the socket, and therefore it will be opened. Now, the actual web socket we hold in the program don't see s okay, it's in the program dot CS If we go, right hair we programmed dot CS. Okay, we have the Web socket, which comes from system dot net dot web sockets dot Web socket we call WB and it's no by the fort. Now, these Web Saunders hunter difficult to set up, but they are very tricky to use of around many a normally is going on with them and more importantly, we're quite difficult to find in these little name spaces a case that we get back to the start of don't CS. Now you can see that we accept it and then we need to do a few things. So basically, we need to run a few tasks, but what you also need to do in this app use you need to not let it escape completely. So we create us often empty loop and it loops kind of prevents me escape while the state is open. Okay, if it closes, obviously it escapes and everything shuts down. But in the first task in the first starts curl, we off course that do while a k we do while And this is where we retrieve. But we retrieve the result. So we receive a sink. We receive Abita re. Okay, we receive my winery. We take it in Ryan hair in our little Botha. And then we added to the received messages list right here. We have received messages, list string, list of strings, and we simply get the text from this points from a bind array. And we added in the message is now for the sending off a message. We once again run a different task because obviously they wouldn't work together. Well, as we do have to can receive a response, we need to await for it all the time. And this would be having different right? Eso basically what we have here is we away for free 1000. Okay, milliseconds. That is over three seconds and then we send a message to the client. We send a message to a client seeing message received messages received, that is recount and lost. Checked a lot check toe meaning checked on the further With that, we add the type and then the true means the end of a message. If it's to the end of a message of we're still waiting for it. This is basically the service sign arrangement. There are many options to really choose from many ways to handle those different errors. This is s off a primitive way. But I'm giving you a great starting point from which you can expand and handle different errors. And you always it from things. Now, if we go to the index dot razor, which has with porn with actually interesting to us, right, we have our client, our web socket client and which is actually client web socket. So this one comes from system dot net web sockets client web socket. We call it C l Web socket, in this case, right? And we construct it. We just constructed as any normal variable just like that. Okay, with that, we have new message wearable, which is minded with the input. And then we also have received message display, which we display. This is the message matter gets displayed. Okay, so then how to receive it? This is a bit of a tricky part. Percival on initialize the think we need to actually make a connection. And to do that, he dio await CEO up socket. Okay. And use connect a sink in, connect a sink. You provide the u. R I Okay, you provide the your eye right hair, which is basically your domain name, your local host and the route of the s, which we declared in the start of dot CS But do notice, Do you notice? Very important, we have Ah w s. So it's not Http, It's not HCP s. It's w s s. So it's a different protocol, right? You have to use this. This is for secure socket layers. And if you don't have that, if it's not secure connection, you would do double U. S. Okay, so it's it's quite important to remember it's easy to miss what you would see the error quite clearly displayed in the consul. And then we have a cancellation token, which is none. We basically know. Have one now to receive one. To receive one, you need to run a task off course, right. You need to run a task and then we have ah wow lips that we are receiving while the connection is open. We are receiving. We are receiving receiving receiving that we dio by just like we have in the server receiving right. And then we have received message await and to receive it, you need to do receive a sink that is the Vita Ray. It goes into the by to rave a message and then we take protest And we put that into the received message displayed one thing to note. Of course, we have to use they Estate has changed. Otherwise nothing will really work. I came, so this is quite important to remember in that regard. Now you have seen these received message things and I'm not implementing them right now because it would kind of mess things up. But if we go into it received message like that, you can see that we have ah say, for example, close status. We have close status description. We have count. We have endorsed end of message. So it it basically describes in this case it describes where it's an end of message or we can still ah, wait for another message for another receivable To complete that message with four messages . You don't really need to worry about this stuff. It should work find just like Radha. This is more for kind of a larger arrangement again and then the closing status. You can actually send a close message and then receive myself a closing thing and handle the closing and the message. Type of message type we have two times for. Have a tax. Combine a re. Usually you'll use tax there. But again, I'm giving gives off basic stuff from which you can build on. Now the sending off it is quite simple as well. It's just like in the service side. Pretty much right. Or in the a p r. In this case, not a service. I really we have a wait a wait cl web socket, right? I'll Web socket. And then you send a sink and then use all the stuff that you've seen in the A P I part. Okay, we get the bites from the text. Then we declared a message type and we have a true and a message, right? It send a message and then we have cancellation token, which we do not have. So we do none. And that's it. That's how it works. It has been running for quite a while, right? Okay, well, we have it running. Right. Have this is V a p I part running now. This would be the client side running right half. Send another message. It d bugs. Okay, it it kind of brace at this point and you can see that we receive the bind services. Our Botha, it doesn't take full Bata. We received the bites. So just like that, we can continue right? And it will give us. You see, we now have two messages. So this is how it works. This is how it runs. Just don't forget that you have Teoh first run the A P I project when Run d client side project. Obviously, Phoebe, I won't be running. It will have nothing to connect with or simply run the client side. Project one Launch VP I project and then refresh recline side project. And before that said we will conclude with a lecture. 3. Background tasks: Hello In this lecture will take a look at some background task running, running of them, initiating them and all that stuff basically the most important. But you have really seen already in the cause. But I just do want to highlight, not because it is very, very important. And you will actually be using this. So in our example, right hair, we just have ah, toying A little thing. Basically, we have, Ah, random number changing every few seconds or every few milliseconds. Rather. Okay, you can see it kind of just changes in the bank round and brings it up to the foreground. Displays it, and that's it. Okay, so let's take a look at how it actually works. And we are only looking at the index dot Raise the right hand. Nothing fancy about match. I came on. We have a string called for display. We displayed when hair we added some foreign size to make it a little bit larger. Okay, And then we have this background task. So what we have here is off. Indefinite loop said too true. It will run forever. Basically. And then we have a weight. So it waits one second and it generates so constructs a new random. And from there it generates a new random number. Okay, so it would be a very a useless example if it wasn't blazer. If you didn't have to display it into the foreground into that You I Fred. OK, so what happens? This This is a background task and the reason it is a background talks because we do not await it. We just kind of let it run in the background and that set So one should set that it would not change unless you had this. You see, we have ah, state has changed. So we're sign it. And on a normal method, uh, it would change our way of onedio. You would need any additional work. But if you have it in the background you need to initiate with state has changed, otherwise nothing will change. So when you work of these background toss, if something is in displaying, even though it should, this is probably the issue to look at first. Okay, So with all that said, we will conclude with a lecture 4. Execute JavaScript: Hello, Invest lecture. I want to show you how to run JavaScript from C shop, how to access some chalice grip function and executed from C sharp and then get a return from it as well. Now, in this low example, we have, ah, some basic stuff. Basically some things you just can't access flu blazer. And one of those things would be the storage that is local storage session storage again. So those things you cannot access, so it is a good way to actually access it through this kind of an interrupt feature, okay? And then you can also run your custom GS code. Perhaps you have some old code. You're integrating it with blazers too complex. Or perhaps you have a library that you want to use. That is E G s library, chalice, script, library. So if I click on that, it runs, it returns the number, show your function, and then we have insert into storage. So we insert something right, and then we retrieve you. See, we have test value. So this is how the example works. It z quite simple. You really only need to see the code. Okay. And, ah, the code First of all, I have to explain the structure. Okay, so we go Teoh Ah, Blazer app And then we g o to w w route. This is where you want to have your javascript files. And this is where you want to have your CSS files as well. Like a and W W route. Now, this is our Js file That came. We have our Js file and the way you declare it, you cannot did in Reza. You cannot do it in Daughtry's a file you need Teoh can declare it. Ah Fatchett Rather in the html file in the initial HTML file. Right hair. You see, we have ah, script. Does Gs filed or Gs as she saw. It works perfectly now for the service side. If you have to do something like this, you would declare it in the sea as dot html file in that host file. In that initial file, that's pretty much a theme thing, right? And the actual file. You see, what we have has a bit of a structure going on. First of all, we wrap everything into this variable test G s Okay, So you kind of have this pre defined name space that we wrap it in this test, she s and then we have our function name. We have test function, and then we have couple of arguments, okay? Can provide arguments. And then we taken a return. You don't actually have to take in a return. You can execute avoider. Okay, so you don't have to do that. You don't have to provide arguments about I do want to show you all the possibilities that exist. Now, if we go to the index doc razor. Okay, First of all, we have the first method, right? Run, test function now for anything to work in terms of gs JavaScript interactions. We need this injection. We inject i j s run time, and in this case, we call it J s never go down a bit to bottom. Right Like that. We have run. We have run test function. Okay, We have run test function, and then we have double, which is displacing for display one. This is the result. As you saw, if you didn't see that clearly we have couple of arguments and then we simply add them together in this the javascript function and we return them now in the method, we do a wait and from Maggie as injection we use in book a sink method in book a sink. Okay. And then you declare the return type. You too clever. Return time became, and then it gets returned and assigned. Now, what you need to provide is basically the name off a function, or rather, the full name space for the whole function. Okay? You don't write in a full function, as you can see, but you provide arguments in this list off arguments, so you don't have any parenthesis is nothing like that. Okay, just provide them in. In kind of lest like that you can have strings. You can have Ah, numbers. But do you be careful? Because JavaScript, of course, as you probably know, has a rather fish away off handling different types. Okay, so we can invoke a sink, declare a type, or we can simply do an empty or avoid So you would do invoke void, a sink, and that would have no return. Basically. Now we won't do that, but we can take a look at another option. Ah, these soft native ah, functions of and javascript offers such a set item for local storage. You don't have to define it in any way at all. You can simply just declare them on. Run them. Okay, so in this case, we have from local storage set item. There's basically inserts the new value. Okay, so we have Ah, the key for that. Thou and the value test values there, insert into storage. You sold it, but in action. And then the 2nd 1 very much the same thing we have, ah, local storage. Get item. In this case, we're only provide one bearable right? And that is vow. So we retrieve it. And right here we assign a foreign display to So this is basically how it works again. It's it's quite easy to use. There's no real trickery and tricks into that. Just a straightforward way to access javascript. And before that said we will conclude this election