Setup realtime chat application with SignalR and ASP.NET

Tram Ho

Today I would like to introduce to you the current popular realtime chat applications such as messenger, zalo bla bla. The result when the setup is completed, the code will look like this! Group, individual, send photos ….

To achieve the results as shown in the picture, you calmly follow the steps below! Download:

I. Development environment

Tools: Visual Studio, Microsoft SQL Server Management Studio 18

Framework: ASP.NET MVC 5

Library: SignaIR 2.2.0, library supporting bindling knockoutjs 3.4.2

II. Setting

  1. Environment, tools1.1 SQL Server 2018: Link

    1.2 SQL Server Management Studio (SSMS): Link

    1.3 Installing Visual Studio: Link

  2. Create open database Open SQL Server Management Studio (SSMS) create a new database named: chatrealtime
  3. Open sourcecode with Visual Studio and build Open sourcecode by opening Project from Visual Studio, then select the Chat.sln file in sourcecode ** Note: Clone sourccode in the master branch to be the most stable!
  4. Add database Open SQL Server Management Studio:Create a new database named: chatrealtime Open sourcecode with Visual Studio:

    Create connection with local database by changing the Web.config file: Data Source = SQL Server Initial Catalog Name = Database Name => chatrealtime After successfully running the update-database update command

  5. Run the projectRight-click the project’s Solution in Visual Studio, select Build Solution
  6. Run the project and useIn Visual Studio, press Ctrl + F5 to run III. How to use the features
  7. Create AccountNote: Create an account with passwords with uppercase, lowercase letters, numbers, special characters and over 8 characters.

    Note: Create 2 accounts and log in on 2 different browsers or anonymously to see the status of realtime

  8. Create, edit groups with realtime updatesCreate a group
    Click + in the upper left to see the interface to create a group Name the group and add members. Edit group – only an administrator can create a group

    Click the edit icon at the top when you open the Make changes group and click Update

  9. Updating account online status When accounts are logged in, status updates are available at LIST FRIENDS on the interface.
  10. Realtime messaging in groups, individualsIn groups

    Clicking on a group in LIST ROOMS will open the chat screen Enter the message and press Enter Personal

    Clicking on a group in LIST FRIENDS will open the chat screen Click the message and press Enter

  11. Pin a message Open an individual or group chat window Click the pin icon next to each message Click the pinned message and you’ll see the message window scroll itself to the position where the message is pinned

Hopefully, you have succeeded and can demo the application. If you have any difficulties or problems, you can comment below for further improvement!

Share the news now

Source : Viblo