精华内容
下载资源
问答
  • 主要为大家详细介绍了Vue结合SignalR实现前后端实时消息同步,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • asp.netCore+vue +SignalR

    2020-12-08 16:07:21
    基于asp.netCore+vue框架实现SignalR实时推送消息功能。协议是webSoket协议
  • signalR跨域及解决方案

    2019-12-25 14:20:08
    signalR跨域及解决方案 Access-Control-Allow-Origin' header is present之 为什么会跨域及解决方案
  • signalr vue项目使用及配置

    千次阅读 2021-12-17 15:28:04
    SignalR使用报错,jQuery was not found. Please ensure jQuery is referenced before the SignalR

    signalr vue项目中使用及配置

    依赖安装

    npm install signalr jquery --save
    // "jquery": "^3.6.0","signalr": "^2.4.2",
    main.js 引入
    // eslint-disable-next-line no-unused-vars
    import $ from 'jquery'
    // eslint-disable-next-line no-unused-vars
    import signalR from 'signalr'
    
    vue.config.js
    var webpack = require('webpack')
    module.exports = {
      configureWebpack:{
        plugins:[
          new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'root.jQuery': 'jquery'
          }),
        ]
      }
    }
    

    未配置配置vue.config.js 会出现下面问题

    jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.

    使用

    function sendLogin (res, clientKey) {
      res.proxy.invoke('sendLogin', clientKey).done()
    }
    
    function getGUID () {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
        return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
      })
    }
    
    export function connectServer (res) {
      var that = res
      if (that.signalrinfo.conn) {
        that.signalrinfo.conn.stop()
        that.signalrinfo.conn.start()
      } else {
        var $res = res
        var apiurl = process.env.VUE_APP_URL
        apiurl = apiurl + 'signalr'
        // eslint-disable-next-line no-undef
        that.signalrinfo.conn = $.hubConnection(apiurl, { useDefaultPath: false })
        var conn = that.signalrinfo.conn
        var clientid = getGUID()
        conn.qs = {
          clientId: clientid
        }
        res.proxy = conn.createHubProxy('chatHub')
        $res.getMsg()
    
        conn
          .start()
          .done(() => {
            console.log('通讯连接signalr成功')
            sendLogin(res, clientid)
          })
    
          .fail(() => {
            console.log('通讯连接signalr失败')
          })
        conn.error(error => {
          console.log('通讯连接signalr报错:' + error)
        })
    
        conn.reconnected(() => {
          console.log('通讯重新连接signalr')
          sendLogin(res, clientid)
        })
    
        conn.disconnected(() => {
          console.log('通讯断连接signalr')
          setTimeout(() => {
            console.log('尝试重新连接signalr')
            that.signalrinfo.conn
              .start()
              .done(data => {
                console.log(
                  '链接signalr地址:' + apiurl + ',链接signalr成功:' + data
                )
                sendLogin(res, clientid)
              })
              .fail(data => {
                console.log(
                  '链接signalr地址:' + apiurl + ',链接signalr失败:' + data
                )
              })
          }, 5000)
        })
    
        conn.received(data => {
          console.log('received')
          console.log(data)
        })
    
        conn.connectionSlow(() => {
          console.log('connectionSlow')
        })
      }
    }
    
    

    页面使用

    import { connectServer } from './signalr'
    created () {
        connectServer(this)
    }
    methods: {
        getMsg () {
          var _this = this
          _this.proxy.on('getMessage', (data) => {
          })
        }}
    
    展开全文
  • vue中使用signalR

    千次阅读 2021-03-11 20:45:48
    npm install @microsoft/signalr 使用 const signalR = require("@microsoft/signalr"); const connection = new signalR.HubConnectionBuilder() .withUrl("http://localhost:5000/chathub", {}) ....

    安装

    npm install @microsoft/signalr
    

    使用

    const signalR = require("@microsoft/signalr");
    // 创建连接
    const connection = new signalR.HubConnectionBuilder()
      .withUrl("http://localhost:5000/chathub", {})
      .configureLogging(signalR.LogLevel.Error)  // 日志等级
      .build();
      
     // 客户端注册事件
     // 注册事件回调参数个数应与后端一致
    connection.on("RecieveMessage", (user, message) => {
      console.log(user, message);
    });
    // 建议将参数合并到一个对象中
    connection.on("RecieveMessage", data => {
      let [user, message] = data;
      console.log(user, message);
    });
    
    
    // 生命周期
    connection.onreconnecting(error => {
      console.log(error);
    });
    connection.onreconnected(connectionId => {
      console.log(connectionId);
    });
    connection.onclose(error => {
      console.log(error);
    });
    // 自定义开始函数
    async start() {
        try {
            await connection.start();
            console.log("SignalR Connected.");
        } catch (err) {
            console.log(err);
            setTimeout(this.start(), 5000);
        }
    }
    
    // 启动
    start()
    // 在启动完成立即发送请求
    start()
      .then(()=>connection.invoke("MethodName", params))
      .catch(error => console.log(error));
    

    Home.vue

    <template>
      <div>
        <input v-model="user" type="text" />
        <input v-model="message" type="text" /><br />
        <button @click="sendMsg">发送</button>
        <hr />
        <ul>
          <li v-for="(item, index) in msgList" :key="index">
            {{ item.user }}:&nbsp;&nbsp;&nbsp;&nbsp;{{ item.msg }}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    const signalR = require("@microsoft/signalr");
    export default {
      data() {
        return {
          connection: "",
          user: "",
          message: "",
          msgList: []
        };
      },
      created() {
        this.init();
      },
      methods: {
        init() {
          this.connection = new signalR.HubConnectionBuilder()
            .withUrl("http://localhost:5000/chathub", {})
            .configureLogging(signalR.LogLevel.Error)
            .build();
          this.connection.on("ReceiveMessage", data => {
            this.msgList.push(data);
          });
          this.connection.start();
        },
        sendMsg() {
          let params = {
            user: this.user,
            message: this.message
          };
          this.connection.invoke("SendMessage", params);
        }
      }
    };
    </script>
    
    <style></style>
    
    

    日志等级

    signalR.LogLevel.Error:错误消息。 Error仅记录消息。
    signalR.LogLevel.Warning:有关潜在错误的警告消息。 日志 Warning 和 Error 消息。
    signalR.LogLevel.Information:无错误的状态消息。 日志 Information 、 Warning 和 Error 消息。
    signalR.LogLevel.Trace:跟踪消息。 记录所有内容,包括中心和客户端之间传输的数据。

    客户端调用服务端

    connection.invoke("SendMessage", ...params);
    connection.invoke("SendMessage", user, message);
    // SendMessage 是服务端定义的的方法
    // ...params 参数列表,可以有多个参数,参数和服务端定义的方法参数个数,类型相同
    

    服务端调用客户端

    connection.on("ReceiveMessage",data=>{
    	console.log(data)
    	// do something
    });
    // ReceiveMessage 服务端调用客户端的方法名
    // data 传递到客户端的参数
    

    服务器端代码示例

    // 客户端调用服务端的方法
    public async Task SendMessage(string user, string message)
    {
       // 服务端主动调用客户端的方法
        await Clients.All.SendAsync("ReceiveMessage", data);
    }
    
    // 常用方法
    // 给所有人发送消息
    await Clients.All.SendAsync("ReceiveMessage", data);
    // 给组里所有人发消息
    await Clients.Group("Users").SendAsync("ReceiveMsg", data);
    // 给调用方法的那个人发消息
    await Clients.Caller.SendAsync("ReceiveMessage", data);
    // 给除了调用方法的以外所有人发消息
    await Clients.Others.SendAsync("ReceiveMessage", data);
    // 给指定connectionId的人发消息
    await Clients.User(connectionId).SendAsync("ReceiveMessage", data);
    // 给指定connectionId的人发消息
    await Clients.Client(connectionId).SendAsync("ReceiveMessage", data);
    // 给指定connectionId的人发消息,同时指定多个connectionId
    await Clients.Clients(IReadOnlyList<> connectionIds).SendAsync("ReceiveMessage", data);
    
    展开全文
  • 使用SignalR实现消息提醒
  • Aspnet-aspnetcore-Vue-starter-signalR.zip,asp.netcore 2.0 vue 2(es6)spa启动程序包,包含路由、vuex和signalrasp.netcore 2.1 vue 2信号程序启动程序,asp.net是一个开源的web框架,用于使用.net构建现代web...
  • 封装signalr代码,便于扩展3. main.js全局引用4.页面使用C#后端代码下载 1.下载依赖包 npm i @aspnet/signalr 或 cnpm i 2.封装signalr代码,便于扩展 signalR.js import * as signalR from "@aspnet/signalr"; //...

    1.下载依赖包

    npm i @aspnet/signalr 
    或
    cnpm i
    

    2.封装signalr代码,便于扩展

    signalR.js

    import * as signalR from "@aspnet/signalr";
    //连接集线器
    let connectionSignalR = new signalR.HubConnectionBuilder()
    	//请求一次后端接口,保证是可通信的状态,即状态码为101
        .withUrl(process.env.VUE_APP_BASE_API + "hubHelper", {
            skipNegotiation: true,
            transport: signalR.HttpTransportType.WebSockets,
        })
        .configureLogging(signalR.LogLevel.Error) //日志输出级别,可自行调整
        .build();
    connectionSignalR.start();
    
    //监听到关闭后,每过5秒请求重新连接一次
    connectionSignalR.onclose((error)=>{
    	var currTimeOut='';
    	currTimeOut=serInterval(()=>{
    		connectionSignalR.start().then((res)=>{
    			clearInterval(currTimeOut);
    			currTimeOut='';
    		})
    	},5000)
    })
    
    //订阅API ReceiveMessage方法 
    export default {
        //消息提醒
        //可用   回调形式
            noticeMessage(ruleName,callback) {
                connectionSignalR.on(ruleName, (noticeTask) => {
                    callback(noticeTask);
                });
        }
        //弃用 异步调用形式, 存在问题为只会调用一次,导致后面的监听无法更新值
        //noticeMessage(ruleName) {
            //return new Promise((resolve, rejrct) => {
                //connectionSignalR.on(ruleName, (noticeTask) => {
                    //noticeTask ? resolve(noticeTask) : rejrct(noticeTask);
                //});
            //})
        //}
    }
    

    2.1监听连接关闭的两种写法

    2.1.1第一种写法(上图为这种)

    connectionSignalR.onclose((error)=>{
    	var currTimeOut='';
    	currTimeOut=serInterval(()=>{
    		connectionSignalR.start().then((res)=>{
    			clearInterval(currTimeOut);
    			currTimeOut='';
    		})
    	},5000)
    })
    

    2.1.2第二种写法

    async function start() {
                try {
                    await connection.start();
                    console.log("connected");
                } catch (err) {
                    console.log(err);
                    setTimeout(() => start(), 5000);
                }
            };
            start();
            connection.onclose(async () => {
                console.info('监听到链接关闭');
                await start();
            });
    

    3. main.js全局引用

    //消息推送
    import connectionSignalR from "./utils/signalR.js";
    Vue.prototype.$signalR = connectionSignalR;
    

    4.页面使用

     this.$signalR
          .noticeMessage("ReceiveMessage_" + sessionStorage.userId,function(value)=>{
    	//回调后的方法,根据自身需求调整
    	//this.getData(value)
    }) //与后端规定的握手秘钥,根据各自需求, 保证秘钥唯一即可.
    
    

    5.Nginx配置须知

    nginx添加如下代码方可进行socket通信

    		location /hubHelper{
    		proxy_pass http://localhost:9999/hubHelper; //根据实际后端端口调整
    			proxy_http_version 1.1; //必须
    			proxy_set_header Upgrade $http_upgrade; //必须
    			proxy_set_header Connection "upgrade";  //必须
    			proxy_set_header Origin ""; //必须
    		}
    

    C#后端代码下载-基于.Net Core 3.1

    友情链接: https://download.csdn.net/download/qq_35137757/13576056

    展开全文
  • 2、在signalR.js中封装signalR方法 import bus from "./bus.js" const signalR = require("@aspnet/signalr"); let connection = null; export let connectServer = (url, createUserDto) => { connection =...

    参考地址:https://www.npmjs.com/package/@aspnet/signalr

    1、:安装

    npm install @aspnet/signalr
    

    2、在signalR.js中封装signalR方法

    import bus from "./bus.js"
    
    const signalR = require("@aspnet/signalr");
    let connection = null;
    
    export let connectServer = (url, createUserDto) => {
        connection =  new signalR.HubConnectionBuilder().withUrl(url).build(); 
        //初始化
        initSocket(createUserDto)
    }
    //初始化包括 连接,获取消息 
    let initSocket = (createUserDto) => {
      //连接
      connection.start().then(function () {
        connection.invoke("Connected", createUserDto) //这里的invoke是指触发后端相应的“Connected”方法
          .then(function (message) {
            console.log('已连接start...')
            
          })
          .catch(function (err) {
            return console.error(err.toString());
            
          });
      }).catch(function (err) {
        return console.error(err.toString());
      });
      //获取消息 对应后端的方法,此处为“SendGroup”
      connection.on("SendGroup", function (data) { 
        //所有用户需要改变的 写在下面
        if (data != null && data != undefined) {
            var str = "[" + data.time + "]";
            switch (data.type) {
                case 1: //组内信息
                    str += data.data.connectName + ":" + data.data.msg;
                    break;
                case 2: //加入
                    str += data.data.connectName + "加入房间";
                    break;
                case 3: //离开
                    str += data.data.connectName + "离开房间";
                    break;
                case 4: //私人通知
                    str += data.data.msg;
                    break;
                default:
                    break;
            }
            bus.$emit('handleRefreshChatData', data) //根据业务需要调用方法更新数据
            bus.$notify.info({
              title: '消息',
              dangerouslyUseHTMLString: true,
              message: str,
              duration: 0,
              position: 'bottom-right'
            });
         } else {
            console.log("error,please restart ChatHub");
        }
      });
    }
    //触发方法  methodName是方法名 connectObject是传入的参数
    let sendMsg = (methodName, connectObject) => {
      connection.invoke(methodName, connectObject)
        .then(function (message) {
          //该用户改变 在下面调用
            console.log('触发'+methodName+' '+message)
            //业务需要 触发离开则断开连接
            if(methodName === 'LeaveGroup'){
              endConnect()
            }
        })  
        .catch(function (err) {
            return console.error(err.toString());
        });
    }
    let endConnect = ()=>{
      connection.stop(()=>{
        
      })
    }
    export default { sendMsg }

    3、在main.js中注册发送消息的全局方法

    import signalR from './utils/signalR'
    Vue.prototype.sendMsg = signalR.sendMsg

    4、父组件中

    <chat :options="options"></chat>
    <el-button @click="startConnect">{{options.connectFlag == '1' ? '断开' : '连接'}}</el-button>
    
    ...
    
    methods: {
          startConnect(){
            if(this.options.connectFlag  == 1){
              this.options.connectFlag =2
            }else{
              this.options.connectFlag =1
            }
          },
        },
    }

    5、子组件中

    <el-input type="textarea" resize="none" :rows="5" v-model="sendContent"></el-input>
    <el-button type="primary" @click="sendMessage" :disabled="sendContent==''">发送</el-button>
    
    ...
    
    <script>
    import {connectServer} from "../utils/signalR.js" //引入局部方法
    import bus from "../utils/bus.js"
    
    export default {
        name:'chat',
        props:{
            options:{
                type: Object,
                default:{}
            }
        },
        data(){
            return{
                sendContent:'',
                isConnect: false,//判断当前的连接状态
            }
        },
        watch:{
            'options.connectFlag':{
                immediate:true,
                handler(val){
                    if(val === 1){
                        this.startConnect()
                    }else if (val === 2){
                        //如果当前没有连接
                        if(!this.isConnect){
                            console.log('当前没有连接')
                            return
                        }
                        //业务需要,先调用LeaveGroup,然后关闭连接。如果需要直接关闭,可以再把endConnect方法拿出来调用
                        this.sendMsg("LeaveGroup", {id:this.options.id})
                        this.isConnect = false 
                    }
                }
            }
        },
        mounted(){
            bus.$on('handleRefreshChatData', (data) => {
                console.log('获取接收数据',data)
            });
        },
        methods:{
            startConnect(){
                //需要增加必填数据非空的判断 
                if(!(this.options.curUserId && this.options.sender && this.options.targetApiUrl )){
                    console.log('curUserId,sender,targetApiUrl为必填参数')
                    return
                }
                let createUserDto = { 
                    "UserId": this.options.curUserId, 
                    "UserName": this.options.sender, 
                };
                connectServer(this.options.targetApiUrl, createUserDto)
                this.isConnect = true
            },
            sendMessage(){
                 //如果当前没有连接
                if(!this.isConnect){
                    console.log('当前没有连接')
                    return
                }
                //调用接口
                this.sendMsg("Send", {id:this.options.id, data:this.sendContent}) 
                //清空消息发送框
                this.sendContent = ''
                //发消息后 消息下拉到底部
                //document.getElementsByClassName('position-box')[0].scrollIntoView();
            }
        }
        
    }
    </script>

     

    展开全文
  • import * as signalR from "@microsoft/signalr"; let hubUrl = window.g.hubUrl;//推送地址 const connection = new signalR.HubConnectionBuilder() .withAutomaticReconnect() .withUrl(hub
  • 核心是这个东西 this.connection.on("ReceiveMessage" 必须叫ReceiveMessage import { HubConnectionBuilder, HubConnectionState } from "@microsoft/... let url = `${process.env.VUE_APP_BASE_API}/signalr-hu
  • vue中使用signalR总结(前端代码)

    万次阅读 2019-03-02 19:16:42
    一、SignalR 是什么? ASP.NET SignalR 是一个面向 ASP.NET 开发人员的库,可简化将实时 web 功能添加到应用程序的过程。实时 web 功能是让服务器代码将内容推送到连接的客户端立即可用,而不是让服务器等待客户端...
  • vuesignalr的引入

    2021-07-05 22:27:11
    Vue中使用signalr引入报错问题总结 引入jquery 在vue中一般通过npm install xxx 来安装依赖,可以通过npm i jquery --save 安装 npm i jquery --save 哪个vue组件需要用到jquery,就在其中这样引入; import $ ...
  • 最近在vue中使用SignalR做消息推送的时候遇到了一些坑,也许是我对SignalR还不够深入的研究,或者理解的还不够到位,还望各位大神别喷我啊。。。我也第一次使用SignalR 1.遇到的SignalR来回断开,然后重新实例连接的...
  • 由于signalr2.2.0 依赖于jQuery,虽然在vuejs 略显臃肿, 但是对于目前刚接触 vuejs 和想实现 前后分离的我来说 这已经很好了。目前先实现功能, 然后如果有时间或者期望大牛将signalr 改成不依赖jQuery的signalr....
  • vue项目使用signalr

    2021-11-25 16:53:31
    npm install @microsoft/signalr 使用方式 <template> <div> <input v-model="user" type="text" /> <input v-model="message" type="text" /><br /> <button @click=...
  • 这里主要记录Vue与Asp.netcore 前后端分离通过signalR通讯实践; 服务端即Asp.net Core 程序 前提:通过Nugut 引入Microsoft.AspNetCore.SignalR 包 首先编写自己的Hub public class ChatHub:Hub { public...
  • .Net core 中的SignalR JavaScript客户端已经不需要依赖Jquery了 一、服务端 1、nuget安装 Microsoft.AspNetCore.SignalR 2、在startup.cs中注册和使用signalr services.AddSignalR(); app.UseEndpoints...
  • asp.net MVC5+SignalR(消息推送),运行开两个以上窗口可进行聊天,需要VS2013及以上版本打开运行
  • 我看到有人把一个用户当着一个组,用来单对单私聊,效果是可以的,但是我个人觉得这样不对,我的方法是初始化时,把用户id跟signalr的connectionid存放到一个字典中,私聊时,传入私聊对象的用户Id,然后根据字典获取...
  • 以下是代码: const signalR = require("@microsoft/signalr"); export default { name: "mainFrame", data(){ return{ connection: "", user: "", message: "", msgList: [] } }, methods:{ init() { this....
  • 首先,介绍一下SignalR ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消息及调用方法,当然这是实时...
  • SignalR简单封装

    2018-07-22 14:35:00
    需求:Asp.Net MVC 开发客户端,实现与...Asp.Net SignalR是一个Asp.Net下的类库,可以在Asp.Net 的Web项目中实现实时通信,完美解决这个问题。关于SignalR具体的介绍可以查阅其他资料,或者查看官方文档:http://si...
  • vue-signalr-test.zip

    2020-12-07 10:39:29
    此代码是基于vue写的signalr实时通讯前后端分离中前端部分测试代码,点击按钮后端可以传递当前时间给前端进行显示
  • vue使用signalr

    千次阅读 2020-04-10 13:54:16
    1.先安装依赖: ...2.因为signalr依赖jquery,我们先配置全局jquery,这里使用的项目框架是vue-cli3+ts,所以先配置vue.config.js module.exports = { configureWebpack: { plugins: [ new webpa...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 410
精华内容 164
关键字:

signalrvue

vue 订阅