vue +signalR 实现服务端到客户端消息发送
时间:2020-05-13
本文章向大家介绍vue +signalR 实现服务端到客户端消息发送,主要包括vue +signalR 实现服务端到客户端消息发送使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上一篇博客实现是了消息的实时通信,这一篇博客主要讲如何从中心服务内部向客户端发送消息。
先看下最终效果:
在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
原文地址:https://www.cnblogs.com/aqgy12138/p/12882511.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 转录组分析 | 使用Trimmomatic过滤Fastq文件
- 转录组分析 | 使用FastQC进行数据质控
- R语言绘图 | 给箱线图加个点
- R语言绘图 | 使用pheatmap快速绘制热图
- 可能是目前最详细从零开始配置 TypeScript 项目的教程
- 比对得到的SAM文件怎么看?
- ANTNet|端侧架构,精度速度双超MobileNetV2
- 9个动图带你进入PyQtGraph的强大可视化世界
- 转录组分析 | 使用STAR进行比对
- 使用R/qtl进行QTL分析
- 转录组分析 | 使用RSEM进行转录本定量
- 使用R语言计算遗传力
- 专属于六倍体小麦的Bioconductor注释包
- 轻松上传超过100M的文件至GitHub
- 转录组分析 | 使用DESeq2进行基因差异表达分析