Why Client method called for 4 times in siganlR?

Question

I am beignner in signalR core and i am trying to learn it . i follow this video step by step and every thing working fine except Client method called for 4 times in siganlR ?

result :

Hub :

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace signalR
{
    public class Chat:Hub
    {
        public async  Task SendMessage(string user,string message)
        {
            await Clients.All.SendAsync("ForwardToClients", user,message);
        }
    }
}

Javascript :

var connection = new signalR.HubConnectionBuilder().withUrl("/chat").configureLogging(signalR.LogLevel.Information).build();
connection.on("ForwardToClients", (user, message) => {
    const encoding = user + "Says:" + message;
    const li = document.createElement("li");
    li.textContent = encoding;
    document.getElementById("messagesList").appendChild(li);
});

connection.start().catch(er => console.log(er.toString()));
document.getElementById("sendMessage").addEventListener("click", event => {
    const user = document.getElementById("userInput").value;
    const message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(er => console.log(er.toString()));    
});

please can anyone help me ? !