最近碰巧发现一款比较好的Web即时通讯前端组件,layim,百度关键字即可,我下面要做的就是基于这个前端组件配合后台完成即时聊天等功能。当然用到的技术就是ASP.NET SingalR框架。本人不会css和前端的东西,只会少量的js,所以前端的代码不做介绍,喜欢前端的同学可以自行研究,闲言少叙,书归正传。
我们先看一下layim的效果,看起来还是挺友好的,界面也不错。不过,我做了些调整,具体其他细节可以自己完善。
界面看完了,那么看一下数据。demo里做的也不错,ajax也封装好了,那么我们就直接对照着他的demo看看吧。数据分别有:friend.json,group.json,groups.json,chatlog.json,他们的数据格式如下:(仅仅展示friend.json,其他类似)
{ "status": 1, "msg": "ok", "data": [ { "name": "销售部", "nums": 36, "id": 1, "item": [ { "id": "100001", "name": "郭敬明", "face": "/images/default.jpg" }, { "id": "100002", "name": "作家崔成浩", "face": "/images/default.jpg" }, { "id": "1000022", "name": "韩寒", "face": "/images/default.jpg" }, { "id": "10000222", "name": "范爷", "face": "/images/default.jpg" }, { "id": "100002222", "name": "小马哥", "face": "/images/default.jpg" } ] }, { "name": "大学同窗", "nums": 16, "id": 2, "item": [ { "id": "1000033", "name": "苏醒", "face": "/images/default.jpg" }, { "id": "10000333", "name": "马云", "face": "/images/default.jpg" }, { "id": "100003", "name": "鬼脚七", "face": "/images/default.jpg" }, { "id": "100004", "name": "谢楠", "face": "/images/default.jpg" }, { "id": "100005", "name": "徐峥", "face": "/images/default.jpg" } ] }, { "name": "H+后台主题", "nums": 38, "id": 3, "item": [ { "id": "100006", "name": "柏雪近在它香", "face": "/images/default.jpg" }, { "id": "100007", "name": "罗昌平", "face": "/images/default.jpg" }, { "id": "100008", "name": "Crystal影子", "face": "/images/default.jpg" }, { "id": "100009", "name": "艺小想", "face": "/images/default.jpg" }, { "id": "100010", "name": "天猫", "face": "/images/default.jpg" }, { "id": "100011", "name": "张泉灵", "face": "/images/default.jpg" } ] } ] }