首页 > 编程语言 >C#使用SignalR实现与前端vue实时通信

C#使用SignalR实现与前端vue实时通信

时间:2024-10-13 12:46:15浏览次数:9  
标签:vue err C# await SignalR connection message public

C#后端

1、安装SignalR包

首先确保项目中已安装 SignalR 相关包。可以通过 NuGet 包管理器安装:

dotnet add package Microsoft.AspNetCore.SignalR

2、配置SignalR

在 Startup.cs 文件中配置 SignalR

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SignalR;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

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

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseRouting();

        app.UseEndpoints(endpoints =>
                         {
                             endpoints.MapHub<ChatHub>("/chatHub");
                         });
    }
}

3、创建Hub类

创建一个msgHub类来处理客户端的连接和消息传递

using Microsoft.AspNetCore.SignalR;

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




 /// <summary>
 /// 将客户端加入指定分组
 /// </summary>
 /// <param name="groupName"></param>
 /// <returns></returns>
 public async Task JoinGroup(string groupName)
 {
     // 将客户端加入指定分组
     await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
    

 }
 /// <summary>
 /// 将客户端从指定分组移出
 /// </summary>
 /// <param name="groupName"></param>
 /// <returns></returns>
 public async Task LeaveGroup(string groupName)
 {
     await Groups.RemoveFromGroupAsync(Context.ConnectionId, groupName);
    

 }
 /// <summary>
 ///  分组发送消息
 /// </summary>
 /// <param name="user"></param>
 /// <param name="message"></param>
 /// <returns></returns>
 public async Task SendMessageToOneGroup( string user, object message)
 {
     await Clients.Group("One").SendAsync(HubsConstant.DisplayReceive, user, message);
 }
 
    
}

客户端Vue连接

1、安装依赖

确保你的 Vue.js 项目中安装了必要的依赖:

Vue.js:确保你有一个 Vue.js 项目。

SignalR 客户端库:安装 SignalR 客户端库。

可以通过 npm 安装 SignalR 客户端库:

npm install @microsoft/signalr

2、修改 src/main.js 文件

确保在 Vue.js 应用中全局引入 SignalR:

全局引用

import Vue from 'vue';
import App from './App.vue';
import { HubConnectionBuilder } from '@microsoft/signalr';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

// 创建 SignalR 连接
let connection = new HubConnectionBuilder()
  .withUrl('http://localhost:5000/chatHub')
  .build();

connection.on('ReceiveMessage', (user, message) => {
  console.log(`${user}: ${message}`);
  // 更新 UI
});

connection.start().catch(err => console.error(err));

页面引用

import { HubConnectionBuilder } from '@microsoft/signalr';

3、页面index.vue使用

<template>
    
</template>


<script>

import { HubConnectionBuilder } from '@microsoft/signalr';
export default {
    name: "WebSocketTest",
    
  mounted() {
      this.start();
  },
  beforeDestroy() {
      this.leaveGroup();
  },
    methods: {
      async start() {
        try {
          this.connection = new HubConnectionBuilder()
              .withUrl('http://localhost:8888/msgHub')
              .configureLogging(1)
              .build();

          // 处理连接状态变化
          this.connection.onclose(async () => {
            await this.start();
          });

          // 监听服务器发送的消息
          this.connection.on('DisplayReceive', (user, message) => {
            console.log('Received message:', user, message);
           
           
          await this.connection.start();
          console.log('Connection started');

          // 加入分组
          await this.connection.invoke('JoinGroup', 'One').catch(err => console.error('Error joining group:', err));
        } catch (err) {
          console.error('Error while starting connection:', err);
          setTimeout(() => this.start1(), 5000);
        }
      },
      
      async leaveGroup() {
          //移出分组
        await this.connection.invoke('LeaveGroup', 'One').catch(err => console.error('Error leaving group:', err));
        await this.connection.stop();
        },
     

    
    }
}
</script>

标签:vue,err,C#,await,SignalR,connection,message,public
From: https://blog.csdn.net/m0_63456808/article/details/142894580

相关文章

  • 实验2 c语言分支与循环基础应用编程-1
    实验任务1task1.c1#include<stdio.h>2#include<stdlib.h>3#include<time.h>45#defineN56#defineN13977#defineN24768#defineN321910intmain(){11intcnt;12intrandom_major,random_no;1314s......
  • Leetcode 1203. 项目管理
    1.题目基本信息1.1.题目描述有n个项目,每个项目或者不属于任何小组,或者属于m个小组之一。group[i]表示第i个项目所属的小组,如果第i个项目不属于任何小组,则group[i]等于-1。项目和小组都是从零开始编号的。可能存在小组不负责任何项目,即没有任何项目属于这个小组。请......
  • 洛谷P8818 [CSP-S 2022] 策略游戏
    Problem给出两个数组A,B,进行q次询问,每次分别给出这两个数组的某个区间l1,r1,l2,r2,也就是\(A_{l1\simr1}\)与\(B_{l2\simr2}\),有两位同学小L和小Q分别从A,B的以上区间中选一个数,而两数乘积为此次操作的分数,小L希望分数大,小Q希望分数小,请问他们每次以最优策略进行游戏,分数将会......
  • 使用 OCaml 进行基础图像识别
    OCaml是一门强类型的函数式编程语言,以其高效的编译器和灵活的表达能力著称。虽然OCaml不像Python等语言在图像处理和识别领域被广泛应用,但它的模块化特性和强大的标准库使其能够完成相关任务。本文将介绍如何在OCaml中实现基础图像处理和识别。OCaml的优势OCaml拥有静......
  • 基于Node.js+vue公共场所安保信息管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着城市化进程的加速和社会活动的日益频繁,公共场所如商场、学校、医院、交通枢纽等的安全管理问题愈发凸显。这些场所人员密集,流动性大,潜在的安全风险不容......
  • 实验2 c语言分支与循环基础应用编程1
    task1:问题1随机数求余后结果为1,生成0397到0476中的随机数问题2随机数求余后结果为0,生成0001到0021中的随机数问题3随机生成5个不同的学号task2: 实验3: task4:1#include<stdio.h>2intmain()3{4doublex,sum,max,min;5sum=0;6......
  • 基于Node.js+vue动物园购票平台(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在快节奏的现代生活中,动物园作为人们休闲娱乐、亲近自然的重要场所,越来越受到公众的青睐。然而,传统的动物园购票方式往往存在排队时间长、购票流程繁琐等问......
  • cmake使用方法
    CMake是一个跨平台的构建系统生成器,广泛用于C++项目。它允许开发者编写平台无关的构建脚本(称为`CMakeLists.txt`),然后在不同的平台上生成对应的构建文件(如Makefile、VisualStudio项目文件等)。以下是使用CMake的基本步骤和一些常见的用法。 ###安装CMake首先,你需......
  • 【开题报告+论文+源码】基于SpringBoot+Vue的教研室听课管理系统
    背景与意义随着信息技术的迅猛发展,教育信息化已成为现代教育的必然趋势。教研室作为高校教学管理的重要机构,肩负着提升教学质量、推动教学改革的重要使命。然而,传统的教学管理方式往往存在效率低下、数据分散、管理不便等问题,难以满足教研室日益增长的教学管理需求。听课作为......
  • Android12.0 需求开发篇+问题解决篇之IPC socket通信
    1.需求描述        应用组C程序客户端和Android系统层Java服务端进行通信需求,这里其实在Android系统下IPC的方式有很多,像Binder作为Android特有的跨进程通信,但是应用组的同事之前是非Android系统下进行应用开发,使用的都是socket这种通用IPC通信。这里为兼容应用组代码......