signalR制作微信墙 开源

微信墙

上一篇文章中已经用PHP搭建了一个微信墙获取信息的服务器，我这里使用微软的signalr搭建一个客户端，signalr是一个为开发者开发实时应用的 一个库文件，支持windows server 2008 r2+，win7，win8 windows azure，可以使用iis8托管，iis7必须支持 extensionless URLs 。下图是浏览器支持情况

其实据我所知，你可以再微软的任何技术中使用signalr比如wpf，winform等等中都可以，只不过要引入相应的dll文件，而且可以在高强度的环境下使用signalr，比如股市网站实时绘制波形图。更多信息请直接去官网查看,传送门 。项目源码 传送门

准备工作

首先创建一个asp.net mvc 5 的项目在项目中引入必要的文件，我这里使用了mongo做数据库所以要引入mongo的驱动，直接使用nuget搜索即可，如下图这里我们使用signalr做实时推送，直接安装Microsoft Asp.Net AsignalR即可，他会引入项目中所需要的必要依赖项项目中使用模拟登陆获取人物图片，我用了自己写好的Utility库，里面有常用的cookie封装，cache封装，http客户端等等几十个操作，nuget搜索yeanzhi即可(p.s.这一步理论上应该在服务器中直接获取图片信息的，因为服务器用的PHP，图片没办法和这个项目共享（除非使用第三方图床），所以图片在这里下载，其实可以服务器都用.NET做，短时间直接一个ConsoleApplication就行，长时间的话写一个服务用定时器调用就好了，不过这两天在做PHP的实时推送，到时候还要用PHP写一个后台怪麻烦的，后期会放出来PHP的微信墙客户端)这些都完成了，我们的准备工作也就差不多了

编码工作

我在项目中创建了微信常用的模拟操作，如下图，一会和微信打交道的操作都有他们完成，源码在github上面

我们首先要更改Home下的index，更换email和password即可登录微信，登陆成功会跳转到GetInfo,这里之所以会单独初始化一下是为了防止以后每次去微信拿数据都要登录一遍来获取token和cookie，如果单位时间内登录次数过多微信会有一个二维码的校验，这个就十分麻烦了，所以我们登录一次，将cookie和token放到缓存中，以后从缓存中拿数据

1. public ActionResult Index()
2. {
3.  if (WeiXinLogin.ExecLogin("email", "password"))
4.  {
5.  return RedirectToAction("GetInfo");
6.  }
7.  return View();
8. }

下面的方法是从mongo中拿到我们PHPserver存放进去的数据，同时检测有没有下载这个人的头像，如果没有下载，就去下载，其中判断函数和下载函数直接去源码中查看即可，我都放到了HomeController 里面，没有进行进一步封装

1. public ActionResult GetInfo()
2. {
3.  MongoUtil mongo = new MongoUtil();
4.  var colloction = mongo.getCollection("message");
5.  var res = colloction.FindAll().ToList();
6.  foreach (var item in res)
7.  {
8.  if (!IsExitImage(item.fakeid))
9.  {
10.  DownImage(item.fakeid);
11.  }
12.  }
13.  return View(res);
14. }

一切顺利的话我们访问/Home/Index 微信模拟登陆登陆成功，页面就会重定向到/Home/GetInfo 这里，我是用了bootstrap简单的写了一个页面，时间戳没有处理直接输出了如下图

接下来该准备推送的事情了，我们再一次明确一下需求，上一个图中我们点击上墙，这条消息应该就会被推送到微信墙那个页面，下面我们做推送的事情，首先肯定是要初始化signalr的一些操作的，我们创建一个Hubs的文件夹，在文件夹中创建一个WeChatHub的类继承Hub，如下

1. public class WeChatHub : Hub
2. {
3.  public void Send(string name, string message)
4.  {
5.  Clients.All.addData(name, message);
6.  }
7. }

然后我们在根目录下创建一个Startup文件用来在程序运行之处初始化SignalR，代码如下

1. [assembly: OwinStartup(typeof(WeChatWallClient.NET.Startup))]
2. namespace WeChatWallClient.NET
3. {
4.  public class Startup
5.  {
6.  public void Configuration(IAppBuilder app)
7.  {
8.  app.MapSignalR();
9.  }
10.  }
11. }

接下来我们需要一个action创建一个代理去调用hub，将信息推送出去，代码如下

1. public ActionResult Sq(string id)
2. {
3.  var hubContext = GlobalHost.ConnectionManager.GetHubContext<WeChatHub>();
4.  if (hubContext != null)
5.  {
6.  ObjectId objid = new ObjectId(id);
7.  MongoUtil mongo = new MongoUtil();
8.  var colloction = mongo.getCollection("message");
9.  var msg = colloction.AsQueryable<Msg>().FirstOrDefault(a => a.Id == objid);
10.  if (msg!=null)
11.  {
12.  hubContext.Clients.All.addData(msg);
13.  }
14.  }
15.  return RedirectToAction("GetInfo");
16. }

接下来我们创建一个Client页面用来展现微信墙的一些操作，效果如下接着引入jquery.signalR.js ，注册signalr路由，创建一个代理与后端addData进行通讯，代码如下

1. <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
2. <script src="~/signalr/hubs"></script>
3. <script type="text/javascript">
4.  $(function () {
5.  var chat = $.connection.weChatHub;
6.  chat.client.addData = function (data) {
7.  $("#UL").append('<li>\
8.  <div class="single">\
9.  <div class="pic">\
10.  <img src="/corvers/' + data.fakeid + '.jpg">\
11.  </div>\
12.  <div class="message">\
13.  <div class="s-name">\
14.  <span>' + data.nick_name + '</span>　：\
15.  </div>\
16.  <div class="s-word">' + data.content + '\
17.  </div>\
18.  </div>\
19.  </div>\
20.  </li>');
21.  Slide();
22.  $("#total-num").text(++total);
23.  };
24.  });
25. </script>

现在所有的工作都做好了，我们点击一下上墙，看看效果还不错，如下图

后记&总结

其实整个流程很清楚了，我是从我给我们OurEDA实验室做的微信公众平台中抽取出来的这部分代码，也去除了一些无关的功能，demo中没有什么高级的oop手法，除了伸手党，真想学的看起来应该会很轻松，这个功能当时做也就花了不到两个小时前端后端服务器就都出来了。本来是想给出PHP下的，但是这两天放假回家想来实时通信这块需要后台PHP再写一个socket，和signalr一比较好像有点得不偿失，还不如ajax长轮询，但是这样的话就与平台无关了，想想还有没有什么别的方法，如果想出来了再写一个PHP版本的，欢迎大家一起讨论

另外求助园友一个事情，我回家以后github，composer访问不稳定，连mongo官网都上不去了，nydusvpn，GreenVPN都试过了，不好用，我怀疑是电信禁用了vpn，大家有什么建议没，我家的网是电信10M光纤。。。谢谢了