介绍

客服聊天模块，主要用于后台客服与前端用户（如 APP 及小程序端用户）提供流畅的交流渠道，从而实现即时通信和高效服务。

集成了SocketIo，作为即时通讯的基础框架，支持文本、图片、表情等聊天。

演示视频

安装

1、复制模块

• 复制midway文件夹中的模块(注：非 midway 文件夹)到后端 midway 项目的src/modules目录下
• 复制vue文件夹中的模块(注：非 vue 文件夹)到前端 vue 项目的src/modules
• 复制uniapp文件夹中的模块(注：非 uniapp 文件夹)到前端 uniapp 项目的uni_modules目录下

2、开启 socket 服务

后端需要开启 socket 服务具体可以查看文档

3、安装依赖

后端依赖

• @midwayjs/socketio@3.15.0
• @socket.io/redis-adapter@8.2.1

推荐使用pnpm安装

pnpm install @midwayjs/socketio @socket.io/redis-adapter

前端依赖

在 uniapp 中安装

• @hyoga/uni-socket.io@3.0.4

pnpm install @hyoga/uni-socket.io@3.0.4

在 vue 中安装

• socket.io-client@4.7.2

pnpm install socket.io-client

4、使用

前端

在 vue 中使用

前端添加 cs 模块后，会在页面右上角出现小铃铛的图标，配置如下：

编辑 src/modules/cs/config.ts

import type { ModuleConfig } from "/@/cool";

export default (): ModuleConfig => {
  return {
    toolbar: {
      order: 2,
      component: import("./components/index.vue"),
    },
  };
};

5、启动项目

启动项目后，会自动导入模块的菜单和数据

部署

部署的时候特别需要注意你的 nginx 配置，需要配置 socket 代理，示例：

  upstream cool {
        server 127.0.0.1:8001;
    }
    server
    {
        ...
        # 前端打包完放这边
        root /home/test/front;

        # 防止刷新404
        location / {
        try_files $uri $uri/ /index.html;
        }

        # 代理服务端地址  访问/api 表示访问服务端接口而不是静态资源
        location /api/
        {
            proxy_pass http://127.0.0.1:8001/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header REMOTE-HOST $remote_addr;

            proxy_cache_bypass no_cache;

            #缓存相关配置
            #proxy_cache cache_one;
            #proxy_cache_key $host$request_uri$is_args$args;
            #proxy_cache_valid 200 304 301 302 1h;

            #持久化连接相关配置
            proxy_connect_timeout 3000s;
            proxy_read_timeout 86400s;
            proxy_send_timeout 3000s;
            #proxy_http_version 1.1;
            #proxy_set_header Upgrade $http_upgrade;
            #proxy_set_header Connection "upgrade";

            add_header X-Cache $upstream_cache_status;

            #expires 12h;
        }

        # socket需而外配置
        location /socket {
            proxy_pass http://cool/socket;
            proxy_connect_timeout 3600s; #配置点1
            proxy_read_timeout 3600s; #配置点2,如果没效,可以考虑这个时间配置长一点
            proxy_send_timeout 3600s; #配置点3
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header REMOTE-HOST $remote_addr;
            #proxy_bind $remote_addr transparent;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            rewrite /socket/(.*) /$1 break;
            proxy_redirect off;

        }

        # socket需而外配置
        location /cs {
            proxy_pass http://cool/cs;
            proxy_connect_timeout 3600s; #配置点1
            proxy_read_timeout 3600s; #配置点2,如果没效,可以考虑这个时间配置长一点
            proxy_send_timeout 3600s; #配置点3
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header REMOTE-HOST $remote_addr;
            #proxy_bind $remote_addr transparent;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            rewrite /socket/(.*) /$1 break;
            proxy_redirect off;

        }
    }

更新

• v1.1.0(2024-04-21)

  • uniapp(v7.3.0)调整，添加自动导入 pages.json

• v1.0.0（2024-02-29）

  • 初始版本