ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据

  最近碰巧发现一款比较好的Web即时通讯前端组件,layim,百度关键字即可,我下面要做的就是基于这个前端组件配合后台完成即时聊天等功能。当然用到的技术就是ASP.NET SingalR框架。本人不会css和前端的东西,只会少量的js,所以前端的代码不做介绍,喜欢前端的同学可以自行研究,闲言少叙,书归正传。

  我们先看一下layim的效果,看起来还是挺友好的,界面也不错。不过,我做了些调整,具体其他细节可以自己完善。

  ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据_第1张图片ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据_第2张图片ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据_第3张图片

  界面看完了,那么看一下数据。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"
                }
            ]
        }
    ]
}
View Code

  数据格式有了,那么我们在后台简单建几个Model。 CS的是 CustomService缩写,命名。。。。。就留个槽点吧

 public class CSGroupResult
    {
        public int id { get; set; }
        public string name { get; set; }
        public int nums { get { return item == null ? 0 : item.Count; } }
        public List<CSBaseModel> item { get; set; }
    }
    
   public class CSResult
    {
        public int status { get; set; }
        public string msg { get; set; }
        public object data { get; set; }
    }

 public class CSBaseModel
    {
        public int id { get; set; }
        public string name { get; set; }
      //  public string time { get; set; }
        public string face { get; set; }
    }

    public class CSFriend : CSBaseModel { }
    public class CSGroup : CSBaseModel { }
    public class CSGroups : CSBaseModel { }

  好的,很简单的几个Model建好了,就是根据layim里的json格式建的,这样,输出结果可以直接符合layim的接口JSON要求。下面,构建几个假数据,本来打算用数据库的,后来想想,只是写一下思路吧,就不在用数据库了。其实不仅是数据库,只要是可存储的东西都可以来放这些用户,聊天,群组等信息。

  public class DBHelper
    {
        /// <summary>
        /// 获取好友列表
        /// </summary>
        /// <returns></returns>
        public static CSResult GetFriends()
        {
            var friends = new List<CSBaseModel>();
            for (int i = 0; i < 9; i++) {
                friends.Add(new CSFriend { id = i, name = "好友" + i, face = "/photos/00" + i + ".jpg" });
            }

            var friendGroup = new List<CSGroupResult>();

            friendGroup.Add(new CSGroupResult { id = 1, item = friends, name = "我的分组一" });
            friendGroup.Add(new CSGroupResult { id = 2, item = friends, name = "我的分组二" });
            friendGroup.Add(new CSGroupResult { id = 3, item = friends, name = "我的分组三" });

            CSResult result = new CSResult
            {
                msg = "ok",
                status = 1,
                data = friendGroup
            };
            return result;
        }

        /// <summary>
        /// 获取分组列表
        /// </summary>
        /// <returns></returns>
        public static CSResult GetGroup()
        {
            var groups = new List<CSBaseModel>();
            for (int i = 0; i < 3; i++)
            {
                groups.Add(new CSGroup { id = i, name = "分组" + i, face = "/photos/00" + i + ".jpg" });
            }

            var friendGroup = new List<CSGroupResult>();

            friendGroup.Add(new CSGroupResult { id = 1, item = groups, name = "分组名称一" });
            friendGroup.Add(new CSGroupResult { id = 2, item = groups, name = "分组名称二" });
            friendGroup.Add(new CSGroupResult { id = 3, item = groups, name = "分组名称三"});

            CSResult result = new CSResult
            {
                msg = "ok",
                status = 1,
                data = friendGroup
            };
            return result;
        }

    }

  我后台使用的是ASP.NET MVC。新建Controller,就叫CustomServiceController吧,写好方法,配置路由,这里就不多介绍了。

  /// <summary>
        /// 获取数据
        /// </summary>
        /// <param name="type"></param>
        /// <returns></returns>
        public JsonResult GetData(string type)
        {
            var result = DBHelper.GetResult(type);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

 

  那么到这里,我们测试一下方法返回结果(路由配置的是getdata),浏览器里输入:http://localhost:20237/getdata?type=friend F12看一下结果:

ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据_第4张图片

  好了,结果出来了,怎么和layim结合呢?很简单,看一下,layim.js代码,找到config.api,将接口改成自己的服务器接口就可以了(如果想做完整插件服务的话,这里可能有跨域问题吧)

 var config = {
        msgurl: 'mailbox.html?msg=',
        chatlogurl: 'mailbox.html?user=',
        aniTime: 200,
        right: -232,
        api: {
            friend: '/getdata?type=friend', //好友列表接口。    将这个接口改为服务器的接口就可以了,下面两个暂时没做,后续会补上,同理
            group: '/getdata?type=group', //群组列表接口
            chatlog: '/scripts/layim/chatlog.json', //聊天记录接口
            groups: '/scripts/layim/groups.json', //群组成员接口
            sendurl: '' //发送消息接口
        },
        user: { //当前用户信息
            name: '游客',
            face: '/images/default.jpg'
        },

  到这里,数据整合部分就完成了,是不是很简单啊,想看运行效果?其实刚开始的图1,和图3就是运行效果了。要实现图二的话,只要重复上面的步骤,将接口方法写好,然后配置上接口路径就可以了。

  补充:重新调整了一下代码,考虑到有的同学用的不是MVC,所以采用ashx的方式实现数据获取,同时,代码也调整了一下,DBHelper增加逻辑判断方法 GetResult(string type)

        /// <summary>
        /// 在封装一层业务,根据type返回不同的结果
        /// </summary>
        /// <param name="type"></param>
        /// <returns></returns>
        public static CSResult GetResult(string type)
        {
            CSResult result = null;
            switch (type)
            {
                case "friend":
                    result = DBHelper.GetFriends();
                    break;
                case "group":
                    result = DBHelper.GetGroup();
                    break;
                case "log":
                    result = DBHelper.GetChatLog();
                    break;
                case "groups":
                    result = DBHelper.GetGroupMember();
                    break;
                default:
                    result = new CSResult { status = 0, data = null, msg = "无效的请求类型" };
                    break;
            }
            return result;
        }

那么controller和ashx里面调用方法就简单了:

        /// <summary>
        /// Controller中获取数据
        /// </summary>
        /// <param name="type"></param>
        /// <returns></returns>
        public JsonResult GetData(string type)
        {
            var result = DBHelper.GetResult(type);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

//ashx获取数据方法
  public void ProcessRequest(HttpContext context)
        {
            //这里的类型要改成json,否则,前端获取的数据需要调用JSON.parse方法将文本转成json,
            //为了不用改变前端代码,这里将text/plain改为application/json
            context.Response.ContentType = "application/json";
            //接收type 参数
            string type = context.Request.QueryString["type"] ?? context.Request.QueryString["type"].ToString();
            //调用业务处理方法获取数据结果
            var result = DBHelper.GetResult(type);
            //序列化
            var json = ScriptSerialize(result);
            context.Response.Write(json);
        }

        /// <summary>
        /// 序列化方法,(暂时放在这里)
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="t"></param>
        /// <returns></returns>
        private string ScriptSerialize<T>(T t)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(t);
        }

  然后我们将layim.js里的获取好友列表的接口地址改成 /getdata.ashx?type=friend 是不是一样就可以调用了呢。(截图略)

  再补充:有人问怎么用webservice做接口,我尝试了一下,虽然比较麻烦,但最终还是调通了,具体webservice不多做介绍了,下面看详细修改的代码,首先,为了保证程序变化不大,尽量少修改,我加了一些参数判断,在layim.js

ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据_第5张图片ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据_第6张图片

  红框地方就是代码修改过的地方,然后在调用config.json里面,由于webservice是post请求,所以参数就不能那么用了,改为 "{"type":"friend"}"形式

  ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据_第7张图片

  最后,webservice后台方法与ashx一致:

  public class getdataWebService : System.Web.Services.WebService
    {

        [WebMethod]
        public string GetResult(string type)
        {
            //调用业务处理方法获取数据结果
            var result = DBHelper.GetResult(type);
            var json = MessageUtilcs.ScriptSerialize(result);
            return json;
        }
    }

  具体呢,到这里就终于把webservice调通了,不过需要改一些layim的js来配合。这儿有点麻烦。不过知道其中的原理,人是活的,代码同样可以写活。OK,最后的补充了。运行试试吧,是不是现在支持 MVC接口,ashx接口和webservice接口了呢,如果有机会再把webapi接口加上~~

  第一篇就先到这里吧,还没有涉及到SingalR的东西,下一步,我们就搭建SingalR环境,实现聊天功能。 写的有点粗糙哦,希望你喜欢。PS:想要代码的同学留下邮箱或者等我的博客写完了,放到github上,会告诉大家地址的哦。

你可能感兴趣的:(ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据)