您的位置：首页 > 理论基础 > 计算机网络

SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

2018-09-18 17:13 2943 查看

SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论

异常汇总：http://www.cnblogs.com/dunitian/p/4523006.html#signalR

后台创建了一个DntHub的集线器

前台在调用的时候出现了问题（经检查是代理对象创建失败）

于是到StackOverflow上面找了下：

http://stackoverflow.com/questions/14146913/signalr-cannot-read-property-client-of-undefined

上面说改成小写就ok了，很多人也解决成功了

逆天改成小写后也解决了，var chat = $.connection.dntHub

也许很多人就直接忽略了~~~~but，我为什么这样就解决了呢？C#的命名规则就是首字母大写啊？

逆天喜欢深究一下，于是打开其动态生成的js，发现了这么一句

so，原来默认生成了的就是小写开头的，，，，，，，，(⊙o⊙)… 很多人说结束了？ NONONO

程序猿需要什么？想象力和反常规的想象力！

那么我就大胆设想，我们是不是可以指定名字呢？

上网搜了下，原来通过 HubName("xxx")可以设置名字

扩展一下，通过这个可以设置任意名字，不见得和类名相同

那么再试试？

看看动态生成的js，

嘿嘿，爽！

结论：

　　如果不自己设置HubName，那么SignalR会自动帮我们生成一个和类名相同并且以小写开头的HubName

　　这个问题有两种解决方法，一种js中用首字母小写的HubName，另一种自己指定。（前台建议都是小写）

SignalR 简单示例

一、什么是 SignalR

　　ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data.

二、简单示例

　　新建项目 SignalRChat

　　选择 Empty 模板

　　安装 SignalR

　　添加完查看 Scripts 文件夹

　　添加 Signal Hub Class (V2)

　　代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
Clients.All.broadcastMessage(name, message);
}
}
}

　　添加 OWIN Startup class

　　代码如下

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRChat.Startup))]

namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
}
}

　　添加 HTML 页面

　　代码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SignalR Simple Chat</title>
<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.6.4.min.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
$(function () {
//To enable logging for your hub's events in a browser, add the following command to your client application
$.connection.hub.logging = true;
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<li><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
</script>
</body>
</html>

　　F5 运行，复制 URL 再打开一个新浏览器窗口同时运行，分别输入 NameOne 和 NameTwo