Multi terminal message push services such as signalr self host + MVC (3)

Time:2021-7-22

1、 Overview

Recently, the project is really too busy, and the body is a bit uncomfortable, chronic pharyngitis committed, when I went to bed last night, I couldn’t breathe, I didn’t have a good rest, and I didn’t have much time to write a blog. Today, when my friend asked me when I could Send a message on the web, I was still busy changing the project. I took advantage of lunch and lunch break to make up the articles I owed before.

This chapter is mainly to realize the simple demo of multi terminal message communication, the web side of MVC sends information to the control side, etc.

2、 Creating a web client

1. Create a new webclient solution

2. Create a new project named clinet MVC under the webclient solution

3. Choose the corresponding project template according to your actual situation. Here, for demonstration, choose Internet application

4. In VS, punch in the package manager console and enter the following code


Install-Package Microsoft.AspNet.SignalR.JS

5. Modify the index.cshtml file code in the homge folder under views in the project, as follows

@{
  Layout = null;
}

<h1>Process demonstration</h1>
<input type="hidden" />
<h2></h2>

<select style="width: 100px;">
</select>
<br />
<br />
<input type="text" />
< input type = "button" value = "send" / >
<div>
  <h1></h1>
</div>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="http://localhost:10086/signalr/hubs"></script>
<script type="text/javascript">
  $(function () {
    $.connection.hub.url = 'http://localhost:10086/signalr';
    var work = $.connection.IMHub;
  
    $('# displayName'). Val (prompt ('Please enter nickname: '' '));
    $('#thisname'). Text ('current user: '+ $(' #displayname '). Val());
    var fromUser = $('#displayname').val();

    //Corresponding to the back-end SendMessage function, message receiving function
    work.client.receivePrivateMessage = function (user, message) {
      //alert(message);
      $('#messgaeInfo').append(message + '</br>');
    };

    //The loginuser callback generated after the backend sendlogin call
    work.client.onConnected = function (connnectId, userName, OnlineUsers) {
      reloadUser(OnlineUsers);
    };

    //Hub connection on
    $.connection.hub.start().done(function () {
      var username = $('#displayname').val();
      //Send online information
      work.server.register(username);

      //Click the button to send a message
      $('#send').click(function () {
        var friend = $('#username').val();
        //Call the back-end function to send the specified message
        work.server.sendPrivateMessage(friend, $("#message").val());
      });
    });
  });

  //Reload user list
  var reloadUser = function (userlist) {
    $("#username").empty();
    for (i = 0; i < userlist.length; i++) {
      $("#username").append("<option value=" + userlist[i].UserName + ">" + userlist[i].UserName + "</option>");
    }
  }
</script>

6. Before running our web client project, first run the serve console project in the previous two chapters, and then F5 run the web client project. See the following interface, enter the user with user name a to log in

7. Then open another browser, as shown in the above steps, input user B to log in, user a selects B in the drop-down item (the drop-down option will automatically add a new user when a user logs in), user B selects a, and sends information to each other for testing. The results are as follows

8. If there is no problem in the message transmission between a and B, it proves that the message transmission on the web side is successful. At this time, open the client console project in the previous chapter, run clinet.exe in bin under the project, punch in two programs, and enter the login names as C and B

9. Send a message Hello a to user C. The effect is as follows

10. Send a message to user B with user C Hello B! The effect is as follows, which proves that the control side sends messages to the web side successfully

11. Use user d to send a message to user C, as shown in the figure below, to prove that the control side message is sent successfully

12. Use a to send a message to C, as shown in the figure below

13. Use B to send a message to D, as shown in the figure below, to prove that web > control sends the message successfully

As shown above, it is proved that multi terminal communication can be realized by using signalr as owin service, and signalr as communication service alone can be separated and decoupled from other projects.

Later, I will continue to optimize and integrate rabbitmq when I have time

Writing is not good, the first time to write a blog, please give me a lot of advice

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.