# .Net Framework SignalR 心得 (Server)

> .Net Framework 4.8.1
> vs 2022

參考網址:
* [教學課程：使用 SignalR 2 和 MVC 5 進行即時聊天](https://learn.microsoft.com/zh-tw/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc)
* [ASP.NET SignalR 中樞 API 指南 - JavaScript 用戶端](https://learn.microsoft.com/zh-tw/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client)

## :memo: 空專案建立

選擇 .Net Framework MVC 4.8.1 範本建立

### Step 1: 新增 Startup 類別

Startup 類別建議從新增項目內的 OWIN 類別新增

新增類別的時候會一併新增 Owin 相關的 Nuget 工具

記得在裡面 MapSignalR

### Step 2: 新增 SignalR Hub 類別

這邊建議一樣從新增項目內新增

新增的同時會一併安裝 SignalR 的相關工具

接著在裡面新增一個 HubMethod，同時對 Hub、Method 加上標籤

[HubName("ChartHub")]
public class ChatHub : Hub
{
    public void Hello()
    {
        Clients.All.hello();
    }

    [HubMethodName("Send")]
    public void Send(string name, string message)
    {
        // Call the addNewMessageToPage method to update clients.
        Clients.All.addNewMessageToPage(name, message);
    }
}

### Step 3: Client 端的撰寫

在 index.html 裡面仔入 SignalR js 及 Client 端程式

// 根據前面安裝的 SingnalR 版本
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>

以下是按照官方的教學，並稍微調整

<script>
document.addEventListener("DOMContentLoaded", function () {

  // Reference the auto-generated proxy for the hub.

  var connection = $.hubConnection();
  var chat = connection.createHubProxy('ChartHub');

  // Create a function that the hub can call back to display messages.
  chat.on("addNewMessageToPage", function (name, message) {
  	// Add the message to the page.
  	var discussion = document.getElementById('discussion');
  	var listItem = document.createElement('li');
  	listItem.innerHTML = '<strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message);
  	discussion.appendChild(listItem);
  });

  // Get the user name and store it to prepend to messages.
  var displayName = prompt('Enter your name:', '');

  // Set initial focus to message input box.
  var messageInput = document.getElementById('message');
  messageInput.focus();

  // Start the connection.
  connection.start().done(function () {
  	document.getElementById('sendmessage').addEventListener('click', function () {
  		// Call the Send method on the hub.
  		chat.invoke("send", displayName, messageInput.value);
  		// Clear text box and reset focus for the next comment.
  		messageInput.value = '';
  		messageInput.focus();
  	});
  }).catch(function (err) {
  	return console.error(err.toString());
  });

  // This optional function html-encodes messages for display on the page.
  function htmlEncode(value) {
  	var encodedValue = document.createElement('div');
  	encodedValue.innerText = value;
  	return encodedValue.innerHTML;
  }
});

在官方教學裡面有使用 SignalR Proxy 的方式。但與後面.Net Core 後面的版本會有一點混淆，還是建議習慣無 Proxy 的寫法

程式碼: [GitHub](https://github.com/chinggo/NetFrameworkSignalRDemo)