[MUSIC]
>> Let's quickly show
you how you can turn this into a full-blown chat.
This is another function app,
but its got the same negotiate endpoints.
Nothing special there.
I think that even the "Send Message" is about the same.
It does a little bit more because if
this is running in Static Web Apps.
It's actually going to parse the headers to figure
out who the actual caller is, the user detail.
They can't spoof that. They're logged in.
I'm pulling out their user detail and
I'm actually sending that as their sender.
Basically, sending the sender to that username.
You are securely sending these messages.
When you see if the server saying this message came from Anthony,
it really did come from Anthony.
But aside from that, it's really the same thing.
Remember the target and arguments thing?
Doing exactly the same thing as before.
Then there's actually one more thing that we're doing,
is that in my function .JSON,
I have an output binding for table storage as well.
So I'm saving these messages as well.
That's done by this one line of code.
This line of code and this line of code,
those saves the message to storage or to your table,
as well as broadcast the message everywhere.
It's really easy to use.
Then like I was talking about before,
when you first connect,
you need to get the message history.
I have an HTTP trigger table basically saying,
give me the latest 50 messages.
Then the code is really one line of code.
I'm going to return all those messages back to the browser.
Really, I think we moved down maybe 20,
30 lines of code in the server side.
That's going to be everything that you need for this app to run.
Then I'll show you the HTML as well.
This is using View.
Just a lot of HTML stuff but really down here,
you'll recognize the connection stuff.
You'll recognize me setting up a listener for
the new message which is [inaudible]
I'm posting my endpoint.
Authenticated user, don't worry about that.
A little messages history.
When you first start up,
we're going to make a get to the messages endpoint.
That's going to return messages in the table.
That's really all of these.
I guess it's a standard View App.
Then if I go to chat on anthonychu.com,
I might already be logged in.
Let's say, I'm logged out.
Let me logout.
>> The logout that you're using,
is that something that's built in this Static Web Apps or
you're using the Graph Toolkit?
>> No. This is actually are completed from Static Web Apps.
I didn't really have to do anything.
When I click this button, I'm actually,
literally just redirecting to the login,
kind of like endpoint for Static Web Apps.
>> Okay.
>> Because I'm already logged in the GitHub
it just going to bounce me right back.
You can see that I am logged in.
I tested this four months ago.
I hope it still works, testing. You can see it works.
Then if I copy this and open up a new browser,
paste that in, back over here.
Say hi, you'd see both browsers good.
Really easy to do and it works.
That's how you build a real-world app with it.
It's fairly straightforward to
try to deploy this to the Static Web Apps.
>> Okay. Then I could go and sign-in with my GitHub.
Of course, I'm going to need to MFA real quick here.
>> I'm excited. I'm waiting.
>> I'm going to authorize it.
Grant consent.
Anthony now owns half of everything that was mine.
>> Yeah. It worked.
>> There it is. Very cool.
>> Nice. That is awesome.
I wasn't sure if that's going to work.
I don't know why. Maybe it's because I wrote it,
so who knows what's going to happen.
>> I had full faith in you.