前两篇文章有点乱，很多朋友看了可能感觉到不知道如何下手，本篇就一步一步实现一下1.进入layui官网查看官方API

找到示例即时通讯组件，这里面例子比较全也可以直接查看代码，只不过此时全是静态内容

我们可以进入layim的主页进行授权获取

我们也可以点击进入接入案例，这里全是干货

这里除了有各个版本的后台代码外也有一些封装好的js代码模块，比如

网友分享的查找好友界面

第二步获取授权代码后我们就可以可是编写代码了

我这里有个简单的代码示例目录如下：

首先官网的demo是用的静态数据，也没有通过登录获取用户信息，我们可以自己写个登录界面，然后把获取人员列表接口改和查看群成员接口，上传接口改成自己服务器端匹配的接口

假如我们写了一个登录接口，然后人员信息是登录后根据用户id获取用户列表的，那么这个地方的配置我们可以改成

我们的逻辑是，登录成功，建立websocket连接同时获取好友信息，数据校验什么这块可以根据需要自己做，关于websocket连接接收消息等请看上篇文章，代码已经在其中了自己动手实现基于websocket的聊天web聊天功能高仿仿qq(服务端)

第三步完成第二步中所需要的接口

在完成接口之前我们先的创建表，建表下篇文章继续讲，本篇我们直接写数据接口

1.用户登录

本来登录是需要做很多验证，包括各种安全校验和签名加密等，此处不做过多探讨，我们主要以实现功能为主。大概代码如下

//1接收前端参数 BaseModel m = getModel(request, BaseModel.class);//2参数非空校验 if(!ValidateUtil.empty(response,m.getUsername(),m.getPassword())) return;//3拼装sql语句 String sql="select user_id id,avatar from chat_t_user where user_name='"+m.getUsername()+"' and `password`='"+m.getPassword()+"'";//4执行检索并获取结果 Map<String, Object> map = BaseService.qr.query(sql, new MapHandler());//5设置缓存并返回结果 qury(map, false, 0);

登录返回结果如下，具体看自己用的什么框架，本框架是作者自己封装，所以可能和大家的用法可能不太一样，为了简单这里没有进行多层封装

2.用户好友信息数据接口

大概逻辑如下

BaseModel m = getModel(request, BaseModel.class);//取值 if(!ValidateUtil.empty(response,m.getId())) return;//校验 LinkedHashMap<Object, Object> map=new LinkedHashMap<>(); Map<String, Object> mine = BaseService.qr.query("select nick_name as username,sign, avatar,user_id id from chat_t_user where user_id='"+m.getId()+"'", new MapHandler()); mine.put("status", "online"); //获取redis中的用户在线状态// Cache redis = Redis.use();// redis.set("status"+mine.get("id"), "online");// Redis.use().set(redisKey, "online"); map.put("mine", mine); List<Map<String, Object>> myfriendGoup = BaseService.queryList("select a.friend_group_name as groupname,a.group_id as id from chat_user_friend_group as a where a.user_id='"+m.getId()+"' ORDER BY a.order desc", null); List<Map<String, Object>> listmap=new ArrayList<>(); for (int i = 0; i < myfriendGoup.size(); i++) { Map<String, Object> mp = myfriendGoup.get(i); String id= myfriendGoup.get(i).get("id").toString(); String sql="select nick_name as username,sign, avatar,b.user_id as id from chat_user_friend as a LEFT JOIN chat_t_user as b on a.friend_id=b.user_id where a.friend_group_id='"+id+"'";List<Map<String, Object>> flist = BaseService.queryList(sql, null);for (int j = 0; j < flist.size(); j++) {//检查并设置在线状态flist.get(j).put("status", "online");//redis.getSet(key, value)}mp.put("list", flist);listmap.add(mp); } map.put("friend", listmap); map.put("group", BaseService.queryList("SELECT b.group_name groupname,b.avator avatar ,b.id from chat_group_user a LEFT JOIN chat_t_group b on a.user_id=b.user_id where b.user_id='"+m.getId()+"'", null)); qury(map, false, 0);

这个接口里的数据包含用户自己信息，好友分组信息，加入群信息

返回数据结构大概如下

此处作者返回的状态码成功是20000，直接接入不会显示好友列表，官方给的状态码成功是0，可以自己修改js部分代码或按照官方标注数据数据。官方数据结构大概长这样

3.查看群成员接口

BaseModel m = getModel(request, BaseModel.class);//取值 if(!ValidateUtil.empty(response,m.getId())) return;// LinkedHashMap<Object, Object> map=new LinkedHashMap<>(); List<Map<String, Object>> list = BaseService.queryList("SELECT nick_name as username,sign, avatar,b.user_id as id from chat_group_user a LEFT JOIN chat_t_user b on a.user_id=b.user_id where group_id='"+m.getId()+"'", null); map.put("list", list); qury(map, false, 0);

到这里我们实现的功能，登录

好友列表

查看群成员

聊天好友离线置灰

其他功能后续**更新，在整体功能实现完成后会分享全部代码需要的同学请关注后续