初识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>

下级更精彩

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-03-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

SEO优化实战

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 seo本身涉及范围非常广,所包含的知识也是非常值得深入研究的一个方向,本文仅...

302110
来自专栏本立2道生

电脑护眼设置:蓝色光波过滤

本人高度近视,因此平时使用电脑时总会关注如何护眼,安卓手机上使用了app “蓝色光波过滤”,感觉不错,就想看看PC上有没有相应的软件,找倒是找到了,不过需要先安...

11310
来自专栏木子昭的博客

Chrome与vim双神器融合, vimium完全攻略

73840
来自专栏iOSDevLog

Unity 3D 开发《王者荣耀》:英雄攻击创建按钮源码:https://github.com/iOSDevLog/ArenaOfValor

50060
来自专栏章鱼的慢慢技术路

使用Unity中的Box Collider组件完成游戏场景中的碰撞检测功能

17940
来自专栏AhDung

【手记】手机网页弹出层后屏蔽底层的滑动响应

这个需求场景很常见,但好像到目前还没有一个正统的做法,以至于一搜这个问题,出来的招数五花八门,典型的包括:

16120
来自专栏数据小魔方

think-cell chart系列20——使用建议及附加功能

今天是think-cell chart系列收尾篇——使用建议及附加功能。 由于think-cell chart图表插件是office平台的第三方插件,而且图表...

47540
来自专栏Youngxj

[安卓软件]sCploit黑客工具分享

34240
来自专栏姬小光

姬小光前端小讲堂【第005期】

不知不觉系列教程已经到了第005期,这里向大家解释一下,昨天周日之所以没有更新,是因为周末打开的数量确实很低,看来大家周末都不喜欢学习,所以我也打算改为工作日发...

9620
来自专栏汇智网教程

angular教程推荐

28320

扫码关注云+社区

领取腾讯云代金券