SignalR2.1部署IIS服务器无法推送消息

最新推荐文章于 2023-03-13 21:58:20 发布

abs69944

最新推荐文章于 2023-03-13 21:58:20 发布

阅读量702

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/Kelly-Zheng/p/5215397.html

版权

最近在学习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;
            width: 230px;
            font-family: 'Microsoft YaHei';
            color: brown;
        }

        .center {
            width: 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 {
            width: 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" οnclick="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;
        }
    }
}

转载于:https://www.cnblogs.com/Kelly-Zheng/p/5215397.html

abs69944

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SignalR2.1部署IIS服务器无法推送消息

最近在学习SignalR服务器实时推技术，写了个Demo，普通的Asp.netWeb应用程序，IIS访问地址为http://localhost/SignalR_Test/Paint.html，用VS自带的IISExpress测试没有任何问题，在部署到IIS之后就出问题了。加载页面时弹出JS报错：无法获取未定义或 null 引用的属性“client”，$.connec...
复制链接

扫一扫