Group push for ASP.NET SignalR series (five)

In the last chapter, we introduce the one to one push mode. This chapter focuses on the next group push and multi person push.

Groups use methods primarily: Groups. Add (Context. ConnectionId, groupName); add different connection IDs to the same group name

The following is a demonstration of the functions of group chat.

Server code:

　　　　 /// <summary>
        /// Send to specified group/// </summary>
        public void CallGroup(string fromname, string content)
        {
            string groupname = Context.QueryString["groupname"]; //Get the user name sent by the client.//Get the corresponding ConnectionId according to username.
            Clients.Group(groupname).show(fromname+":"+content);
        }
        //Group Chat
        public override Task OnConnected()
        {
            string groupname = Context.QueryString["groupname"]; //Get the user name sent by the client.
            JoinGroup(groupname);//Join the group
            return base.OnConnected();
        }
        public override Task OnDisconnected(bool stopCalled)
        {
            string groupname = Context.QueryString["groupname"]; //Get the user name sent by the client.
            LeaveGroup(groupname);//Remove group
            return base.OnDisconnected(true);
        }
        public Task JoinGroup(string groupName)
        {
            return Groups.Add(Context.ConnectionId, groupName);
        }

        public Task LeaveGroup(string groupName)
        {
            return Groups.Remove(Context.ConnectionId, groupName);
        }

Front-end, we create two directories, martial arts and comedy, each with 1. HTML and 2. HTML to represent two people chatting.

The following front-end code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.10.2.min.js"></script>
    <script src="/Scripts/jquery.signalR-2.3.0.min.js"></script>
    <script src="/signalr/hub/hubs"></script>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            margin: 20px;
        }

        .input {
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <div>
        <h4>Swordsman group -- Yang Guo</h4>
        <p>
            <input type="text" id="content" placeholder="" class="input" /> &nbsp;&nbsp;<input type="button" value="Send " class="btn btn-sm btn-info" id="btn_send" />
        </p>

        <div>
            <h4>Information received:</h4>
            <ul id="dataContainer"></ul>
        </div>
    </div>

    <script language="javascript">
    $(function() {
        var chat = $.connection.demoHub; //Connect to the server hub, demoHub is the server hub name, and the initials on JS must be lowercase (system default)
        //Define a client method that must be consistent with the method name and parameters in the server hub.
        //In fact, the server calls the front-end JS method (subscription).
        $.connection.hub.qs = { 'groupname': 'Swordsman' }
        chat.client.show=function(content) {
            var html = '<li>' + htmlEncode(content) + "</li>";
            $("#dataContainer").append(html);
        }

        //Definition push
        $.connection.hub.start()
            .done(function() {
                $("#btn_send").click(function() {
                    chat.server.callGroup("Yang Guo", $("#content").val());  //The content content of the client is sent to the server side.
                    $("#content").val("");
                });
            });
    });
    //Code
    function htmlEncode(value) {
        var encodedValue = $('<div />').text(value).html();
        return encodedValue;
    }
    </script>
</body>
</html>

The other front-end side is not pasted, that is, to change the groupname parameter, as well as the call group inside the first parameter to change.

The following is the effect picture:

From the above results, we can see that two groups have been implemented to chat independently, and the content does not affect each other.

This is the main use of the Group object, of course, the name of the group is passed through the front-end, in real projects can also be implemented in various other ways.

The end of this chapter

Leave a Reply Cancel reply