SignalRプローブ

6792 ワード

一.SingalRを認識する
1.Httpプロトコルはブラウザ側が自発的に要求し、サーバーが自発的に要求を開始できない.ajaxやオリジナルwebsocketを使って開発できますが、難易度は高いです.しかしSignalRを用いてWebSocket開発を簡素化した.
2.SignalRハブクラス(SignalR永続接続)は下位機構である.
3.インスタント通信が可能です.SignalRには、LongLooping(ロングポーリング)、WebSocket(HTML 5のWEBソケット)、Forever Frame(フレームワークを隠すロングリクエスト接続)の3つの伝送モードがあります.
二.コードの作成
1.フロントエンドコード




    
    OnLineUser
@*            ,           ,  jq singalR                   *@
    
    
    
    


    
    
    
        $('#btnlogin').click(function(){
var username=$('#userName').val();
$.connection.onLineUserHub.server.login(username);
});
$.connection.onLineUserHub.client.onOnlineUserStatusChange=function(msg)
{
var str = val == ture ? "  " : "   ";
                    alert(key+"    " + str);
}
$.connection.hub,start().done(function(){
alert("    Start");
}).fail(function(){
alert("    ");
})
    



2.バックエンドHub(TestHub)コード
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNet.SignalR;
using StackExchange.Redis;
using System.IO;
using System.Text;
namespace SingalRProject
{
public class OnLineUserHub:Hub
{
public async Task Login(string userName)
{
using(ConnectionMultiplexer redis=ConnectionMultiplexer.Connect("localhost:6379"))
{
IDatabase db=readis.GetDatabase();
RedisKey strs="key"+this.ContextConnectionId;
var str=await db.StringGetAsync(strs);
if(str.ToString()==userName)
{
await OnDisConectionted(false);
return;
}
var db.StringSetAsync("key"+UserName,true);
await db.StringSetASync("key_UserName"+this.Context.ConnectionId,userName);
await db.SetAddAsync("key_User",UserName);
RedisValue[]userNames=await db.SetMemberAsync("Key_User");
ReduisKey[]userNamesOnlineKeys=userNames.Select(e=>(RedisKey)("key"+e)).ToArray();
Dictionarydata=new Dictionary();
for(int i=0lu
//   
namespace SingalRProject
{
public class OnLineUserHub:HUb
{
private static connStr="localhost:6379"
private Object obj=new Object;
private static ConnectionMultiplexer redis;
private static ConnectionMultiplexer _regist
{
get
{
if(redis==null)
{
lock(obj)
{
if(redis==null||redis.IsConnected)
{
redis=redis.Connect(connStr);
}
return redis;
}
}
}
}
public async Task Db()
{
return _redis.GetDatabase();
}

}
}

SignalRの異常のキャプチャ
public class ExceptoinHubPipelineMoudule:HubPipelineModule
{
protected override void OnIncomingError(ExceptionContext exceptionContext,IHubIncomingInvokerContext invokerContext)
{
//           
base.OnIncomingError(exceptionContext,invokerContext);
 //exceptionContext.Error                             
WriteLog(exceptionContext.Error.Message);
dynamic caller=invokerContext.Hub.Clients.Callser;
//         
caller.onServerError(exceptionContext.Error.Message);
}
private static string path=@"XXXXX";
public void WriteLog(string ErrorInfo)
{
using(Stream fs=new FileStream(path,FileMode.OpenOrCreate))
{
byte[]info=Encoding.UTF8.GetBytes(ErrorInfo);
fs.Write(info,0,info.Length);
}
}
}
//   Global.asax.cs        
namespace SignalProhect
{
public class MvcApplication:Syste.Web.HttpApplication
{
proteted void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Route);
//      SignalR    
GlobalHost.HubPipeline.AddModule(new HubException());
}
}
}

次にグループの追加と削除を行い、同じグループ内で互いに通信できるようにする
public class GroupHub:Hub
{
public void AddGroup(string groupName)
{
Groups.Add(this.Context.ConnectionId,groupName);
Clients.All.Hello();
}
public void SendGroupMsg(string grouName,string msg)
{
Clients.OthersInGroup(grouName).onMessage(msg);
Clients.OthersInGroup(grouName).OnMessage2(msg)
}
}

フロントエンドページ




    
    
    <script src="~/Scripts/jquery-3.3.1.js">
    </script>
    <script src="~/Scripts/jquery.signalR-2.2.2.js"/>
    <script src="~/signalr/hubs" type="text/javascript"/>



    <div id="msgs">
      :
    <ul>
        
    </ul></div>
    <div id="msg">
      :<input type="text" id="groupName1"/> 
        <button id="btnAddGroup">   </button>
       :<input type="text" id="groupName2"/>
          :<input type="text" id="message"/>
        <button id="btnSendMsg">    </button>
    </div>
    <script type="text/javascript">
        $.connection.groupHub.client.onMessage = function (msg) {
            $("<li>    1" + msg + "</li>").appendTo("#msgs");
        }
        $.connection.groupHub.client.onMessage2 = function (msg) {
           $("<li>    1" + msg + "</li>").appendTo("#msgs");
        }
        $.connection.hub.start().done(function () {
            $("<li>  " + "  "+ "</li>").appendTo("#msgs");
        }).fail(function () {
            alert("    ");
        });
        $('#btnAddGroup').click(function () {
            var groupName = $('#groupName1').val();
            //var message = $('#message').val();
            $.connection.groupHub.server.addGroup(groupName);
        });
        $('#btnSendMsg').click(function () {
            var groupName = $('#groupName2').val();
            var message = $('#message').val();
            $.connection.groupHub.server.sendGroupMsg(groupName, message);
        }).fail(function () {
            alert("    ");
        })

    </script>


</code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>