最近在学习SignalR服务器实时推技术，写了个Demo，普通的Asp.netWeb应用程序，IIS访问地址为http://localhost/SignalR_Test/Paint.html，用VS自带的IISExpress测试没有任何问题，在部署到IIS之后就出问题了。
加载页面时弹出JS报错：无法获取未定义或 null 引用的属性“client”，$.connection访问
Hub-Proxy返回一个null对象。
IIS版本为IIS8，检查应用程序池，Framework4.0，集成模式。IIS部署没有问题。
使用IE自带的抓包工具发现在获取signalr/Hubs时，返回404：
发现请求地址中应用程序名称SignalR_Test不见了,直接在IE中访问http://localhost/SignalR_Test/signalr/hubs能得到hubs返回的js文件
检查代码，将hubs的引用路径前部的“/”去掉后，SignalR正常运行！
最后说一下这个Demo，是个类似以前人人网的一个你画我猜的社交类游戏。
CSS渣，各位自重。。。
画画者页面：
答题者页面：
代码：
Paint.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>你画我猜网页版</title>
<style>
.left, .center, .right {
float: left;
height: 600px;
}
.left, .right {
background-color: lightgrey;
230px;
font-family: 'Microsoft YaHei';
color: brown;
}
.center {
804px;
}
.left .ctop {
height: 50px;
}
.left .cbottom {
height: 550px;
}
.left .cbottom .subanswer {
padding-top: 15px;
text-align: center;
}
.control-ops {
background-color: burlywood;
padding-top: 69px;
text-align: center;
}
.btnCss {
background-color: yellow;
color: red;
}
#ans {
150px;
}
#user {
color: coral;
}
#cntusers {
color: darkorchid;
text-align: center;
}
</style>
</head>
<body>
<div class="left">
<div class="ctop">
画题：<label id="subject"></label>
</div>
<div class="cbottom">
<div>
答案：<input id="ans" />
</div>
<div class="subanswer">
<input type="button" id="subAnswer" class="btnCss" value="提交" />
</div>
</div>
</div>
<div class="center">
<div>
<canvas id="myCanvas" width="800" height="500" style="border:2px solid #6699cc"></canvas>
<img id="img1" width="800" height="500" style="display:none" />
</div>
<div class="control-ops">
<button type="button" class="btnCss" onclick="javascript:clearArea();return false;">清空画板</button>
画笔直径 : <select id="selWidth">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="9" selected="selected">9</option>
<option value="11">11</option>
</select>
颜色 : <select id="selColor">
<option value="black">black</option>
<option value="blue" selected="selected">blue</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="gray">gray</option>
</select>
<input type="button" id="sendmessage" class="btnCss" value="完成画画" />
</div>
</div>
<div class="right">
<div>
欢迎你，<label id="user"></label>!
</div>
<div>用户列表：<label id="cntusers"></label></div>
</div>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.2.js"></script>
<script src="signalr/hubs"></script>
<script>
//窗口最大化
self.moveTo(0, 0);
self.resizeTo(screen.availWidth, screen.availHeight);
var mousePressed = false;
var lastX, lastY;
var ctx;
var uName;
$(function () {
while (uName == "" || uName == null) {
uName = prompt("Enter your name:", "");
}
$("#user").text(uName);
var tname = $("#user").text();
//--------------------提供服务器调用--------------------//
// Declare a proxy to reference the hub.
var chat = $.connection.paintHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastAnswer = function (data) {
$("#subject").text(data);
};
chat.client.broadcastHostName = function (data) {
if (tname != data) {
//猜的人
$("#subject").text('****(' + $("#subject").text().length + '个字)');
$('#myCanvas').css("display", "none");
$('#img1').css("display", "");
}
else {
//画的人
$('#ans').css("display", "none");
$('#subAnswer').css("display", "none");
}
};
chat.client.getAllUser = function (data) {
$("#cntusers").text('');
var parsedJson = jQuery.parseJSON(data);
$.each(parsedJson, function (cnt, item) {
$("#cntusers").append("<div>" + item.Name + "</div>");
});
};
chat.client.broadcastMessage = function (imgData) {
// Add the message to the page.
$("#img1").attr("src", imgData);
$("#img1").css("display", "");
$("#myCanvas").css("display", "none");
};
chat.client.checkAnswer = function (data, name) {
if (data != "") {
alert('恭喜【' + name + '】猜中答案！');
location.reload()
}
else {
if (tname == name)
alert('很遗憾，你没有猜中！');
}
};
//--------------------主动发送服务器---------------------//
// Start the connection.
$.connection.hub.start().done(function () {
//新增用户
chat.server.addPeople(uName);
//获取谜底
chat.server.getAnswer();
//获取画画者
chat.server.getPeopleName();
//发送图片
$('#sendmessage').click(function () {
// Call the Send method on the hub.
var c = document.getElementById("myCanvas");
var imgURI = c.toDataURL("image/jpg");
chat.server.send(imgURI);
});
//提交答案
$('#subAnswer').click(function () {
// Call the Send method on the hub.
var answer = $("#ans").val();
chat.server.checkAnswer(uName, answer);
});
});
ctx = document.getElementById('myCanvas').getContext("2d");
$('#myCanvas').mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$('#myCanvas').mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$('#myCanvas').mouseup(function (e) {
mousePressed = false;
});
$('#myCanvas').mouseleave(function (e) {
mousePressed = false;
});
});
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
</script>
</body>
</html>
PaintHub.cs：
using Microsoft.AspNet.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SignalRTest
{
public class PaintHub : Hub
{
static List<User> users; //用户集合
static string subjectName; //答案
static string hostName; //当前画画者
public PaintHub()
{
#region " 初始化 "
if (users == null)
{
users = new List<User>();
}
if (string.IsNullOrEmpty(subjectName))
{
subjectName = GetSubjectName();
}
if (string.IsNullOrEmpty(hostName) && users.Count > 0)
{
hostName = GetHostName();
}
#endregion
}
public void GetAnswer()
{
if (string.IsNullOrEmpty(subjectName))
{
subjectName = GetSubjectName();
}
Clients.All.broadcastAnswer(subjectName);
}
public void GetPeopleName()
{
var people = users.FirstOrDefault((p) => p.IsHost == true);
if (people != null)
{
Clients.All.broadcastHostName(people.Name);
}
}
public void Send(string message)
{
Clients.All.broadcastMessage(message);
}
public void AddPeople(string uname)
{
var user = users.FirstOrDefault((p) => p.Name == uname);
if (user == null)
{
User u = new User();
u.Name = uname;
u.IsHost = false;
users.Add(u);
}
string data = Newtonsoft.Json.JsonConvert.SerializeObject(users);
//int data = users.Count;
Clients.All.getAllUser(data);
}
public void CheckAnswer(string uname, string answer)
{
string data;
if (answer == subjectName)
{
data = "uname";
User host_new = users.FirstOrDefault((p) => p.Name == uname);
if (host_new != null)
{
//上次画画的人下次猜
User host_old = users.FirstOrDefault((p) => p.IsHost == true);
if (host_old != null)
{
host_old.IsHost = false;
}
//猜对的人下次画
host_new.IsHost = true;
//重新获取题目
subjectName = GetSubjectName();
}
}
else
{
data = "";
}
Clients.All.checkAnswer(data, uname);
}
private string GetSubjectName()
{
string[] arrSubject = new string[] { "鸟", "鱼", "飞机", "熊猫", "老虎", "鳄鱼", "马" };
int index = new Random().Next(arrSubject.Length);
return arrSubject[index];
}
private string GetHostName()
{
int index = new Random().Next(users.Count);
users[index].IsHost = true;
return users[index].Name;
}
}
public class User
{
//名称
public string Name
{
get; set;
}
//性别
public bool IsHost
{
get; set;
}
}
}