从浏览器使用SignalR时,连接何时关闭?

7
我正在使用SignalR 2.0制作一个小型聊天应用程序(就像每个人一样)。
我有一个win8.1应用程序,当应用程序关闭时,hub会接收到OnDisconnected事件并从列表中删除用户。 Hub向每个客户端发送用户已离开聊天室的消息,以便我们可以看到用户已经离开。
但是当我在网页中使用SignalR和Javascript时,如果页面被关闭,hub不会被通知到标签/浏览器已关闭...
有没有任何想法如何关闭连接?
我的代码如下:
启动Hub
[assembly: OwinStartup(typeof(ChatServer.Startup))]

namespace ChatServer
{
public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        // Map all hubs to "/signalr"
        app.MapSignalR();
    }
}
}

集线器

[HubName("ChatHub")]
public class ChatHub : Hub
{
    private static List<User> Users = new List<User>();
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message, DateTime.Now);
    }

    public void UserConnected(string name)
    {
        Clients.Caller.connected(JsonConvert.SerializeObject(Users));
        User user = new User() { Name = name, ConnectionID = Context.ConnectionId };
        Clients.Others.userConnected(JsonConvert.SerializeObject(user));
        Users.Add(user);
    }

    public void UserLeft()
    {
        if(Users.Any(x=>x.ConnectionID == Context.ConnectionId))
        {
            User user = Users.First(x => x.ConnectionID == Context.ConnectionId);
            Users.Remove(user);
            Clients.Others.userLeft(JsonConvert.SerializeObject(user), Context.ConnectionId);
        }
    }

    public override System.Threading.Tasks.Task OnDisconnected()
    {
        // Only called when win8.1 app closes
        // Not called when browsers closes page
        UserLeft();
        return base.OnDisconnected();
    }
}

HTML - JavaScript:

JavaScript:

chat = new function () {

var ChatHub;
// Connecting to the hub
this.attachEvents = function () {
    if ($.connection != null) {
        ChatHub = $.connection.ChatHub;
       $.connection.hub.start({ transport: 'auto' }, function () {
            // Register client on hub
            ChatHub.server.userConnected("web name");
        });
    }

    this.send = function (name,message) {
        if ($.connection != null) {
                //Send chat message
                ChatHub.server.send(name, message).fail(function (e) {
                    alert(e);
                });
        }
    }
  }
};

 window.onbeforeunload = function (e) {
    //This is called when we close the page
    $.connection.hub.stop();
    return "You killed me! :'(";
};

Win8.1客户端

    internal async void ConnectToHub(string userName)
    {
        try
        {
            HubConnection hubConnection = new HubConnection(SERVER_PROXY);
            chat = hubConnection.CreateHubProxy("ChatHub");
            Context = SynchronizationContext.Current;

            MakeHubFunctionsAvailableOnClient();

            await hubConnection.Start();
            // Register client on hub
            await chat.Invoke("UserConnected", userName);
        }
        catch (Exception)
        {
            throw;
        }
    }

    private void MakeHubFunctionsAvailableOnClient()
    {
        //Receive chat messages
        chat.On<string, string, DateTime>("broadcastMessage",
                (name, message, date) => Context.Post(
                    delegate {
                        Messages.Add(new UserMessage() { Message = message, User = name, Date = date }); 
                    }, null
                )
        );

        //Receive all online users
        chat.On<string>("connected",
                (users) => Context.Post(
                    delegate
                    {
                        List<User> userList = JsonConvert.DeserializeObject<List<User>>(users);
                        foreach (User user in userList)
                        {
                            Users.Add(user);
                        }
                        Messages.Add(new UserMessage() { Message = "CONNECTED", User = "System", Date = DateTime.Now }); 
                    }, null
                )
        );

        //New user connected
        chat.On<string>("userConnected",
                (user) => Context.Post(
                    delegate
                    {
                        User newUser = JsonConvert.DeserializeObject<User>(user);
                        Users.Add(newUser);
                        Messages.Add(new UserMessage() { Message = newUser.Name + " CONNECTED", User = "System", Date = DateTime.Now }); 
                    }, null
                )
        );

        //User left, remove user from list on client
        chat.On<string>("userLeft",
                (user) => Context.Post(
                    delegate
                    {
                        User newUser = JsonConvert.DeserializeObject<User>(user);
                        User y = Users.First(x=>x.ConnectionID == newUser.ConnectionID);
                        bool ux  = Users.Remove(y);
                        Messages.Add(new UserMessage() { Message = newUser.Name + " left the conversation", User = "System", Date = DateTime.Now });
                    }, null
                )
        );
    }

当我关闭标签/浏览器/导航到其他网站时,我的中心不会触发OnDisconnected事件。

