上一篇博客实现是了消息的实时通信，这一篇博客主要讲如何从中心服务内部向客户端发送消息。
先看下最终效果：
在core应用程序里加一个控制器TestController
注入控制器中的IHubContext实例，并且添加方法
[Route("api/[controller]/[action]")]
[ApiController]
public class TestController : ControllerBase
{
private readonly IHubContext<ChatHub> _hubContext;
public TestController(IHubContext<ChatHub> hubContext)
{
_hubContext = hubContext;
}
[HttpGet]
public async Task<int> Get()
{
await _hubContext.Clients.All.SendAsync("ReceiveMessage", "系统通知", $"北京时间{DateTime.Now}");
return 0;
}
}然后启用路由和控制器
//启用控制器
services.AddControllers();
app.UseEndpoints(endpoints =>
{
//终结点设置路由默认
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
endpoints.MapRazorPages();
endpoints.MapHub<ChatHub>("/chathub");
});
哎呀忘记配置跨域了
//配置跨域
services.AddCors(c =>
c.AddPolicy("AllowAll", p =>
{
p.AllowAnyOrigin();
p.AllowAnyMethod();
p.AllowAnyHeader();
})
);
//配置跨域别把中间件的位置放错了哦
app.UseCors("AllowAll");
这里为啥要配置跨域呢，因为之前signalr的连接时连接客户端的，它们基于底层的通信协议（这太高深了 ，俺也不懂），而现在我们通过浏览器发送请求获取系统通知的话，就会存在跨域的情况，所以需要配置
因为现在需要发送请求，所以我安装个axios
npm install axios
然后在mian.js配置下。
import axios from 'axios'
Vue.prototype.$http = axios
更新一下上次写的home.vue里的代码
<template>
<div class="home">
<h1>前端演示SignalR</h1>
<input v-model="user" type="text" />
<input v-model="message" type="text" />
<button @click="sendAll">发送全部</button>
<button @click="sendOwn">对自己发送</button>
<button @click="sendClient">系统发送消息</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>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import * as signalR from "@aspnet/signalr";
export default {
name: "Home",
components: {
HelloWorld
},
data() {
return {
user: "", //用户
message: "", //消息
connection: "", //signalr连接
messages: [] //返回消息
};
},
methods: {
//给全部发送消息
sendAll: function() {
this.connection
.invoke("SendMessage", this.user, this.message)
.catch(function(err) {
return console.error(err);
});
},
//只给自己发送消息
sendOwn: function() {
this.connection
.invoke("SendMessageCaller", this.message)
.catch(function(err) {
return console.error(err);
});
},
//系统发送消息
sendClient: function() {
this.$http.get("http://localhost:13989/api/test/get").then(resp => {
console.log(resp);
});
}
},
created: function() {
let thisVue = this;
this.connection = new signalR.HubConnectionBuilder()
.withUrl("http://localhost:13989/chathub", {
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.on("ReceiveCaller", function(message) {
let user = "自己"; //这里为了push不报错，我就弄了一个默认值。
thisVue.messages.push({ user, message });
console.log({ user, message });
});
this.connection.start();
}
};
</script>
这样的话，就能开篇那个效果了。
这里说几个注意的点，添加控制器之后一定要启用他，还有路由也要配置，否则你用postman的也是请求不到的，然后就是跨域配置，这些都是实现这个功能不能缺少的配置。
源码地址：https://github.com/QQ2287991080/SignalRServerAndVueClientDemo