ASP. NET SignalR with LayIM2.0 easy to implement the web chat room (v) Add Friends, add Group process, message management and instant message prompt implementation

Objective

The previous article left a small problem, in the last article forgot to write, is about Layim has been packaged to upload files or pictures of the problem. After docking a good interface, if the upload speed is slow, the interface will appear suspended animation, although the file is being uploaded. So I made a simple icon substitution to enhance the user experience.

　　Upload in ...

　　

　　When the upload is complete

　　

　is not very simple ah, next go to the point.

Business Introduction

Layim in the friends can be said to be less necessary logic, and in fact, most of the imitation of QQ, of course, business complexity is certainly not compared with QQ. The main line, that is, user a request to add User B as a friend, User B receives a message prompt click Agree or reject or directly ignore, and then feedback the message to user A. This is a relatively simple process, but the details are still more.

Actual Demo

　　The first step is to send a friend application.

　　

　The second step, receives the friend request (the small balloon is the message prompt)

　　

The third step: Message processing (here the refusal will enter the reason for the refusal, ignoring not to do the message prompt)

　　

Fourth step: The message is returned after the consent (refusal).

　　

Fifth step: End of process

　　

explanation

　　The business logic on the database is not many, the general design as long as the request table and processing results table can be, and then according to the user ID to query his own unhandled messages. May look at the above figure can not see where the instant, in fact, I in the process, the entire two browser and did not refresh the page, completely rely on the background of the hub message push to achieve. Before we do that, we need to be prepared to use a custom user ID, which is the userid in our database, not the GUID given to us in the hub. We can rewrite the GetUserID method of the interface Iuseridprovider.

namespace microsoft.aspnet.signalr{    publicinterface  iuseridprovider    {         string GetUserId (irequest request);}    }

