Skip to main content

基于Blazor + SignalR创建一个简易的聊天室

分类:  Blazor入门 ◆ 标签:  #Asp.Net core基础 #.Net #Web #Web Client #Blazor ◆ 发布于: 2023-05-21 22:07:32

之前我们已经使用Blazor Server的部署模式创建了一个简易的代办事件列表，今天我们使用SignalR技术+Blazor WebAssembly部署模式+ASP.net Core 服务端创建一个简易的聊天室，虽然这两个教程都非常简单，基本上由dotnet 工具和框架完成了大部分的工作，但是这两个实例的开发基本上描述了使用Blazor技术开发一个应用的所有的技术要点，希望大家能够认真理解这些基础的知识点，在完成这两个教程之后，后期我们会将Blazor编程中技术要点会一一给大家满满讲解，同时技术要点完成了之后，我们会根据Github上的一个项目整理一个较为深入的教程，帮助大家尽快的能够上手使用Blazor技术。

 

对上一个教程不是太了解的同学可以参考如下链接（本教程不在叙述技术点）：
创建一个简单的Blazor TodoList应用

关于SignalR:ASP.net Core SignalR 框架是用于实时Web应用开发的技术，可以让服务端向客户端推送信息，如果想深入的了解SignalR, 请参考文档：https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-5.0

本教程的源代码可以从这里下载：https://github.com/hylinux/AzureDeveloperCN/tree/main/ChatBySignalR

下面我们开始一步一步的创建一个简单的基于Blazor WebAssembly + SignalR + ASP.net Core创建的简易的聊天室

  1. 创建项目:
    dotnet new blazorwasm -ho -o ChatBySignalR
    这里需要注意的是，采用了模板BlazorWASM，意思是创建一个基于WebAssembly的Blazor App，同时由于我们指定了选项： -ho.  --hosted 该webassembly项目是需要host在一个服务上的。该选项会使得dotnet 在创建WebAssembly项目的同时，还会创建一个基于ASP.net Core的服务端项目，项目的取名是: {项目名}.Client 是作为 WebAssembly项目， {项目名}.Server是基于ASP.net Core的服务端项目，同时还会创建一个{项目名}.Shared, 在这里共享client和server都需要的代码。例如model, 组件等等。同时在解决方案中，启动的应用指定到{项目名}.Server,      Server项目会引用项目Client, Shared.

  2. 引用nuget包:     Microsoft.AspNetCore.SignalR.Client
    该包主要引用在Client项目中:
    dotnet add Client package Microsoft.AspNetCore.SignalR.Client

  3. 包安装成功后，进入到项目Server目录中，创建目录: Hubs, 并在HubS目录下创建ChatHub.cs


  4. 在Server项目中启用服务端的SignalR的Server, 并添加endpoint, 同时启用响应压缩：


  5. 配置Endpoint, 监听对于SignalR的请求：


  6. 进入到Client 项目中，以如下的代码替换Pages/Index.razor中的内容：


  7. 运行该简单的实例：进入项目Server， 在Server目录下运行: dotnet run

  8. 使用两个浏览器同时打开并访问https://localhost:5001,     聊天室效果如下：