vue中使⽤signalR总结（前端代码）
⼀、SignalR 是什么？
ASP.NET SignalR 是⼀个⾯向 ASP.NET 开发⼈员的库，可简化将实时 web 功能添加到应⽤程序的过程。 实时 web 功能是让服务器代码将内容推送到连接的客户端⽴即可⽤，⽽不是让服务器等待客户端请求新数据的能⼒。
SignalR 是开放源代码，可通过访问。
⼆、Vue中使⽤SignalR
signalR包已经不更新，请使⽤新版@microsoft/signalr，查看新⽂档使⽤
在Vue项⽬中使⽤SignalR
⾸先安装 SignalR 的package，需要注意的是 SignalR 依赖 jQuery。
npm i signalr jquery --save
为了⽅便，在f.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('localhost:8080');
//如果前后端为同⼀个端⼝，可不填参数。如果前后端分离，这⾥参数为服务器端的URL
var demoChatHubProxy = ateHubProxy('demoChatHub');
// demoChatHub为后端定义，使⽤驼峰式命名，后端⾸字母必须⼤写
// addMessageToList 为后端demoChatHub⽅法
<('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'}); // 传递参数对象
jquery是什么有什么作用
demoChatHubProxy.invoke('newChatMessage', name, message);  //传递参数列表
3. 服务器端调⽤客户端⽅法
⾸先客户端要注册⽅法才能让服务器端调⽤，使⽤ on ⽅法注册。
<('addMessageToList', function(userName, message) {
console.log(userName + ' ' + message);
});
4. ⽣命周期⽅法
// starting：通过连接发送任何数据之前引发。
// received：在连接上接收到任何数据时引发。提供接收到的数据。
// connectionSlow：当客户端检测到慢速或频繁删除连接时引发。
/
/ reconnecting：基础传输开始重新连接时引发。
// reconnected：当基础传输已重新连接时引发。
// stateChanged：连接状态更改时引发。提供的旧状态和新的状态（连接、已连接、正在重新连接或已断开连接）。// disconnected：当连接已断开连接时引发。
connection.start()
.done(()=>{
// .....
})
.fail(()=>{
// ...
})
<((error)=>{
console.log(error)
})
console.log('reconnected')
})
connection.disconnected(()=>{
console.log('disconnected')
})
console.log('received')
console.log(data)
})
console.log('connectionSlow')
})
参考⽂章

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。