zoukankan      html  css  js  c++  java
  • 利用SignalR实现聊天室(基础篇)

    简介:

           Asp.net SignalR是微软为实现实时通信的一个类库。一般情况下,signalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信。另外SignalR开发的程序不仅仅限制于宿主在IIS中,也可以宿主在任何应用程序,包括控制台,客户端程序和Windows服务等,另外还支持Mono,这意味着它可以实现跨平台部署在Linux环境下。

           signalR内部有两类对象:

      1. Http持久连接(Persisten Connection)对象:用来解决长时间连接的功能。还可以由客户端主动向服务器要求数据,而服务器端不需要实现太多细节,只需要处理PersistentConnection 内所提供的五个事件:OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。
      2. Hub(集线器)对象:用来解决实时(realtime)信息交换的功能,服务端可以利用URL来注册一个或多个Hub,只要连接到这个Hub,就能与所有的客户端共享发送到服务器上的信息,同时服务端可以调用客户端的脚本。SignalR将整个信息的交换封装起来,客户端和服务器都是使用JSON来沟通的,在服务端声明的所有Hub信息,都会生成JavaScript输出到客户端,.NET则依赖Proxy来生成代理对象,而Proxy的内部则是将JSON转换成对象。

            SignalR将整个信息的交换封装起来,客户端和服务器都是使用JSON来沟通的,在服务端声明的所有Hub信息,都会生成JavaScript输出到客户端,.NET则依赖Proxy来生成代理对象,而Proxy的内部则是将JSON转换成对象。

      PersistentConnection Hub/生成Proxy模式 Hub/非生成Proxy模式
    服务端配置

    app.Map("/messageConnection", map => 
               { 
                   map.RunSignalR<MessageConnection>(); 
               });

    app.Map("/messageHub", map => 
               { 
                   map.RunSignalR(new Microsoft.AspNet.SignalR.HubConfiguration { EnableJavaScriptProxies = true }); 
               });

    app.Map("/messageHub", map => 
                { 
                    map.RunSignalR(new Microsoft.AspNet.SignalR.HubConfiguration { EnableJavaScriptProxies = true }); 
                });

    引入js文件 jquery-1.6.4.min.js 
    jquery.signalR-2.2.0.min.js
    jquery-1.6.4.min.js 
    jquery.signalR-2.2.0.min.js 
    /messageHub/js 
    上述js文件是动态生成,其中messageHub的为服务端定义的路径
    jquery-1.6.4.min.js 
    jquery.signalR-2.2.0.min.js
    创建连接 var connection = $.connection("/message"); var connection = $.connection; var connection = $.hubConnection();
    开启连接

    connection.start() 
                    .done(function () { 
                        connected = true; 
                    }) 
                    .fail(function () { 
                        alert("连接失败"); 
                    });

    connection.hub.start() 
                    .done(function () { 
                        connected = true; 
                    }) 
                    .fail(function () { 
                        alert("连接失败"); 
                    });

    connection.start() 
                    .done(function () { 
                        connected = true; 
                    }) 
                    .fail(function () { 
                        alert("连接失败"); 
                    });

    代理对象 var proxy = connection.MessageService; 
    MessageService是Hub的名称
    var proxy = connection.createHubProxy("MessageService"); 
    MessageService是Hub的名称
    定义客户端方法

    proxy.client.hello = function (message) { 
                          console.log(message);   

    }

    proxy.on("hello", function (message) {        

                      console.log(message);

    });

    接收消息

    connection.received(function (message) { 
                    alert(message); 
                });



    通过服务器调用客户端方法实现


    通过服务器调用客户端方法实现
    发送消息 connection.send(message); 通过调用服务端方法实现 
    proxy.server.hello(message);
    通过调用服务端方法实现 
    proxy.invoke("hello", message);
    设置QueryString 在创建connection时指定 
    var connection = $.connection("/messageConnection", { username: "qs" + username });

    connection.hub.qs = { username: "qs" + username };

    connection.qs = { username: "qs" + username };
    设置Cookie document.cookie = "username=" + username; document.cookie = "username=" + username; document.cookie = "username=" + username;
    设置State proxy.state.ClientType = "HubAutoProxy"; proxy.state.ClientType = "HubNonAutoProxy";

    引用地址:https://www.cnblogs.com/zjicmhahah/p/9391874.html

  • 相关阅读:
    详解java并发原子类AtomicInteger(基于jdk1.8源码分析)
    可见性、原子性和有序性
    Django基础之简单的前后端交互
    JDK1.8新特性之(三)--函数式接口
    JDK1.8新特性之(一)--Lambda表达式
    JDK1.8新特性之(二)--方法引用
    在IDEA创建类时自动创建作者日期等信息设定
    用batch调用DB2 CLPPlus执行多个SQL文
    windows7 设定开关机事件
    Mybatis显示修改数据库成功,数据库却没有修改
  • 原文地址:https://www.cnblogs.com/CarzySunshine/p/14047690.html
Copyright © 2011-2022 走看看