실시간 웹 채팅 예제 코드에 대한 Asp.net MVC SignalR에 대한 자세한 설명

이 글은 주로 Asp.net 실시간 웹 채팅용 SignalR 예제 코드를 소개하며, 관심 있는 친구들이 참고할 수 있습니다.

이 장에서 공유하는 내용은 Signal R Framework를 사용하고 있습니다. 간단한 그룹 채팅 기능을 만듭니다. .Net의 MVC에서 이 프레임워크를 사용하는 방법을 주로 설명합니다. 이 프로젝트에는 공식 문서(물론 모두 영어로 작성됨)가 있으므로 나중에 공유 글을 쓰지 않겠습니다. 친구들이 웹 실시간 통신을 사용해야 할 때 더 많은 솔루션을 제공할 수 있습니다. 결국 이것은 Microsoft가 홍보하는 솔루션 중 하나입니다.

SignalR Online소개

ASP.NET SignalR은 애플리케이션에 실시간 웹 기능을 추가하는 프로세스를 단순화하는 ASP.NET 개발자용 라이브러리입니다. 실시간 웹 기능은 클라이언트가 새 데이터를 요청할 때까지 서버가 기다리지 않고 서버 코드가 연결된 클라이언트에 콘텐츠가 제공되는 즉시 콘텐츠를 푸시할 수 있는 기능입니다.

SignalR은 물론 매우 간단하고 사용하기 쉬운 고급 API도 제공합니다. 이를 통해 서버는 클라이언트의 JavaScriptfunction을 개별적으로 또는 일괄적으로 호출할 수 있으며 매우 편리합니다. 클라이언트가 서버 측에 연결하거나 연결이 끊어지는 경우, 클라이언트 측 그룹화 및 클라이언트 측 인증과 같은 연결 관리를 수행하는 것은 모두 SignalR을 사용하여 매우 쉽게 구현할 수 있습니다.

SignalR은 ASP .NET에 클라이언트와의 실시간 통신을 제공합니다. 물론, 이것은 사용하기 쉽고 충분한 확장성을 가지고 있습니다. 과거에는 사용자가 실시간 데이터 표시를 위해 페이지를 새로 고치거나 Ajax 폴링을 사용해야 했지만 이제는 SignalR을 사용하면 됩니다. 가장 중요한 점은 프로젝트를 다시 만들 필요가 없으며 기존 ASP .NET 프로젝트를 사용하여 SignalR을 원활하게 사용할 수 있다는 것입니다.

그룹 채팅 인스턴스 효과

먼저 테스트 케이스의 효과를 살펴보겠습니다. 렌더링:

여기에서는 스타일이 매우 간단합니다. 여기에 관련된 기능은 다음과 같습니다.

1. 온라인 사용자 수 계산

2. 온라인 사용자의 닉네임 및 연결 방법 표시(이 테스트 사례는 webSockets 및 longPolling(긴 연결)을 지원합니다) 3. 그룹 채팅 정보

MVC에서 SignalR을 사용하는 방법먼저 일반적으로 MVC 웹 프로젝트를 만든 다음 Nuget 콘솔 명령을 사용합니다. Inst

all

-package Microsoft.AspNet.SignalR을 추가합니다. 자동으로 추가되는 패키지는 다음과 같습니다.

 <package id="Microsoft.AspNet.SignalR" version="2.2.2" targetFramework="net45" />
 <package id="Microsoft.AspNet.SignalR.Core" version="2.2.2" targetFramework="net45" />
 <package id="Microsoft.AspNet.SignalR.JS" version="2.2.2" targetFramework="net45" />
 <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.2.2" targetFramework="net45" />

그리고 관련 js 파일을 MVC 프로젝트의 Script 폴더에 자동으로 추가합니다:

jquery

.signalR-2.2.2.min.js
jquery.signalR -2.2.2.js

그런 다음 프로젝트 1차 디렉터리에 Startup.cs라는 파일 이름을 가진 클래스를 만들어야 하며, 그 안에 있는 주요 콘텐츠는 완료될 수 없습니다.

