.Net Foundation Code Conversations, 29 Jun 2017

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build a chat app with SignalR Core - Mikael Mengistu

Description

In this video Mikael Mengistu shows us how to build a simple chat app with SignalR Core.

A

Hi I'm Ranma Giga and welcome back to code conversations and I'm here with Macaulay.

B

A

We're continuing our conversation on signal R and in our previous video. We looked at how we can bring signal art into your application using NuGet packages in this video we're going to actually start building. Our first chat app yeah.

B

So I'm going to show you how to build a simple chat, app using signal R. This.

A

Is gonna be really cool, so we're going to switch over to your computer and you can we can get started.

B

So we're going to start out by writing our server code. Here, you can see we're working in a class called chat hub which derives from our signal. Our concept of a hub, the hub is sort of the basic programming model. It's an abstraction over a persistent connection between your client and your server, and it basically is what allows you to send the real-time updates between your client and server and which allows you to really you get that real-time functionality. Okay,.

A

So the hub the hub handles that goal for us back.

B

And forth: okay.

A

B

What we're going to do here is we're going to call clients Oh.

B

Invoke async and what this line is doing is it's basically saying when a client calls the send method on this chat hub and passes in the message that they want to pass into the chat, we're telling all of the clients to invoke their send method with the message parameter that you've just sent to the hub, and so what that is basically going to do is as you'll see when we actually write our client code is we're going to define a send method on the client and it'll get passed in this message that it got from whatever client sent it and we'll be able to handle that in our chat application, and that.

A

Was all done in one line of code yeah.

B

I mean just the server bit to actually pass that message across to all the clients and tell them hey. We have a message handle it with your sign method. That's.

A

Pretty simple, and for newbies that is not intimidating at all. Oh yeah.

B

It's nice and clean, and that's sort of the beauty of sigmar is just how easy it is to use okay.

A

So we rid of some server code, so I presume the next step is kind of adding it into our middleware. So we can start using it. Yeah.

B

Absolutely, let's save this file and move to our startups. Yes, so let's go ahead and add it to our services.

C

B

We have to do is actually map our chat hub to an endpoint okay, so.

C

B

Pub and then will pass in the chat hub again and we'll just configure it to map to the end. Point chat all.

A

B

So that's all we have to do there and last but not least, let's go ahead and write our client code, cool.

A

So what do we need to put in there.

B

So here, I've already written this client code, I'm just going to paste it into these script tags and what's happening. First, is we're establishing our hub connection at the chat endpoint like we just configured and then, if you remember from the hub we're telling our client to invoke their send method. So we need a send method on our client, so we're sending hub connection on send execute this function with the parameter message. So all we're going to do is create a list element. Give it the inner text of the message that we've just received yeah.

C

B

Then add that to our list you are, and once that's configured all we have to do is tell our hub connection to begin.

C

B

From then on, it's ready to receive indications from the server and also create its own invitations to the server. So what we do here is we basically, in our form, just add an event listener to the submit event, and we just pull the text from our forum UI and we just invoke send on the server and that will invoke sign on all the clients and I'll get the message that we just passed in now: let's go ahead and run the application, so that might run.

A

That is your chat, application running yeah.

B

So this is the application hosted at locals, 5001 browser chrome here on our left and then on edge on our right. And so, if we go ahead and we can say from chrome and we hit, sin will get it instantly on both browsers without having to refresh- and we can say hello from edge here and they can go ahead. Go.

A

Back and forth and forth, you can be like thanks for coming to code conversations and goes back and forth and back and forth. So this is a really sweet, demo and I'm. Presuming that everyone who is watching this at home, we probably want to know how they can have a look at what the team's doing. Where can they go to learn more yeah.

B

So all of our work is open source and on github. So if you just go to github.com slash SP met slashed, ignore you can go ahead and see literally everything we're working on issues, pull requests and you can get. You can stay up to date with how still our core is going. Oh yeah.

A

Also, some samples that people who take advantage of as well, oh.

B

Yeah absolutely oh, this.

A

Is really cool? Alright, so I'm quickly that you came in hell, yeah.

B

Thank you so much for having me and I'm.

A

Really looking forward to using Segel are more and if people build anything missing or please, they should reach out to you. Your Twitter handle be right at the bottom. I want to know what you're doing and we're always excited to hear from you. So thank you so much for coming and thank you. Alright see you next time.