vue中使用signalR总结(前端代码)
一、SignalR 是什么?ASP.NET SignalR 是一个面向 ASP.NET 开发人员的库,可简化将实时 web 功能添加到应用程序的过程。实时 web 功能是让服务器代码将内容推送到连接的客户端立即可用,而不是让服务器等待客户端请求新数据的能力。SignalR 可用于将任何类型的"实时"web 功能添加到 ASP.NET 应用程序。尽管聊天通常用作示例,您可以更为很
·
一、SignalR 是什么?
ASP.NET SignalR 是一个面向 ASP.NET 开发人员的库,可简化将实时 web 功能添加到应用程序的过程。 实时 web 功能是让服务器代码将内容推送到连接的客户端立即可用,而不是让服务器等待客户端请求新数据的能力。
SignalR 是开放源代码,可通过访问GitHub。
二、Vue中使用SignalR
signalR包已经不更新,请使用新版@microsoft/signalr,查看新文档使用
在Vue项目中使用SignalR
首先安装 SignalR 的package,需要注意的是 SignalR 依赖 jQuery。
npm i signalr jquery --save
为了方便,在webpack.base.conf.js中注册全局的jQuery
const webpack = require('webpack')
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'root.jQuery': 'jquery'
})
]
然后在main.js中引入 SignalR
import 'signalr'
1.建立连接
var connection = $.hubConnection('http://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')
})
参考文章
更多推荐
所有评论(0)