.NET SignalR

参考

.NET+Vue 使用SignalR推送数据 - netlock - 博客园 (cnblogs.com)

ASP.NET Core 使用 SignalR 遇到的 CORS 问题 - MyZony - 博客园 (cnblogs.com)

环境配置

后端

安装依赖包

Swashbuckle.AspNetCore

创建连接类

csharp 复制代码
using Microsoft.AspNetCore.SignalR;

namespace SignalR
{
    public class MyHub:Hub
    {
        public Task SendPublicMsg(string msg)
        {
            string connectionId = this.Context.ConnectionId;
            string msgToSend = $"{connectionId} {DateTime.Now}:{msg}";
            return Clients.All.SendAsync("PublicMsgReceived", msgToSend);
        }
    }
}

服务注册

ini 复制代码
builder.Services.AddSignalR();

.........................

app.MapHub<MyHub>("/MyHub");

配置跨域

ini 复制代码
// 添加跨域策略
string[] urls = new[] { "http://localhost:5173"};

builder.Services.AddCors(option =>
{
    option.AddPolicy("CorsPolicy", 
        opt => opt
            .WithOrigins(urls)
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials());
});
.........................


// 使用跨域策略
app.UseCors("CorsPolicy");

前端

安装依赖

npm install @microsoft/signalr

核心代码

修改HelloWorld.vue

xml 复制代码
<script setup>
import { onMounted,ref } from 'vue';
import * as signalR from "@microsoft/signalr"

let input_value = ref()
let connc = ref()

const connection = new signalR.HubConnectionBuilder()
  .withUrl("https://localhost:7253/MyHub")
  .withAutomaticReconnect() //断线自动重连
  .build();
connection.start();

const fromResponse = ref([])
connection.on('PublicMsgReceived',msg=>{
  console.log(msg)
  fromResponse.value.push(msg)
})

//自动重连成功后的处理
connection.onreconnected(connectionId => {
    alert(connectionId);
  });

const submit = ()=>{
  console.log(input_value.value)
  connection.invoke("SendPublicMsg",input_value.value)
}

</script>

<template>
  <input v-model="input_value">
  <button style="border: 1px solid #ccc;" @click="submit">提交</button>
  <ul>
    <li v-for="(value, key, index) in fromResponse" :key="key" style="text-align : left;">{{ key + 1 }}: {{ value }}</li>
  </ul>

</template>

<style scoped>
</style>

注意参数要与后端对应

测试

分别打开两个浏览器窗口,可以进行即时通讯

相关推荐
摇滚侠1 小时前
Spring Boot 3零基础教程,WEB 开发 静态资源默认配置 笔记27
spring boot·笔记·后端
天若有情6734 小时前
Java Swing 实战:从零打造经典黄金矿工游戏
java·后端·游戏·黄金矿工·swin
一只叫煤球的猫4 小时前
建了索引还是慢?索引失效原因有哪些?这10个坑你踩了几个
后端·mysql·性能优化
magic334165636 小时前
Springboot整合MinIO文件服务(windows版本)
windows·spring boot·后端·minio·文件对象存储
开心-开心急了6 小时前
Flask入门教程——李辉 第一、二章关键知识梳理(更新一次)
后端·python·flask
掘金码甲哥6 小时前
调试grpc的哼哈二将,你值得拥有
后端
小学鸡!7 小时前
Spring Boot实现日志链路追踪
java·spring boot·后端
用户21411832636028 小时前
OpenSpec 实战:用规范驱动开发破解 AI 编程协作难题
后端
Olrookie9 小时前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
LucianaiB9 小时前
招聘可以AI面试,那么我制作了一个AI面试教练不过分吧
后端