Understanding Requirements

So , the first step always is to understand the requirements. The thing  which we are trying to figure out is basically how to create real time chat in your application. So for that part , we will need .Net core api solution which we will use for back end. Then we need vue js application that will serve as interface for initiating the chat. 

SignalR in .Net core

So, first of all you have to install SignalR in your .Net core application. Go to your nugget packages and install Microsoft.AspNetCore.SignalR

Microsoft.AspNetCore.SignalR

after installing this nugget package you have to goto your startup.cs and add   services.AddSignalR(); in ConfigureServices method.

  services.AddSignalR();

Now add this in your Configure method in startup.cs

  app.UseCors(options => options.WithOrigins("http://localhost:8080").AllowAnyMethod()
                           .AllowAnyHeader()
                           .AllowCredentials());     

app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapHub<ChatHub>("/chatHub");
            });

After adding these we will have to create a new class named ChatHub as we have mentioned that in previous code. So take a new class and the we need this code

public class ChatHub : Hub
    {
      
        public ChatHub()
        {
         

        }
        public async Task SendMessage(string message)
        {
                    await Clients.All.SendAsync("ReceiveMessage", message);
            
        }

    }

You will need to add reference to SignalR using Microsoft.AspNetCore.SignalR; in the class.

using Microsoft.AspNetCore.SignalR;

This send Message method will act as hub whenever any message will be sent. After this run your .Net core application and now we will go to our  user interface part which will be in vue.js.

Setting Up SignalR in Vue.js

So, for setting up SignalR in vue.js . We have to install npm package. Go to your terminal and execute

npm i @aspnet/signalr

After, this package is installed we have to go to the component and import it using

import * as signalR from "@aspnet/signalr";

After, this now we have to add SignalR connection and implement ReceiveMessage handler which will be called whenever any message is received by signalR port and also a SendMessage handler which will actually send message to signalR.

data() {
    return {
 
      userMessage: "",
      connection: "",
    
    };
  },

 this.connection = new signalR.HubConnectionBuilder()
        .withUrl(process.env.VUE_APP_URL +"/chatHub")
        .configureLogging(signalR.LogLevel.Information)
        .build();
      
       console.log(this.connection)
      this.connection.start().catch(function (err) {
        return console.error(err.toSting());
      });

So, this will be used for setting up signalR connection. So you have to use this whenever you want to connect to signalR on your component. The url with ChatHub must be the api url where we had created ChatHub class earlier.

Now , we have to implement send Message handler . So we will add

  this.connection
          .invoke(
            "SendMessage",
           this.userMessage,
           
          )
          .catch(function (err) {
            return console.error(err.toString());
          });

You have to add this line to the method where you are sending your message . It could be in the method you call when clicking on Send Message button. We have passed user message to that.

Now whenever Send Message is done, we also need to bind Receive Message handler to show the message to other user. For that we have to add

this.connection.on("ReceiveMessage", (tr, data) => {
       /*Do whatever you want to show the message */
      });

This, will be triggered whenever you will send any message. You can receive the message here and show to other user.So, this is how we can implement signarR in .Net core with Vue.js. You can try this out and if you have any issue you can comment on the article.