逆天之路

你以什么眼光看世界,你的世界就是什么。你不相信什么,你的世界就没有什么....

Fork me on GitHub

您现在的位置是:首页>笔记> 当前文章

SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)中

作者:dunitian 发布时间:2016-03-10 08:53 点击量:979

分类: > .Net笔记 > 最热技能 > SignalR

  • 第二个阶段:

     QQ聊天案例,先讲一种常规的方法,下面会讲一种简单方法

    先看看gif效果图把

    定义一个BaseHub类,里面用 qqModeList来临时存放数据(用户数据)

    QQModel,目前就用到两个属性,其他的可以自己扩展

    定义了一个上线方法,一会每个客户端都会调用(本来是准备用OnConnected的,没办法他没参数。。。而且这个时候,qq昵称还没有产生,于是我取其次的方案)

    定义一个发消息的方法

    下面就是前端的东西了,注释很详细,不清楚可以直接留言,我没高兴深度封装,主要就是简单演示一下

    代码贴上:

    客户端-逆天


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>仿QQ聊天--我是逆天</title>
        <link href="Style/MyQQ.css" rel="stylesheet" />
    </head>
    <body>
        <div><input id="inputMsg" /><input id="btn" type="button" value="发消息" /></div><br /><br />
        <div id="main"></div>
    
        <script src="Scripts/jquery-2.2.1.min.js"></script>
        <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
        <script src="http://localhost:5438/signalr/hubs"></script>
        <script type="text/javascript">
            $(function () {
                var leftHtml = [
                    '<div class="sender">',
                    '<div><img src="http://img.jfdown.com/jfdown/201403/ygald3wajct.jpg"></div>',
                    '<div><div class="left_triangle"></div>',
                    '<span>{msg}</span></div></div>'
                ].join('');
    
                var rightHtml = [
                    '<div class="receiver">',
                    '<div><img src="http://tb.himg.baidu.com/sys/portrait/item/306c9328?t=1397975854"></div>',
                    '<div><div class="right_triangle"></div>',
                    '<span>{msg}</span></div></div>'
                ].join('');
    
                //设置hubs的url
                $.connection.hub.url = 'http://localhost:5438/signalR';
                // 声明一个代理
                var qqProxy = $.connection.qQHub;
                // 创建一个方法供服务端调用
                qqProxy.client.sendMsg = function (msg) {
                    $('#main').append(leftHtml.replace('{msg}', msg));
                }
                // 启动 connection
                $.connection.hub.start().done(function () {
                    qqProxy.server.online('逆天');//QQ昵称
                    $('#btn').click(function () {
                        //获取输入
                        var qqmsg = $('#inputMsg').val();
                        //给逆天发消息
                        qqProxy.server.serviceSend('妹子', qqmsg);
                        $('#main').append(rightHtml.replace('{msg}', qqmsg));
                    });
                });
            });
        </script>
    </body>
    </html>
    客户端-美女



    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>仿QQ聊天--我是美女</title>
        <link href="Style/MyQQ.css" rel="stylesheet" />
    </head>
    <body>
        <div><input id="inputMsg" /><input id="btn" type="button" value="发消息" /></div><br /><br />
        <div id="main"></div>
    
    
        <script src="Scripts/jquery-2.2.1.min.js"></script>
        <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
        <script src="http://localhost:5438/signalr/hubs"></script>
        <script type="text/javascript">
            $(function () {
                var rightHtml = [
                    '<div class="sender">',
                    '<div><img src="http://img.jfdown.com/jfdown/201403/ygald3wajct.jpg"></div>',
                    '<div><div class="left_triangle"></div>',
                    '<span>{msg}</span></div></div>'
                ].join('');
    
                var leftHtml = [
                    '<div class="receiver">',
                    '<div><img src="http://tb.himg.baidu.com/sys/portrait/item/306c9328?t=1397975854"></div>',
                    '<div><div class="right_triangle"></div>',
                    '<span>{msg}</span></div></div>'
                ].join('');
    
                //设置hubs的url
                $.connection.hub.url = 'http://localhost:5438/signalR';
                // 声明一个代理
                var qqProxy = $.connection.qQHub;
                // 创建一个方法供服务端调用
                qqProxy.client.sendMsg = function (msg) {
                    $('#main').append(leftHtml.replace('{msg}',  msg));
                }
                // 启动 connection
                $.connection.hub.start().done(function () {
                    qqProxy.server.online('妹子');//QQ昵称
                    $('#btn').click(function () {
                        //获取输入
                        var qqmsg = $('#inputMsg').val();
                        //给逆天发消息
                        qqProxy.server.serviceSend('逆天', qqmsg);
                        $('#main').append(rightHtml.replace('{msg}', qqmsg));
                    });
                });
            });
        </script>
    </body>
    </html>


关键字词  毒逆天  原创  经验

 

毒逆天