[assembly: OwinStartup(typeof(Stage.Api.Extend.Startup))]
namespace Stage.Api.Extend
{
  public class Startup
  {
    public void Configuration(IAppBuilder app)
    {
      app.MapSignalR("/chat", new Microsoft.AspNet.SignalR.HubConfiguration
      {
        EnableDetailedErrors = true,
        EnableJavaScriptProxies = true
      });
    }
  }
}

먼저 관심을 분석합니다. 위에서 아래로:

1. 전달된

ConstructorOwinStartup(Type) 는 우리가 만든 Startup 클래스에 해당하며, 2는

네임스페이스

입니다. namespace Stage.Api.Extend 3. 함수는 고정되어 있으며, 여기서 프로그램은 먼저 이 메소드를 입력하여 내부의 논리 코드를 실행합니다.

는 확장된 IAppBuilder

인터페이스입니다. 다양한 형태의 표현이 있습니다. 여기서는 public <a href="http://www.php.cn/wiki/188.html" target="_blank">static<code>public void Configuration(IAppBuilder app) IAppBuilder MapSignalR(이 IAppBuilder)을 선택합니다. builder, string

경로, HubConfiguration 구성 , 여기서는 우리의 것과 약간 비슷해 보입니다. MVC의

routingapp.MapSignalR 에서 주목해야 할 주요 사항은 Path 매개변수입니다. 프런트 엔드에서는 페이지를 생성할 때 이 경로를 사용해야 합니다.

到这里后台需要的配置其实已经就完成了，下面是具体需要操作的业务逻辑处理类，新建一个类(这里我取名为ChatHub)并继承Hub(这是SignalR框架提供)，然后里面的逻辑代码如下：

public class ChatHub : Hub
  {
    //
    public int Num = 10001;
    public static List<MoHubUser> _Users = new List<MoHubUser>();

    /// <summary>
    /// 添加聊天人
    /// </summary>
    /// <param name="user"></param>
    public void AddUser(MoHubUser user)
    {

      user.Id = Context.ConnectionId;
      if (!_Users.Any(b => b.Id == user.Id))
      {
        _Users.Add(user);
      }

      //Clients.All.newUser(user);
      Clients.All.userList(_Users);
    }

    /// <summary>
    /// 发送信息
    /// </summary>
    /// <param name="user"></param>
    /// <param name="message"></param>
    public void SendAll(MoHubUser user, string message)
    {
      Clients.All.addNewMessageToPage(user, message);
    }

    /// <summary>
    /// 某个聊天人退出是，通知所有在线人重新加载聊天人数
    /// </summary>
    /// <param name="stopCalled"></param>
    /// <returns></returns>
    public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
    {
      var user = _Users.SingleOrDefault(x => x.Id == Context.ConnectionId);
      if (user != null)
      {
        _Users.Remove(user);
        Clients.All.userList(_Users);
      }
      return base.OnDisconnected(stopCalled);
    }
  }

上面的3个方法分别做了：添加聊天人到List，发送信息到客户端，某个连接失效后通知各个有效的聊天人重新加载信息；这里值得关注的是通过重新 public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled) 方法来实现捕获并移除失效连接（这里是聊天人的信息）;整篇测试用例通过Context.ConnectionId来保证连接的唯一性，只要有新的链接请求，那么服务端就会分配一个唯一串给这个链接，当客户端关闭页面或关闭链接这个是有就能在OnDisconnected方法中捕获到这个失效的链接的ConnectionId，这样就达到了移除失效聊天人的要求了；为了代码的方便性，这里创建了一个聊天人信息类：

public class MoHubUser
  {

    public string Id { get; set; }
    public string NickName { get; set; }
    public string TransportMethod { get; set; }
  }

到这里后台的聊天室代码就完成了就是这么简单；我们再来看试图中如何来写代码，这里我先给出我的html布局代码：

 @{
  ViewBag.Title = "神牛聊天室 - SignalR";
}
<style type="text/css">
  .p_left {
    width: 70%;
    float: left;
  }

  .p_right {
    width: 28%;
    float: left;
  }

  .ul {
    list-style: none;
    border: 1px solid #ccc;
    height: 500px;
    overflow-y: scroll;
    color: black;
  }

    .ul li {
      padding-top: 5px;
      padding-right: 25px;
    }

  .ul_user {
    list-style: none;
  }

    .ul_user li {
      padding-top: 5px;
    }

  .send {
    position: relative;
    background: #eae7e7;
    border-radius: 5px; /* 圆角 */
    padding-top: 4px;
    padding-left: 5px;
    margin-top: 13px;
  }

    .send .arrow {
      position: absolute;
      top: -16px;
      font-size: 0;
      border: solid 8px;
      border-color: #fff #fff #eae7e7 #fff;
    }