我使用的浏览器是什么?
Chrome:版本32.0.1700.68 beta-m
Internet Explorer 11

2个回答

15

我猜你的问题是如何检测特定用户是否离开或关闭了浏览器。当用户进入或离开时,向其他用户发送通知。

我认为问题在于您没有正确处理OnConnectedOnDisconnected。 要使其正常工作,首先需要知道连接到hub的每个客户端都传递一个唯一的连接ID。您可以在hub上下文的Context.ConnectionId属性中检索此值。当每个客户端进入时,它们通过OnConnected,当它们离开时,它们通过OnDisconnected。以下是一个可行的示例:

Hub类

[HubName("ChatHub")]
    public class ChatHub : Hub
    {
        private static List<User> Users = new List<User>();
        public void Send(string message)
        {
            var name = Context.User.Identity.Name;
            Clients.All.broadcastMessage(name, message, DateTime.Now.ToShortDateString());
        }
        public override Task OnConnected()
        {
            User user = new User() { Name = Context.User.Identity.Name, ConnectionID = Context.ConnectionId };
            Users.Add(user);
            Clients.Others.userConnected(user.Name);
            return base.OnConnected();
        }
        public override Task OnDisconnected()
        {
            if (Users.Any(x => x.ConnectionID == Context.ConnectionId))
            {
                User user = Users.First(x => x.ConnectionID == Context.ConnectionId);
                Clients.Others.userLeft(user.Name);   
                Users.Remove(user);
            }
            return base.OnDisconnected();
        }
    }

查看

<input type="text" id="message" />
<button class="btn">Send</button>
<ul id="contents"></ul>

@section scripts
{
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.signalR-2.0.1.js"></script>
    <script src="/signalr/hubs"></script>

    <script>

        var chatHub = $.connection.ChatHub;
        chatHub.client.broadcastMessage = function (name, message, time) {
            var encodedName = $('<div />').text(name).html();
            var encodedMsg = $('<div />').text(message).html();
            var encodedTime = $('<div />').text(time).html();
            $('#contents').append('<li><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</strong>:&nbsp;&nbsp;' + encodedTime + '</li>');
        };
        chatHub.client.userConnected = function (data) {          
            $('#contents').append('<li>Wellcome<strong>' + '</strong>:' + data + '</li>');
        };
        chatHub.client.userLeft = function (data) {
            $('#contents').append('<li>Bye<strong>' + '</strong>:' + data + '</li>');
        };
        $(".btn").on("click", function() {
            chatHub.server.send($("#message").val());
        });
        $.connection.hub.start().done(function() {
            console.log("connected...");
        });
    </script>
}

问题在于当浏览器关闭/用户导航到另一个页面或用户关闭选项卡时,中心不会触发OnDisconnected。即使我调用$.connection.hub.stop();。 附注:我已经更新了我的问题并添加了一些代码。 - brouckaertd
嗨@Lin,如果我执行你的代码,我会得到这些错误:"Uncaught TypeError: Object #<Object> has no method 'connected'"。当我记录客户端对象-> console.log($.connection.ChatHub.client);结果为:Object {}。如果我使用小写c的ChatHub,则chathub未定义。 - brouckaertd
嗨@brouckaertd,我猜问题在于您的hub类中没有OnConnected函数。我为您创建了一个类似的聊天功能,请看一下。 - Lin
回答有点晚了,但是onConnected事件是可重写的。据我所知,这意味着它总是被调用。如果我使用自定义代码实现onConnected事件,我认为这并不能解决我的问题。 但我会尝试您的代码,并希望它能起作用。 - brouckaertd
我使用我的中心与你的客户端。它可以正常工作!谢谢!现在只需要确定我们代码之间的区别。 - brouckaertd

8
您可能遇到了此处描述的问题:https://github.com/SignalR/SignalR/issues/2719 简而言之,Chrome 31引入了一个错误,已经在Chrome Canary中修复,导致SignalR无法立即触发OnDisconnected。
如果是这种情况,您可以使用我在该问题中提出的解决方法,将以下内容添加到您的JS代码中。
window.onbeforeunload = function (e) {
    $.connection.hub.stop();
};

即使存在这个bug,并且没有使用解决方法,我仍然期望SignalR在浏览器退出托管SignalR页面约35秒后引发OnDisconnected事件。

您能否提供更多关于哪些浏览器以及在什么情况下遇到此问题的细节?(例如关闭选项卡、关闭窗口、刷新、导航到同一站点上的另一个页面、导航到不同的站点等)


我已经在我的问题中添加了一些代码和信息。 当我使用$.connection.hub.stop();时,hub不会触发OnDisconnected。即使我等待35秒或更长时间。 - brouckaertd

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接