Add custom class inherit from interface Iuseridprovider

  Public classLayimuserfactory:iuseridprovider {/// <summary>        ///Custom Get User ID method/// </summary>        /// <param name= "Request" ></param>        /// <returns></returns>         Public stringGetUserId (irequest request) {//directly read the UserID in the cookie and return the UserID, otherwise null, not logged in            if(Request. Gethttpcontext (). Request.cookies[layimconst.layim_signalr_userid]! =NULL)            {                returnrequest. Gethttpcontext (). Request.cookies[layimconst.layim_signalr_userid].            Value; }            return ""; }    }

Then in the startup file, we register this class

   Public void Configuration (Iappbuilder app)        {            /// Register custom User ID method            var New layimuserfactory ();            GlobalHost.DependencyResolver.Register (typeof(Iuseridprovider), () = useridprovider);             //Configureauth (APP);            Other code         }

Similarly, in Chatserver.layimhub, we also read the user ID in the cookie

 Public string Currentuserid        {            get            {                                var cookie = Context.Request.GetHttpContext (). Request.cookies[layimconst.layim_signalr_userid];                 if NULL return cookies. Value; }                return"";            }        }

The message is then sent to a certain user when it is called

Clients.user (Currentuserid). ReceiveMessage ("Hello, I sent you a message, with Client.user sent to you ");

What's the benefit of doing this, because if the user refreshes the page after connecting to the hub server, the user's ConnectionID will be changed, but if the message is sent using our custom UserID, as long as the same user can use UserID to send the message, Eliminates the processing of the ConnectionID. So this scenario is perfect for a message alert in the process of adding friends. For example, our application has been submitted, then the background needs to send a message to the respondent:

    Public Static voidSendMessage (ObjectMessagestringUserId, Chattoclienttype type,BOOLMoreuser =false)        {            //construct the message bodyToclientmessageresult result =NewToclientmessageresult {msg=message, Msgtype=type, other=NULL            }; //gets the current hub objectIhubcontext hub = globalhost.connectionmanager.gethubcontext<layimhub>(); //send messages to multiple users            if(Moreuser) {hub. Clients.users (Userid.split (',').            ToList ()). ReceiveMessage (result); }            Else            {                //send a message to a single userHub.            Clients.user (userId). ReceiveMessage (result); }        }

As long as this method is implemented, regardless of whether we send application information, message processing information or other information, can be called in the background. As long as the user online, you can achieve real-time push, if not on the line, even if pushed, is not received. That's the function of historical news. Don't repeat it here.

So, when the request is sent out, another client sees a message like this:

　　

Corresponding interface, is that the lower right corner of the small balloon flashing, because it is, so the flicker effect can not be seen, although very low. The implementation method is implemented by using setinterval and then controlling the text.

　　

                var i = 0;                 var function  () {
HTML alternate transformation, one will be the icon will be empty, there will be an icon flashing effect, but if you have a beautiful gif is better.                    $ ('. layim-tool-apply '). attr (' title ', msg). html (i% 2?) ': ' & #xe606; ' );                    I++                ;                } = SetInterval (blings, 500);

As for the user to open the message interface, because it is another interface, so directly read the user needs to process the message can be, when the user agrees or rejects the request, the background is also called:

public staticvoidSendMessage (Applyhandledmessgae message) { ShortAgreeflag = 1;  ShortRefuseflag = 2; //There's only news, and I agree.            if(Message.id > 0)            {                varUserID =message.applyuid.ToString (); if(Message.result = =Refuseflag) {                    //if it is rejected, you only need to send a prompt message to                                      varmsg =Newapplysendedmessage {msg= "your" + (Message.applytype = = 0?) "Friends": "Add Group") + "request has been processed, please click to view the details"                    };                SendMessage (MSG, userid, chattoclienttype.applyhandledtoclient); }                Else if(Message.result = =Agreeflag) {                    //If you agree, judge if the group, you need to send a message to the group: Someone has joined the group, if it is add friends, send a message, we have become friends, and start chatting.                     varmsg = "your" + (Message.applytype = = 0?) "Friends": "Add Group") + "request has been processed, please click to view the details"; if(Message.applytype = =ApplyType.Friend.GetHashCode ()) {                        //The friend here is to match Layim's addlist interface.SendMessage (New{friend = message.friend, msg =msg}, UserID, chattoclienttype.applyhandledtoclient); }                    Else {                        //Send group Information Group is also to match Layim's addlist interfaceSendMessage (New{Group = Message.group, msg =msg}, UserID, chattoclienttype.applyhandledtoclient); }                }            }        }

Therefore, when the application message is processed, the requester user receives the following message:

Client Message Processing:

Console.log ("Message received for application processing"); //start flashing bottom right message iconglobal.other.startTips (result.msg.msg); if(result.msg.friend) {Result.msg.friend.remark=result.msg.friend.sign; //call the Layim interface to add friends directly to the appropriate group of friendsglobal.layim.addList (result.msg.friend); }                    if(result.msg.group) {//Call the Layim interface and add the group directly to the appropriate group of friendsglobal.layim.addList (Result.msg.group); }

Here, basically add a friend process is complete, add group of the same, but add group is different, the group and the administrator can approve, so there will be a number of users to send instant messages. Also pay attention to the problem of repetitive operation when dealing with it.

Therefore, the core content of this article is the call of the hub in the background, as well as the use of custom UserID. But it seems like we're missing something, for example, prompting other members of the group: XXX has joined the group. or automatically send a request to a successful friend: "We are already friends, start chatting." "Message.

Summarize

Original aim, in fact, as long as the master, the message push mechanism, can realize the client and the server side of the Unicom. Message push can do any business. Today's buddy process is here. Are you going to do it?

Next trailer :"Intermediate" ASP. SignalR with LayIM2.0 easy to implement the web chat room (vi) Layim Source Modification Right-click menu-Friends, group management function implementation.

　　

Want to learn the small partner, can follow my blog Oh, my Qq:645857874,email:[email protected]

ASP. SignalR with LayIM2.0 Easy implementation of web chat room (v) Add Friends, add Group process, message management and instant message prompt implementation