vue中使用signalR总结(前端代码）

时间：2024-05-21 13:12:20

一、SignalR 是什么？

ASP.NET SignalR 是一个面向 ASP.NET 开发人员的库，可简化将实时 web 功能添加到应用程序的过程。 实时 web 功能是让服务器代码将内容推送到连接的客户端立即可用，而不是让服务器等待客户端请求新数据的能力。

SignalR 可用于将任何类型的"实时"web 功能添加到 ASP.NET 应用程序。 尽管聊天通常用作示例，您可以更为很多。 只要用户刷新 web 页面以查看新数据或页面实现长轮询若要检索新数据，可以考虑对它使用 SignalR。 示例包括仪表板和监视应用程序，协作应用程序 （如同时进行编辑的文档） 时，作业的进度更新，并实时窗体。

SignalR 还能让全新类型的 web 应用程序需要高频率更新从服务器中，例如，实时游戏。

SignalR 提供一个简单的 API，用于创建从服务器端.NET 代码中调用 JavaScript 函数在客户端浏览器 （和其他客户端平台） 的服务器到客户端的远程过程调用 (RPC)。 SignalR 还包括连接管理的 API （例如，连接和断开连接事件），并对连接进行分组。

vue中使用signalR总结(前端代码）

SignalR 自动处理的连接管理，并允许您将消息广播到所有连接的客户端同时，如聊天室。 您还可以将消息发送到特定的客户端。 客户端和服务器之间的连接是持久性的与不同的是经典的 HTTP 连接，这是重新建立的每个通信。

SignalR 支持"服务器推送"功能，在其中服务器代码可以调用远程过程调用 (RPC)，而不是常见请求-响应模式目前上使用 web 浏览器中的客户端代码。

SignalR 应用程序可以横向扩展到数千个客户端使用服务总线、 SQL Server 或Redis。

SignalR 是开放源代码，可通过访问GitHub。

SignalR 和 WebSocket

SignalR 使用新的 WebSocket 传输 （如果有），并在必要时回退到较旧的传输。 尽管您当然可以编写您的应用程序直接使用 WebSocket，并使用 SignalR 意味着已为你自动完成了大量的额外功能需要实现。 最重要的是，这意味着您可以编写代码应用程序以充分利用 WebSocket 而无需担心如何为旧版客户端创建单独的代码路径。 SignalR 还使你免受无需担心对 WebSocket，更新，因为 SignalR 将更新以支持基础传输中的更改的 WebSocket 版本间提供你的应用程序一致的接口。

传输和回退

SignalR 是一种抽象，通过某些要求进行客户端和服务器之间的实时工作的传输。 SignalR 连接作为 HTTP，启动，然后升级到 WebSocket 连接是否可用。 WebSocket 是 SignalR 的理想之选传输，因为它使服务器内存的最有效地使用，具有最低的延迟，并且具有最基本功能 （如完整双工客户端和服务器之间的通信），但它还具有最严格要求：WebSocket 要求要使用 Windows Server 2012 或 Windows 8 和.NET Framework 4.5 的服务器。 如果不满足这些要求，SignalR 将尝试使用其他传输以其连接。

HTML 5 传输

这些传输协议依赖于支持HTML 5。 如果客户端浏览器不支持 HTML 5 标准，将使用较旧的传输。

  • WebSocket (如果服务器和浏览器指示它们可以支持 Websocket)。 WebSocket 是建立的则返回 true 的持久的双向连接客户端和服务器之间的唯一传输。 但是，WebSocket 还具有最严格的要求;它完全支持仅在最新版本的 Microsoft Internet Explorer、 Google Chrome 和 Mozilla Firefox 和 Opera 和 Safari 等其他浏览器中只有部分实现。
  • 服务器发送事件，也称为 EventSource （如果在浏览器支持服务器发送事件，它基本上是除 Internet Explorer 的所有浏览器）。

监视传输

您可以确定应用程序在中心上的日志记录和在浏览器中打开控制台窗口，从而使用什么传输。

若要启用浏览器中的中心的事件日志记录，客户端应用程序中添加以下命令：

$.connection.hub.logging = true;

  • 在 Internet Explorer 中，通过按 F12 打开开发人员工具，并单击控制台选项卡。

    vue中使用signalR总结(前端代码）

  • 在 Chrome 中，通过按 Ctrl + Shift + J 打开控制台。

    vue中使用signalR总结(前端代码）

控制台打开和启用日志记录后，你可以查看 SignalR 正在使用哪种传输。

vue中使用signalR总结(前端代码）

 

API指南-JavaScript客户端(见官网或https://blog.****.net/weichaoya/article/details/88079573)

 

二、Vue中使用SignalR

在Vue项目中使用SignalR
首先安装 SignalR 的package，需要注意的是 SignalR 依赖 jQuery。

npm i signalr jquery --save

为了方便，在webpack.base.conf.js中注册全局的jQuery

var webpack = require('webpack')

plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'root.jQuery': 'jquery'
    })
]


然后在main.js中引入 SignalR

import 'signalr'

在Vue项目里面，如果前后端分离，不会这样引用：

<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>

而且在客户端方法中如果要使用多个事件处理器时，不能使用generated proxy。

1.建立连接

var connection = $.hubConnection('localhost:8080');
//如果前后端为同一个端口，可不填参数。如果前后端分离，这里参数为服务器端的URL
var demoChatHubProxy = connection.createHubProxy('demoChatHub');
// demoChatHub为后端定义，使用驼峰式命名，后端首字母必须大写
// addMessageToList 为后端demoChatHub方法
demoChatHubProxy.on('addMessageToList', function(userName, message) {
    console.log(userName + ' ' + message);
});  
connection.start()
    .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
    .fail(function(){ console.log('Could not connect'); });

需要注意的是，开始连接之前（调用 start 方法之前），最好注册至少一个事件处理方法，如果没有注册的话，Hubs的 OnConnected 方法将不会被调用，那么客户端的方法就不能被服务端调用（这容易埋坑，所以要提前注册方法）。

2.客户端如何调用服务器端方法

使用 invoke，注意调用服务器端的方法名首字母可以不大写，如果方法名称要限制必须大写，需要后端做配置。

demoChatHubProxy.invoke('newChatMessage', {name:'a',message:'b'}); // 传递参数对象
demoChatHubProxy.invoke('newChatMessage', name, message);  //传递参数列表

3. 服务器端调用客户端方法

首先客户端要注册方法才能让服务器端调用，使用 on 方法注册。

demoChatHubProxy.on('addMessageToList', function(userName, message) {
    console.log(userName + ' ' + message);
});

4. 生命周期方法

// starting：通过连接发送任何数据之前引发。
// received：在连接上接收到任何数据时引发。 提供接收到的数据。
// connectionSlow：当客户端检测到慢速或频繁删除连接时引发。
// reconnecting：基础传输开始重新连接时引发。
// reconnected：当基础传输已重新连接时引发。
// stateChanged：连接状态更改时引发。 提供的旧状态和新的状态 （连接、 已连接、 正在重新连接或已断开连接）。
// disconnected：当连接已断开连接时引发。

connection.start()
    .done(()=>{
        // .....
    })
    .fail(()=>{
        // ...
    })
connection.error((error)=>{
    console.log(error)
})
   
connection.reconnected(()=>{
    console.log('reconnected')
})
    
connection.disconnected(()=>{
    console.log('disconnected')
})

connection.received((data)=>{
    console.log('received')
    console.log(data)
})
    
connection.connectionSlow(()=>{
    console.log('connectionSlow')
})

参考文章

https://www.cnblogs.com/iphonex/p/7527600.html

https://docs.microsoft.com/zh-cn/aspnet/signalr

相关文章