ex1 簡易聊天室

http://amani.test.ntpc.edu.tw/signalr/ex/ex1.html

本節重點：
* Server端呼叫所有Client端：Clients.All
  • 開啟Visual Studio 2013，按「檔案/新增/網站」，選Visual C#/ASP.NET空網站，並修改專案名稱

  • 專案名稱右鍵/管理NuGet套件，右上搜尋框輸入「signalr」後，選「Microsoft ASP.NET SignalR」按「安裝」

Server端程式碼

【ChatHub.cs】

  • 專案名稱/右鍵/加入/加入新項目，選擇「SignalR Hub類別(v2)」，類別名稱輸入「ChatHub」

  • 將hello()函式改成：
    public void Send(string message)
{
  Clients.All.show(message);
}

【Startup.cs】

  • 專案名稱/右鍵/加入/加入新項目，選擇「OWIN啟動類別」，類別名稱輸入「Startup.cs」

  • 程式碼改成：
    public class Startup
{
  public void Configuration(IAppBuilder app)
  {
      app.MapSignalR();
  }
}

Client端程式碼

Server端的Hub建立好之後，接著我們就來寫Client端的網頁，來透過Hub達到即時同步的效果：

【index.html】

  • 專案名稱右鍵/加入/加入新項目，選「HTML網頁」，檔名輸入「index.html」，程式碼如下：
<head>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="signalR/hubs"></script>
</head>
<body>
    <script>
        var chat = $.connection.chatHub;//chatHub小寫

        //signalR啟動完成後，要執行的動作
        $.connection.hub.start().done(function () {
            $('#btnSend').click(function () {
                //Client端呼叫Server端
                chat.server.send($('#txtMsg').val());//send要小寫
            });
        });

        //Client端供Server端呼叫的方法
        chat.client.show = function (message) {
            $('#chatRoom').append('<li>' + message + '</li>');
        };

    </script>

    <input id="txtMsg" type="text" />
    <input id="btnSend" type="button" value="傳送" />
    <ul id="chatRoom"></ul>
</body>
</html>

  • index.html右鍵/在瀏覽器中檢視

  • 開兩個視窗，就可以開始聊天了

  • 簡單的3支程式，就能完成Real-Time Web的設計，Cool吧！而Client和Server端程式間的呼叫流程如下：

results matching ""

    No results matching ""