自定义微信公众号客服，微信客服1.0（及时通信）

迷南。 2022-11-14 00:59 262阅读 0赞

**先来看看效果图，图片大小受限，只展示聊天部分，更多效果请看视频**

![在这里插入图片描述][20210328094426578.gif_pic_center]

### 文章目录 ###

*   *  一、准备
     *   *  1-1、映射外网工具
         *  1-2、一个测试微信号
         *  1-3、MySql数据库
     *  二、启动项目
     *  三、视频讲解
     *  四、文字讲解
     *   *  4-1、xml解析
         *  4-2、异步处理
         *  4-3、主要的业务逻辑
         *  4-4、其它业务逻辑
         *   *  4-4-1、WebSocket
             *  4-4-2、WxHandler
             *  4-4-3、MsgController
             *  4-4-4、SessionController
             *  4-4-5、UserController

## 一、准备 ##

### 1-1、映射外网工具 ###

微信公众号和我们代码之前交互，是需要我们提供可以被外网访问的接口。

[ngrok下载、安装、使用][ngrok]

### 1-2、一个测试微信号 ###

如果有自己的公众号，也可以直接拿公众号来验证。没有的话有没有关系可以自己申请一个测试号。

测试号除了页面简陋之外其它的功能也大致相似，我这次也是用的测试号。

[申请地址][Link 1]

### 1-3、MySql数据库 ###

消息和会话列表是需要持久化的，所以需要用到关系型数据库

[Linux下安装MySql][Linux_MySql]

[Windows下安装MySql][Windows_MySql]

## 二、启动项目 ##

去github上面下载源代码，然后配置上面的三个需求即可。

**注：此项目为xdxIm里面的wxkf1.0**

[https://github.com/xdxTao/xdxIm][https_github.com_xdxTao_xdxIm]

## 三、视频讲解 ##

[https://www.bilibili.com/video/BV1aA411N7hu/][https_www.bilibili.com_video_BV1aA411N7hu]

## 四、文字讲解 ##

之前也有写过一篇讲解微信客服的文章，这里就只讲之前文章里面没有讲到的内容。

[微信公众号接入自己的客服系统，自定义客服系统][Link 2]

### 4-1、xml解析 ###

微信调用我们的接口数据传输格式是xml，比如下面这样

所以我们要对消息进行解析，这里我写了一个简单的方法用来解析xml的数据

/** * 通过反射的方式，将xml数据封装到对应的实体里面去 * @param xmlString xml的字符串 * @param t 返回值类型 */
    public T Wxformat(String xmlString,T t){ 
    
        if (xmlString.length() < 10){ 
            throw new RuntimeException("错误的xml");
        }
        // 对于一般的XML解析不需要这两行，但是微信的消息都是使用前后缀，所以这里多做一步
        xmlString = xmlString.replace("<![CDATA[", "");
        xmlString = xmlString.replace("]]>","");
    
        xmlString = xmlString.substring(5,xmlString.length()-6);
        Map<String,Object> map = new HashMap<String, Object>();
        char[] chars = xmlString.toCharArray();
        StringBuilder curFiled = new StringBuilder();
        StringBuilder curContent = new StringBuilder();
        int flag = 0;
        for (int i = 0;i < chars.length; i++){ 
            if (chars[i] == '<' && flag != 1){ 
                continue;
            }
            if (chars[i] != '>' && flag != 1){ 
                curFiled.append(chars[i]);
                continue;
            }else if (flag != 1){ 
                flag = 1;
                continue;
            }
    
            if (flag == 1 && chars[i] != '<'){ 
                curContent.append(chars[i]);
                continue;
            }
            if (flag == 1 && chars[i] == '<'){ 
                map.put(curFiled.toString(), curContent.toString());
                i += curFiled.length() + 2;
                curFiled.delete(0,curFiled.length());
                curContent.delete(0, curContent.length());
                flag = 0;
            }
        }
        try { 
            Class<?> aClass = t.getClass();
            for (String key : map.keySet()){ 
                Method method = aClass.getMethod("set" + key, String.class);
                method.invoke(t, map.get(key));
            }
        }catch (Exception e){ 
    
        }
        return t;
    }

### 4-2、异步处理 ###

微信调用我们的接口超时时间是5s，会重复调用三次，如果三次都失败就会对用户显示：**该公众号提供的服务出现故障，请稍后再试**

这是肯定不允许的，有时候我们的业务太过复杂或者咋样都会导致超时，所以这里我们使用异步的方式来处理我们的业务。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

### 4-3、主要的业务逻辑 ###

我们最后要做的效果就是，当一个消息来了，如果客服和这个人建立连接，就推送消息，如果没有就让未读消息+1。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]

### 4-4、其它业务逻辑 ###

#### 4-4-1、WebSocket ####

webSocket建立连接、关闭连接、推送消息

#### 4-4-2、WxHandler ####

接收微信消息的接口

#### 4-4-3、MsgController ####

获取消息、发送消息

#### 4-4-4、SessionController ####

获取会话列表、创建会话、删除会话

#### 4-4-5、UserController ####

客服登录、登出

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]

[20210328094426578.gif_pic_center]: /images/20221022/e3c18a2c48324c1cb7c2afa082e993e1.png
[ngrok]: https://blog.csdn.net/Tomwildboar/article/details/107441588
[Link 1]: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
[Linux_MySql]: https://blog.csdn.net/Tomwildboar/article/details/89461860
[Windows_MySql]: https://blog.csdn.net/Tomwildboar/article/details/90613492
[https_github.com_xdxTao_xdxIm]: https://github.com/xdxTao/xdxIm
[https_www.bilibili.com_video_BV1aA411N7hu]: https://www.bilibili.com/video/BV1aA411N7hu/
[Link 2]: https://blog.csdn.net/Tomwildboar/article/details/114015257
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20221022/6d9a207cd0fd4096ba28743f5fd81e0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20221022/6d376b9e08df4000b2643ecb122a0883.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20221022/128f52cc09e2481c8ffcde7c50be5b25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]: /images/20221022/845332487ce94d31ac62d54851da2e92.png