SignalR学习一:搭建简单SignalR程序

添加客户端

在“解决方案资源管理器” 中,右键单击项目,然后选择“添加” >“客户端库” 。
在“添加客户端库” 对话框中,对于“提供程序” ,选择“unpkg” 。
对于“库” ,输入 @aspnet/signalr@1,然后选择不是预览版的最新版本
选择“选择特定文件” ,展开“dist/browser” 文件夹,然后选择“signalr.js” 和“signalr.min.js” 。
将“目标位置” 设置为 wwwroot/lib/signalr/ ,然后选择“安装” 。

消息处理类

在项目中创建Hubs文件夹,并创建ChatHub.cs文件

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Ticket_pro.Hubs
{
    public class ChatHub:Hub
    {
        public async Task SendMessage(string user,string message)
        {
            await Clients.All.SendAsync("ReceiveMessage",user,message);
        }
    }
}

配置SignalR

打开Startup.cs文件

 public void ConfigureServices(IServiceCollection services)
 {
      services.AddSignalR();
 }

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
            app.UseSession();
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseRouting();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
              //添加这一行
                endpoints.MapHub("/chatHub");
            });
          
}

前端代码


@{
    ViewData["Title"] = "Index";
}

 
User
Message
 

    添加chat.js

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&").replace(//g, ">");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    运行

    你可能感兴趣的:(SignalR学习一:搭建简单SignalR程序)