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

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

  ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据ASP.NET SignalR 与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"
                }
            ]
        }
    ]
}
View Code

相关文章:

  • 2021-06-27
  • 2021-09-08
  • 2021-06-30
  • 2021-05-20
  • 2022-01-17
  • 2021-12-01
  • 2021-06-20
  • 2021-11-03
猜你喜欢
  • 2021-12-23
  • 2021-05-21
  • 2022-02-08
  • 2021-10-04
  • 2021-04-13
  • 2021-11-20
  • 2021-07-30
相关资源
相似解决方案