In this blog am going to take you through step by step process to create a ChatApplication using SignalR Library. You guys might have come across many applications where you can join a chat room and then send messages to different people in that room. We will do the same using SignalR package. In the process of doing it we will also learn how the SignalR works.Though this blog is mainly focused on learning SignalR, it will be beneficial to know the basics.Basics Required
So What is SignalR Ever wondered how chat applications work? How do people chat with each other (either in a group or a private chat with one person). You might be aware of client server architecture and you may get that this approach won’t work in chat room applications. So, lets take a step back and understand what is client server architecture and how it is different from chat applications In Client Server architecture, Client i.e the Browser(Chrome, Internet Explorer etc) makes a request for a particular Resource on the Web. Let’s take an eg to understand better. Suppose there is a shopping website which sells “Shoes” and “Clothes”. Lets also assume that www.abc.com/shoes is the endpoint for shoes and in in www.abc.com/clothes is the endpoint for clothes Consider there is a User called Bob and he types in www.abc.com/shoes on the browser. The request goes to the Server and the Server processes the request and returns all the shoes on their website. Bob sees all the shoes he wanted to see. Now he decides to see all clothes on abc website and therefore enters www.abc.com/clothes and this time Server shows all results of clothes to Bob. Bob is happy 😊.
Now as you may be aware HTTP calls are stateless. What that means is that Server doesn’t know that it was the same User Bob who made a request to Display all Clothes and Shoes in the store .As far as Server is concerned, it just got the request from the Client and it responded by serving it. If we need the server to remember the Client, then we either need to use HTTP Cookies, maintain Server Side Sessions,hidden variable,URL-rewritring etc. Going to depth of these is out of scope of this blog. Now If you go back to eg of Bob, it was Bob/Client who was requesting the Server for details everytime and not the other way around. If you wait a second and absorb above details and give a thought about it,you can find that above approach is not a efficient way to develop any chat applications.In any chat applications,2 users (private chat) or more Users(group chat) are connected to each other and they chat. Each of the User involved in the chat , expect to see the other person’s message instantly. It’s not like User will keep on hitting (refresh/f5) to see whether the other guy part of the chat typed any message etc.This is where Push Architecture comes into picture. Push architecture means that it is the server who pushes the message to the clients (registered)/browser . So In the case of chat application, the moment user types a message, the message goes to the server and the server then broadcasts the message to all the clients. SignalR Library helps us do exactly above
In order to understand better, Lets take an eg. Lets assume User 1,User 2,User 3 and User 4 are all connected to a chat room .Now say User 2 types a message. Server receives it and send it all the other 3 clients simultaneously. The same is depicted in the diagram.( signalR1)
Now when I said "Push",there are various varieties of "Push" .Eg are Periodic Polling, Long Polling,ForeverFrame,SSE(Server Sent Events) ,Web Sockets In this blog, am showing the Hubs programming modal though Persistent Connections model is also available but is less popular.
Lets do a small egample to get a better handle of the same. I have shared the whole source code in the git repository. The git URL is Source Code Link Above source code is to create a ChatRoom for Sports. People based on the interest,can join any room they wish to and chat with people of common interest.Below are the steps to create this application. It incldues all steps i followed,right from scratch to create the project. I have also included a section called "common errors" and fixes to the errorsmay come handy if you come across same issues.
Demo link is shared below.In the video, I use "Chrome" and "Firefox" just to mimic 2 different users since I have hosted my application locally.(You can also test on one browser by launching them in incognito mode).In real time, it can be any number of users using any browser.
Lets understand the scenario.Assume, there are 2 people(lets call them Bob and Tim ) decide to chat on cricket and join a chat room.
1)Bob,the first User,goes to the website using Firefox and clicks on "Cricket Chat Room" and then enters the name in the popup prompted and click on "Join Room".
2)James,the other User does the same above using Chrome.
After joining room successfully,both of them can share any number of messages in the room .In the demo, you can see that when a user types in message the other gets the message instantly.If any other person joins the room, he too can see and send the messages like these 2 people.This whole scenario is demonstrated in the video.