</style>
<h3 id="ViewBag-Title-nbsp-在线人数-span-nbsp-id-sapnUserTotal-span-人">@ViewBag.Title 在线人数：<span id="sapnUserTotal">0</span>人</h3>
<p class="container text-left">
  <p class="p_left">
    <ul class="ul" id="discussion"></ul>
    <textarea rows="5" class="form-control" id="message" maxlength="500" placeholder="开始聊天. . ." style="max-width: 100%"></textarea><br />
    <input type="button" id="sendmessage" value="发 送" class="btn btn-default" />
    <input type="hidden" id="displayname" />
  </p>
  <p class="p_right">
    <ul id="users" class="ul_user"></ul>
  </p>
</p>

<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
@*<script src="~/chat/hubs"></script>*@

客户端这里写法大致有两种选择，一种直接使用生成的代理来操作，一种不用自动生成的代理采用手动创建代理的方式；为了内容的简洁性，这里只简单讲解下自动生成的代理方式，而更多的是分享手动创建代理链接的方式；

使用生成的代理获取链接

首先，我们需要通过Script标签来引用一下自动生成代理的路径： <script src="~/chat/hubs"></script> ，注意啦这里的路径/chat对应的就是咋们在前面Startup.cs文件中配置 app.MapSignalR("/chat" 路径，而后面/hubs固定的写法(至少目前我还没更多的试验过)，只有先应用了这个~/chat/hubs，才能在后面使用生成的代理，先上段代码：

var chat = $.connection.chatHub;
    chat.client.newUser = function (user) {
      $("#users").append(&#39; <li><strong>&#39; + user.NickName + &#39;[&#39; + user.TransportMethod + &#39;]</strong></li>&#39;);
    };

    chat.client.userList = function (users) {
      console.log(users);
      $("#sapnUserTotal").html(users.length);
      $.each(users, function (i, item) {
        $("#users").append(&#39; <li>[&#39; + item.TransportMethod + &#39;] <strong>&#39; + item.NickName + &#39;</strong>(&#39; + item.Id + &#39;)</li>&#39;);
      });
    };
    chat.client.addNewMessageToPage = function (user, message) {
      console.log(user);
      $("#discussion").append(&#39; <li ><span><strong>&#39; + user.NickName + &#39;[&#39; + user.TransportMethod + &#39;]</strong>：</span><p class="send">&#39; + message + &#39;<p class="arrow"></p></p></li>&#39;);
    };
  //connection.hub.start({ transport: [&#39;webSockets&#39;, &#39;longPolling&#39;] }).done(function () {
    //  my.TransportMethod = connection.hub.transport.name;
    //  chat.server.addUser(my);

    //  $(&#39;#sendmessage&#39;).click(function () {
    //    //console.log(chat);
    //    var content = $.trim($(&#39;#message&#39;).val());
    //    if (content.length <= 0) { $(&#39;#message&#39;).val(&#39;&#39;).focus(); return; }
    //    chat.server.sendAll(my, content);
    //    $(&#39;#message&#39;).val(&#39;&#39;).focus();
    //  });
    //}).fail(function () {
    //  alert("链接聊天室失败，请重新刷新页面。");
    //});

咋们逐步来解析下代码注意点：

1.  var chat = $.connection.chatHub; 这里的chatHub对应的就是咋们创建的并继承Hub的ChatHub类，由于js变量开头都是小写，所以这里是chatHub，这句活就表示链接到咋们后端了ChatHub类了，然后就可以使用里面的方法啦（这种有点类似于早期的webform中某种ajax请求的写法）

2. 通过chat.client.xxx来接收服务端通知的消息，而这个xxx对应的方法名称和咋们后端的Clients.All.xxx，本章实例对应的是：chat.client.userList = function (users){}对应Clients.All.userList(_Users);这样后端就能直接通知客户端的对应方法了；注意这里我后端Clients.All用的是通知全部客户端的意思，如果您需要通知指定的链接需要用到的是： T Client(string connectionId); 方法

3. chat.client是后端调用客户端，那相对的chat.server就是客户端请求服务端，和上面一样通过chat.server.xxx来指定请求的服务端方法，注意这个时候服务端方法指的是继承类Hub的子类的公共方法（本篇对应的是：chat.server.sendAll(my, content)对应ChatHub.cs文件中的 public void SendAll(MoHubUser user, string message) 函数）

4.  connection.hub.start({ transport: ['webSockets', 'longPolling'] }) 来指定运行的交互协议

以上就是使用生成代理的方式，按照上面的注意点来写应该不是问题；

使用手动创建反向代理来链接

不采用生成的代码的方式，我们只需要修改前端就行了，后台代码不用变或设置不用变动；首先我们把上面说的Script引用自动代理的代码去掉，因为这个时候不需要了，我们还是先上代码：

var my = { NickName: "神牛001", TransportMethod: "" };
    var connection = $.hubConnection("/chat/hubs");
    var chat = connection.createHubProxy('chatHub');

    chat.on("userList", function (users) {
      console.log(users);
      $("#sapnUserTotal").html(users.length);
      $("#users").html("");
      $.each(users, function (i, item) {
        $("#users").append(&#39; <li>[&#39; + item.TransportMethod + &#39;] <strong>&#39; + item.NickName + &#39;</strong>(&#39; + item.Id + &#39;)</li>&#39;);
      });
    });

    chat.on("addNewMessageToPage", function (user, message) {
      console.log(user);
      $("#discussion").append(&#39; <li ><span><strong>&#39; + user.NickName + &#39;[&#39; + user.TransportMethod + &#39;]</strong>：</span><p class="send">&#39; + message + &#39;<p class="arrow"></p></p></li>&#39;);

      var p = document.getElementById(&#39;discussion&#39;);
      //p.scrollTop = p.scrollHeight;
      p.scrollTop = 999999;
    });

    var nickName = prompt("请输入一个昵称：", my.NickName);
    my.NickName = nickName.length > 0 ? nickName : my.NickName;
    $(&#39;#displayname&#39;).val(nickName);
    $(&#39;#message&#39;).focus();
   

    connection.start({ transport: [&#39;webSockets&#39;, &#39;longPolling&#39;] }).done(function () {

      my.TransportMethod = connection.transport.name;
      //console.log(my.TransportMethod);
      chat.invoke("addUser", my);

      $(&#39;#sendmessage&#39;).click(function () {
        var content = $.trim($(&#39;#message&#39;).val());
        if (content.length <= 0) { $(&#39;#message&#39;).val(&#39;&#39;).focus(); return; }

        chat.invoke("sendAll", my, content);
        $(&#39;#message&#39;).val(&#39;&#39;).focus();
      });
    });

同样列出如下注意点：

1.  var connection = $.hubConnection("/chat/hubs"); 创建链接，这里的path同样对应后端的 app.MapSignalR("/chat" ，路径保持一致

2.  var chat = connection.createHubProxy('chatHub'); 来创建反向代理链接，这里的name：chatHub对应的是后端的ChatHub类名称

3. 通过on("xxx",function(){})函数来绑定服务端通知客户端的事件，xxx对应Clients.All.xxx中的xxx

4. 허용된 링크 방법을 설정하고 링크를 시작합니다. connection.start({ transport: ['webSockets', 'longPolling'] })

5. 링크 방법의 이름을 가져오기 위한 연결.transport.name 기본적으로 시작이 설정되지 않은 경우 webSockets, ForeverFrame, serverSentEvents, longPolling

6 chat.invoke("xxx", param1, param2)는 호출을 사용하여 Hub 클래스를 상속하는 클래스의 공개 메서드를 매핑합니다. 여기에 해당하는 예는 다음과 같습니다. 마지막에

chat.invoke("sendAll", my, content) public void SendAll(MoHubUser user, string message)

위 내용은 실시간 웹 채팅 예제 코드에 대한 Asp.net MVC SignalR에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!