使用ASP.NET MVC Web SignalR 建構單身聊天室(一)

前言：本系列的頭章，想要帶大家一起學習Web SignalR，那它是什麼呢？ASP .NET SignalR 是一個ASP .NET 下的類庫，可以在ASP .NET 的Web項目中實作實時通信。什麼是實時通信的Web呢？就是讓用戶端（Web頁面）和伺服器端可以互相通知消息及調用方法，當然這是實時操作的。

WebSockets是HTML5提供的新的API，可以在Web網頁與伺服器端間建立Socket連接配接，當WebSockets可用時（即浏覽器支援Html5）SignalR使用WebSockets，當不支援時SignalR将使用其它技術來保證達到相同效果。

SignalR當然也提供了非常簡單易用的高階API，使伺服器端可以單個或批量調用用戶端上的JavaScript函數，并且非常友善地進行連接配接管理，例如用戶端連接配接到伺服器端，或斷開連接配接，用戶端分組，以及用戶端授權，使用SignalR都非常容易實作。

1.、使用Visual Studio Community 2017建立一個Web項目，選擇空白模闆。

2.工具=>nuget工具包=>控制台

安裝指令

Install-Package Microsoft.AspNet.SignalR

3.添加Startup.cs。

代碼如下：

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalR_Chat.Startup))]

namespace SignalR_Chat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

4、添加一個Hub。（最好建立一個Hub檔案）

using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SignalR_Chat.Models;

namespace SignalR_Chat.Hubs
{
    [HubName("hub")]
    public class ChatHub : Hub
    {
        private static int _rating;
        public void Rate()
        {
            _rating += 1;
            Clients.All.rateUpdate(_rating);
        }
    }
}

　5.用戶端頁面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rating</title>
</head>
<body>
    <h2>Please rate</h2>
    <input type="button" id="vote" value="Good (0)" />

    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>

    <script type="text/javascript">
        $(function () {
            var con = $.hubConnection();
             
            var hub = con.createHubProxy("rateHub");
            
            hub.on('rateUpdate', function (count) {
                $('#vote').val("Good (" + count + ")");
            });

            con.start().done(function () {
                $('#vote').click(function () {
                    hub.invoke("Rate");
                });
            });
        });
    </script>
</body>
</html>

　結語：con建立了hub連接配接，通過這個連接配接去找到rateHub的執行個體,hub.on的事件是針對C#中寫的事件，因為C#中已經寫好了用戶端的方法，是以我們要針對這個方法去改dom什麼的，那start是什麼呢？它是監聽連接配接建立之後幹的事情，也就是監聽事件，通過invoke可以調用伺服器發送過來的方法，才可以調用伺服器代碼。

6.效果圖

7.問題

這一下子問題來了，其他用戶端進來的時候能不能不是初始化值啊？

隻要在Hub中添加一個線程，簡單的監聽下就OK了

public override Task OnConnected()
        {
            Clients.Caller.rateUpdate(_rating);
            return base.OnConnected();
        }

8.開頭

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .charDiv {
            width: 380px;
            background-color: green;
            height: 600px;
        }
    </style>
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="/signalr/hubs"></script>
    <script type="text/javascript">
        var chat = $.connection.chathub;
        chat.client.SentMsgToPages = function (name, message) {
            var dom = document.createElement("p");
            dom.innerHTML = name + ":" + message + Date.now;
            $(".charDiv").append(dom);
        };
        $(function () {
            $.connection.hub.start().done(function () {
                    $("#send").click(function () {
                        chat.server.send(xx,xxx);
                    })
                }
            )
        })
    </script>
</head>
<body>
    <div class="charDiv">
        <!--内容-->

    </div>
    <div>
        <input type="text" placeholder="請輸入您的名字" />
        <input type="text" /><button id="send">發送</button>
    </div>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace SignalRDemo
{
    [HubName("chathub")]
    public class RateHub : Hub
    {
        public void Send(string name, string message)
        {
            //send message to all pages
            Clients.All.SentMsgToPages(name, message);
        }
    }
}