WPF+ASP.NET SignalR实现简易在线聊天功能的示例代码

下面我将为你详细讲解如何通过WPF和ASP.NET SignalR实现简易在线聊天功能的示例代码。

准备工作

首先，需要保证电脑上安装了Visual Studio，并已经安装了.NET框架、WPF相关开发环境以及SignalR的相关NuGet包。

其次，需要创建一个新的WPF项目，为了方便，我们将这个项目命名为WpfSignalRChatDemo。

添加WPF界面和相关代码

在Visual Studio中，可以通过界面设计器或手写代码的方式添加WPF界面。

首先，在MainWindow.xaml中添加以下XAML代码：

<Window x:Class="WpfSignalRChatDemo.MainWindow"
        ...
        Title="WPF SignalR Chat" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ListBox Name="lstMessages" Margin="10" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Messages}">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Sender}" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Text}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" Margin="10">
            <TextBox Name="txtMessage" VerticalAlignment="Center" Margin="0,0,10,0" MinWidth="200"/>
            <Button Name="btnSend" Content="Send" Padding="10,5"/>
        </StackPanel>
    </Grid>
</Window>

这段XAML代码实现了一个带有发送消息和显示消息列表的简单聊天窗口，在此窗口中，我们使用了ListBox控件来展示消息列表，并使用了TextBox和Button控件来提供发送消息的功能。

接下来，在MainWindow.xaml.cs中添加以下代码：

using System.Collections.ObjectModel;
using Microsoft.AspNet.SignalR.Client;
using Microsoft.AspNet.SignalR.Client.Transports;
using System.Windows;

namespace WpfSignalRChatDemo
{
    public partial class MainWindow : Window
    {
        private HubConnection hubConnection;
        private IHubProxy hubProxy;

        public ObservableCollection<Message> Messages { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            // Initialize the list of messages
            Messages = new ObservableCollection<Message>();
            DataContext = this;

            // Connect to SignalR hub
            hubConnection = new HubConnection("http://localhost:8080");
            hubConnection.Start(new LongPollingTransport()).Wait();
            hubProxy = hubConnection.CreateHubProxy("ChatHub");

            // Attach event handlers
            hubProxy.On<string, string>("broadcastMessage", (sender, text) =>
            {
                Dispatcher.Invoke(() =>
                {
                    Messages.Add(new Message
                    {
                        Sender = sender,
                        Text = text
                    });
                });
            });

            btnSend.Click += (sender, e) =>
            {
                // Send a message to the hub
                hubProxy.Invoke("Send", "WPF Client", txtMessage.Text);

                // Clear the message text box
                txtMessage.Clear();
            };
        }

        private class Message
        {
            public string Sender { get; set; }
            public string Text { get; set; }
        }
    }
}

这段代码实现了SignalR连接的初始化、消息的发送和接收以及UI上的消息展示，其中：

MainWindow类继承自Window并且实现了构造函数和一个Message的内部类。
hubConnection是一个HubConnection类的实例，用来连接到SignalR Hub服务器。
hubProxy是一个IHubProxy类的实例，用来发送和接收消息。
Messages是ObservableCollection<Message>类的实例，用来管理消息列表，并通过数据绑定在UI上展示。
InitializeComponent方法用于加载窗口中的XAML。
hubConnection.Start(new LongPollingTransport()).Wait()是连接SignalR服务器的关键代码，其中使用了长轮询的传输方式。
hubProxy.On方法订阅了SignalR服务器上ChatHub的broadcastMessage事件，并通过调用UI线程的Dispatcher.Invoke方法将消息添加到UI上的消息列表中。
btnSend.Click事件处理方法用于将消息发送到SignalR服务器，并清空消息输入框。

添加SignalR服务器端代码

除了WPF客户端之外，我们还需要添加一个ASP.NET SignalR服务器端来处理客户端的发送和接收的消息。

在Visual Studio中，可以通过右键单击项目名称，选择“添加” -> “新建项目” -> “ASP.NET Web 应用程序（.NET Framework）”来添加新的ASP.NET Web应用程序项目。项目名称可以命名为SignalRChatServer。

在新创建的ASP.NET Web应用程序项目中，我们需要首先安装SignalR的NuGet包，然后再通过添加一个SignalR的Hub来处理客户端的消息发送和接收。

安装SignalR NuGet包

右键单击SignalRChatServer项目名称，选择“管理NuGet程序包”，在搜索框中输入“Microsoft.AspNet.SignalR”，然后选择“Install”按钮进行安装。

添加SignalR Hub

在SignalRChatServer项目中，右键单击项目名称，选择“添加”->“SignalR Hub”，这将会创建一个新的Hub类，我们可以将其命名为ChatHub。

添加ChatHub.cs文件后，你的代码应该如下所示：

using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;

namespace SignalRChatServer
{
    public class ChatHub : Hub
    {
        public void Send(string sender, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(sender, message);
        }
    }
}

这段代码实现了SignalR的Hub类和Send方法，其中：

ChatHub类继承自Hub类，Hub类是SignalR通信的核心对象。
Send方法用于处理客户端发送的消息，并将消息发送给所有客户端。

使用Visual Studio启动客户端和服务器

现在我们已经完成了WPF客户端和ASP.NET SignalR服务器端的开发，现在需要启动这两个应用程序并测试聊天功能是否正常运行。

在Visual Studio中：

选中WpfSignalRChatDemo项目，右键单击，选择“调试”->“启动新实例”，这将打开客户端WPF窗口。
选中SignalRChatServer项目，右键单击，选择“调试”->“启动新实例”，这将启动服务器。

一旦客户端和服务器都正常启动，将使用WPF SignalR Chat标题的聊天窗口。

在聊天窗口中，在消息输入框中输入内容，然后单击“发送”按钮，你应该能够在窗口下方看到你所发送的消息正常显示。接下来，将多个聊天窗口打开在同一台电脑上，以获取更好的测试效果，你会发现消息在多个窗口之间按时间顺序实时传输。

这样，我们就成功的利用WPF和ASP.NET SignalR实现了一个简单的在线聊天功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：WPF+ASP.NET SignalR实现简易在线聊天功能的示例代码 - Python技术站