Vue 使用SignalR.JS与Microsoft.AspNetCore.SignalR实时通讯

原创

已于 2023-09-24 16:41:36 修改 · 718 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2023-09-24 16:40:49 首次发布

本文介绍了如何在Asp.NETCore中使用SignalR进行Vue与后端的实时通信，包括创建Hub、配置CORS、Vue客户端的插件安装和使用，以及在Vue组件中的连接和事件处理。

针对于Web与其他应用的的通讯，在.Net中，SignalR是一个不错的选择，在前后端没有分离的时候，直接引用对应的signalr.js文件即可；这里主要记录Vue与Asp.netcore 前后端分离通过signalR通讯实践；

服务端即Asp.net Core 程序

前提：通过Nugut 引入Microsoft.AspNetCore.SignalR 包

首先编写自己的Hub

public class ChatHub:Hub

   {

       public Task SendMsg(ChatMessageInfo info)

       //这里的Show代表是客户端的方法，具体可以细看SignalR的说明

           return Clients.All.SendAsync("Show", info.UserName + ":" + info.Message);

       }

   }

   public class ChatMessageInfo

   {

       public string UserName { get; set; }

       public string Message { get; set; }

   }

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

namespace MaintainceSysAPI
{
    public class MsgHub