前两篇文章有点乱,很多朋友看了可能感觉到不知道如何下手,本篇就一步一步实现一下
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 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 map=new LinkedHashMap<>(); Map mine = BaseService.qr.query("select nick_name as username,sign, avatar,user_id id from chat_t_user where user_id='"+m.getId()+"'