制作婚礼现场即时留言版- Azure SignalR Service I

第12 届iT邦帮忙铁人赛系列文章 (Day28)

SignalR是实现即时通讯的框架，如下图，在Server Hub宣告要给client端呼叫的方法，能传送即时讯息给已连线的使用者

https://www.pubnub.com/learn/glossary/what-is-signalr/

而透过Azure SignalR 服务，大大简化使用门槛，很简单就能建立一个服务，且享有云端带来的高拓展性，这篇文章会step by step 实作以下内容

[ ] 建立 Azure SignalR 服务
[ ] 建立 SignalR Server Hub
[ ] 建立 HTML Client 即时呈现讯息
[ ] 建立 .NET Console App 来发送讯息

建立 Azure SignalR 服务

登入Azure，进入 https://portal.azure.com/#create/Microsoft.SignalRGalleryPackage 新增服务

建完後，到key的选单，我们等等需要这个 Connection String

建立 SignalR Server Hub

打开 Web Api 专案的 .csproj，加入以下程序码

<ItemGroup>

<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />

<DotNetCliToolReference Include="Microsoft.Extensions.SecretManager.Tools" Version="2.0.0" />

</ItemGroup>

用 Nuget 安装 Microsoft.Azure.SignalR

在 Web Api 专案案右键，建立管理使用者密码，

建立 Azure:SignalR:ConnectionString ，把刚刚的连线字串贴上

Web Api 专案 Startup.cs 的 ConfigureServices 增加 AddSignalR

services.AddSignalR().AddAzureSignalR();

Configure 增加 Hub 的实作

app.UseEndpoints(endpoints =>

{

endpoints.MapControllers();

endpoints.MapRazorPages();

endpoints.MapHub<WeddingMessage>("/message");

});

WeddingMessage.cs

之後可以依照自己的需求在此实作方法

public class WeddingMessage : Hub

{

public void SendMessage(string name, string message)

{

Clients.All.SendAsync("SendMessage", name, message);

}

}

简单几个步骤就完成 Server Side 的 Hub

建立 HTML Client 即时呈现讯息

本篇继续使用 Razor Page，但纯HTML也是可以的，因为我们会载入SignalR的JavaScript SDK

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@@aspnet/[email protected]/dist/browser/signalr.min.js"></script>

在JavaScript也蛮容易实作发送讯息及接收讯息

<script>

document.addEventListener('DOMContentLoaded', function () {

// 建立连线

var connection = new signalR.HubConnectionBuilder()

.withUrl('/message') //因为是同个网域，要视情况换成完成Server Hub的URL

.build();

// 开始连线

connection.start()

.then(function () {

connection.send('SendMessage', 'SYSTEM', '连线成功...');

})

.catch(function (error) {

console.error(error.message);

});

bindConnectionMessage(connection);

// 呈现资料到Html

function createMessageEntry(encodedName, encodedMsg) {

var entry = document.createElement('li');

entry.innerHTML = encodedName + ":" + encodedMsg;

return entry;

}

// 监听接收讯息事件

function bindConnectionMessage(connection) {

connection.on('CallBackMessage', function (name, message) {

if (!message) return;

var encodedName = name;

var encodedMsg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");

var messageEntry = createMessageEntry(encodedName, encodedMsg);

var messageBox = document.getElementById('messages');

messageBox.appendChild(messageEntry);

messageBox.scrollTop = messageBox.scrollHeight;

});

}

});

</script>

Html 部分

<h2>Kyle's Wedding 留言板</h2>

<ul id="messages">

</ul>

建立 .NET Console App 来发送讯息

再来我们建立个 Console App 来发送看看

安装 Microsoft.AspNetCore.SignalR.Client

建立一个 ClientSignalR 来封装发送

public class ClientSignalR

{

private HubConnection _hub;

public HubConnection Hub { get; }

private string _connectionUrl;

public string ConnectionUrl { get; }

public ClientSignalR()

{

}

public async Task Initialize(string connectionUrl)

{

_connectionUrl = connectionUrl;

_hub = new HubConnectionBuilder()

.WithUrl(_connectionUrl)

.Build();

await _hub.StartAsync();

}

public async Task SendHubMessage(string methodName, string name, string message)

{

await _hub?.InvokeAsync(methodName, name, message);

}

public async Task CloseConnection()

{

await _hub.DisposeAsync();

}

}

Program.cs

static async System.Threading.Tasks.Task Main(string[] args)

{

var hubClient = new ClientSignalR();

await hubClient.Initialize("<Your Server Hub URL>/message");

while (true)

{

Console.WriteLine("Please enter you message:");

var input = Console.ReadLine();

await hubClient.SendHubMessage("SendMessage", "Kyle", input);

}

}