Abp中SignalR的简单使用
SignalR
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的前端也加上.
至此一个最简易的聊天室功能就实现了........