Asp.net通过SignalR2进行实时聊天

下面我将详细讲解“Asp.net通过SignalR2进行实时聊天”的完整攻略，包括如何使用SignalR2构建一个简单的实时聊天程序。

SignalR2是什么？

SignalR2 是一个基于 ASP.NET 的开源框架，用于实时 Web 应用程序。它使得实时通讯变得简单，可以实现实时的消息推送、实时的服务器推送以及实时的交互等。

步骤

下面将以 Visual Studio 2017 和 SignalR version 2.3.0 为例，介绍在 ASP.NET 中如何使用 SignalR2 构建实时聊天程序。

步骤1：创建新项目

打开 Visual Studio，新建空项目。选择 ASP.NET Web 应用程序，并选择"空模板"。点击"确定"按钮即可创建一个新的 ASP.NET 项目。

步骤2：安装和配置 SignalR2

在新建好的 ASP.NET 项目中，右击项目名称，选择“管理NuGet程序包”。在“浏览”选项卡中搜索关键词"SignalR"并选择 SignalR 入门版本（在此示例中为 2.3.0），然后安装 SignalR。

安装完成后，打开"Startup.cs"文件，添加如下代码到"ConfigureServices"方法中：

services.AddSignalR();

在"Configure"方法中添加如下代码：

app.UseSignalR(routes =>
{
    routes.MapHub<MessageHub>("/messagehub");
});

其中，“MessageHub”是一个自定义 SignalR hub 。

步骤3：创建 SignalR Hub

在“Hubs”文件夹下，创建“MessageHub”类，它作为 SignalR Hub 的定义，需要继承自 "Hub"类。在类中添加如下代码：

public class MessageHub : Hub
{
    public void Send(string message)
    {
        Clients.All.SendAsync("ReceiveMessage", message);
    }
}

此处的 Send 方法用于接收用户发送的消息，并且使用 Clients.All 发送到所有客户端。

步骤4：创建 HTML 页面

在“Views”文件夹下创建一个新的文件夹“Home”，并在该文件夹下创建视图"Index.cshtml"。打开视图文件并添加如下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SignalR Chat Demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signalr.js/2.3.0/signalr.min.js"></script>
    <script>
        $(function () {
            var connection = new signalR.HubConnectionBuilder().withUrl("/messagehub").build();

            connection.on("ReceiveMessage", function (message) {
                var messageLI = $("<li>").appendTo($("#messages"));
                messageLI.text(message);
            });

            connection.start().catch(function (err) {
                console.error(err.toString());
            });

            $("#sendButton").click(function () {
                var message = $("#messageInput").val();
                connection.invoke("Send", message).catch(function (err) {
                    console.error(err.toString());
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <ul id="messages"></ul>
    </div>
    <div>
        <input type="text" id="messageInput" />
        <input type="button" id="sendButton" value="Send" />
    </div>
</body>
</html>

在此 HTML 页面中，我们使用了 SignalR.js ，它将自动连接到 SignalR 服务器，接收服务器发来的数据，并把它添加到 HTML 页面中。

步骤5：启动应用程序

点击 Visual Studio 中的"F5"启动应用程序。打开网页并测试应用程序是否正常工作。

示例1

假设现在有两个用户 A 和 B，A 在页面中输入“Hello SignalR”，点击“发送”按钮时，B 将收到消息“Hello SignalR”，并在其页面中显示。

示例2

假设现在有三个用户 C、D 和 E，他们都在同一个 SignalR 共享的连接中。C 在页面中输入"Hi，ALL!"，在点击“发送”按钮时，D 和 E 都能接收到消息。

到此，我们就完成了基于 ASP.NET SignalR2 的实时聊天室程序的制作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Asp.net通过SignalR2进行实时聊天 - Python技术站