初识SignalR~仿QQ即时聊天（群发，单发）（Web，WPF等Demo演示）【中】
初识SignalR~仿QQ即时聊天（群发，单发）（Web，WPF等Demo演示）【中】
第二个阶段：
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>
下级更精彩
腾讯云开发者
