Abp中SignalR的简单使用

SignalR

普通配置:官网:https://learn.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?view=aspnetcore-7.0&tabs=visual-studio

Abp配置:https://docs.abp.io/zh-Hans/abp/latest/SignalR-Integration

参考博客实现最基本的使用:https://www.cnblogs.com/aqgy12138/p/12877415.html

本片介绍Abp的使用

第一步,Abp已经集成了SignalR功能,但是还是需要下载组件的,在主模块的web层使用Nuget管理包下载

Volo.Abp.AspNetCore.SignalR

需要注意的是下载完成之后,在TodoAppWebModule层看下是否存在一下代码,如果没有的话,就添加上即可

[DependsOn(
    //...other dependencies
    typeof(AbpAspNetCoreSignalRModule) //Add the new module dependency
    )]

操作结束之后,在本层创建一个类,用来实现SignalR的操作.基本代码

[HubRoute("/my-messaging-hub")]//这里是传入进来的路由配置,可以用来在页面上访问
    public class MissageingHub:AbpHub
    {
        
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }

Abp的操作到这里基本就结束了,至于成没成功,可以在打开项目之后,跳转到my-messaging-hub(自己定义的路径)来检测,如果页面上出现Connection ID required就证明后端配置完全正确.

需要注意的是,需要把Web=>Properties=>launchSettings.json下面的路径改成自己的域名(下面的).例如

"TodoApp.Web": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://**.**.**.**:端口/"
    }

更改完成之后,为了能让别人访问到自己的Api接口,需要在防火墙里把端口加上.

至此,后端配置结束..........

接下来是vue端,直接上全部代码

首先,下载

npm install @aspnet/signalr

然后创建自己的测试页面,代码如下


<template>
  <div>
  //这里是两个输入框以及按钮事件
    <input v-model="user" type="text" />
    <input v-model="message" type="text" />
    <button @click="sendAll">发送全部</button>
    <div>
    //这里是数据保存的地方
      <ul v-for="(item, index) in messages" v-bind:key="index + 'itemMessage'">
        <li>{{ item.user }} says {{ item.message }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import * as signalR from "@aspnet/signalr";
export default {
  data() {
    return {
      user: "", //用户
      message: "", //消息
      connection: "", //signalr连接
      messages: [], //返回消息
    };
  },
  created: function () {
    let thisVue = this;
    this.connection = new signalR.HubConnectionBuilder()
    //这里写的是后端的接口路径,使用域名的方式连接
      .withUrl("http://**.**.**.**:端口/my-messaging-hub", {
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets,
      })
      .configureLogging(signalR.LogLevel.Information)
      .build();
    this.connection.on("ReceiveMessage", function (user, message) {
      thisVue.messages.push({ user, message });
      console.log({ user, message });
    });
    this.connection.start();
  },
  methods: {
    //给全部发送消息
    sendAll: function () {
      this.connection
        .invoke("SendMessage", this.user, this.message)
        .catch(function (err) {
          return console.error(err);
        });
    },
  },
};
</script>
<style>
</style>

代码写完之后,需要在防火墙里把自己vue的前端也加上.

至此一个最简易的聊天室功能就实现了........

posted @   喜东东三三  阅读(402)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示