ASP.NET Core - How to use same connection in different cshtml files

Question

I have a script block in my Layout cshtml file. In this script block, I am opening a connection for my signalR. I also have another cshtml file, which is "IndexNew". This file is created by using Layout.cshtml. As you can see I already created a connection for my signalR in _Layout. I want to use the same connection without opening again in IndexNew (as you can see I commented out the connection opening for preventing a double connection). How can I do this?

I tought about creating a new js file (like signalRconnection.js) and write the connection opening and use this same code for differenet cshmtl files. But it is not gonna work, it will still create two different connection when I import it to both of the files.

"I just need one connection, I am trying to use the connection in IndexNew which I created in Layout"

_Layout.cshtml

some of the scirpt part of Layout

 <script>
        $(document).ready(function () {

            setInterval(makeAjaxCall, 600000)

            //signalR connection
            const connection = new signalR.HubConnectionBuilder()
                .withUrl("/auctionHub")
                .build();

            connection.start().then(function () {
                console.log("Bağlantı başlatıldı.");
            }).catch(function (err) {
            });

            connection.on("connected", function () {
                console.log("Bağlandı");
            });

            //connection.on("addAuctionMember", function (count) {
            //    $("#lblTotalMember").text(count);
            //});

            connection.on("ReceiveBidLayout", function (acutionId, propertyCode) {
                $("#auctionId").text(acutionId);
                $("#propertyCode").text(propertyCode);
            });

        });
.
.
.
.goes on 

IndexNew.cshtml

@model DetailPageViewModel
@{
    ViewData["Title"] = Remax.Core.Utilities.CommonFunctions.StripHTML(Model.Title);
    ViewData["MetaDescription"] = String.IsNullOrEmpty(Model.Description) ? "" : Remax.Core.Utilities.CommonFunctions.StripHTML(Model.Description).Replace("\n", "").Replace("\r", "");
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewData["className"] = "subpages detail";
.
.
.goes on
//I show that part to make you understand better, IndexNew uses _Layout
}

script block of the IndexNew

    <script>
        var input = document.getElementById("inputNumber");
        var button = document.getElementById("buttonNumber");
        var validate_error = document.querySelector(".validate");

        var maxBid = 0;

        $(document).ready(function () {

            //const connection = new signalR.HubConnectionBuilder()
            //    .withUrl("/auctionHub")
            //    .build();

            //connection.start().then(function () {
            //    console.log("Bağlantı başlatıldı.");
            //}).catch(function (err) {
            //});

            connection.on("connected", function () {
                console.log("Bağlandı");
            });

            connection.on("addAuctionMember"), function (count) {
                $("#lblTotalMember").text(count);
            });

            connection.on("ReceiveBid", function (result) {
                $("#lblTotalMember").text(result.totalMember);
                $("#labelTotalBid").text(result.totalBidAmount);
                $("#lblMaxBid").text(result.lastBid);
                document.getElementById("hMaxBid").innerHTML = result.lastBid;
                maxBid = result.lastBid;

            });
.
.
.
goes on

Answer 1

It's a new page, it reloads fully and entirely, so the old connection will close and another will open. That's how SSR sites work. Nothing short of turning your application into an SPA, fully or partially, will help.