SignalR 2.0 入門實作：建立即時聊天室應用程式

本教學翻譯自微軟官方 Getting Started with SignalR 2.0，示範建立瀏覽器即時聊天室，涵蓋 SignalR 核心開發流程。

專案建立步驟

1. VS2013 建立空白 ASP.NET Web 應用程式
2. NuGet 安裝 Microsoft.AspNet.SignalR 套件
3. 建立 Hub 類別（ChatHub）處理訊息廣播
4. 建立 OWIN 啟動類別（Startup）對應 SignalR 路由
5. 建立 HTML 頁面引用 SignalR jQuery 庫，實作發送/接收訊息

核心程式碼結構

ChatHub.cs - 伺服器端中樞

public class ChatHub : Hub {
    public void Send(string name, string message) {
        Clients.All.broadcastMessage(name, message);
    }
}

Startup.cs - OWIN 啟動設定

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

HTML 頁面 - 用戶端

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="signalr/hubs"></script>
<script>
    $(function () {
        var chat = $.connection.chatHub;
        chat.client.broadcastMessage = function (name, message) {
            $('#messages').append('<li><strong>' + name + '</strong>: ' + message + '</li>');
        };
        $('#sendBtn').click(function () {
            chat.server.send($('#name').val(), $('#message').val());
        });
        $.connection.hub.start().done(function () {
            console.log('SignalR connected');
        });
    });
</script>

適用場景

• 社交應用、多使用者線上遊戲、商務協作
• 儀表板即時更新、新聞/氣象/金融即時資訊
• 作業進度即時回報、協同編輯文件

MVC 5 專案請參考 Getting Started with SignalR 2.0 and MVC 5。