「小程序里要能跟客服在线聊」，这是验收时临时加进来的一条。翻了一圈 `php/app/api/controller/`，里面是 article、cart、category、order、product、user 这些目录，确实没有 chat 或者 kefu 那一套。再查官网功能清单，内置 IM 客服标着 Pro，开源版没给。

客户预算不想为这一个功能升 Pro。代码是 Apache-2.0 开源的，那就自己补一个轻量版，够小店咨询、售后留言用就行。这篇把我加的前后端都贴出来。

## 两张表：会话和消息

单商户一个店一个客服，不用搞分组坐席，两张表够了：

```sql
-- 会话表
CREATE TABLE `chat_conversation` (
  `conversation_id` int unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int NOT NULL DEFAULT 0,
  `last_message` varchar(500) DEFAULT '',
  `unread_admin` int DEFAULT 0,
  `unread_user` int DEFAULT 0,
  `update_time` int DEFAULT 0,
  PRIMARY KEY (`conversation_id`),
  KEY `idx_user` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 消息表
CREATE TABLE `chat_message` (
  `message_id` int unsigned NOT NULL AUTO_INCREMENT,
  `conversation_id` int NOT NULL,
  `from_type` tinyint DEFAULT 1 COMMENT '1用户 2客服',
  `content` varchar(1000) DEFAULT '',
  `is_read` tinyint DEFAULT 0,
  `add_time` int DEFAULT 0,
  PRIMARY KEY (`message_id`),
  KEY `idx_conv` (`conversation_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```

对应两个模型放 `php/app/model/chat/`，跟其它模型一个写法，这里不贴了。

## WebSocket 用 Workerman 单独跑

tigshop 队列本身就能走 redis，装 Workerman 不冲突。新建一个命令 `php/app/command/ChatServer.php`，用 `php think chat:server` 起服务：

```php
<?php
namespace app\command;

use think\console\Command;
use think\console\Input;
use think\console\Output;
use Workerman\Worker;

class ChatServer extends Command
{
    protected function configure()
    {
        $this->setName('chat:server')->setDescription('tigshop 轻量客服 WebSocket');
    }

    protected function execute(Input $input, Output $output)
    {
        $ws = new Worker('websocket://0.0.0.0:2346');
        $ws->count = 2;
        // role_uid => connection，方便客服和用户互推
        $ws->uidConnections = [];

        $ws->onMessage = function ($conn, $data) use ($ws) {
            $msg = json_decode($data, true);
            // 首帧绑定身份：{type:'bind', uid:1, role:'user'}
            if (($msg['type'] ?? '') === 'bind') {
                $conn->uid = $msg['uid'];
                $conn->role = $msg['role'];
                $ws->uidConnections[$msg['role'] . '_' . $msg['uid']] = $conn;
                return;
            }
            // 普通消息：落库 + 转发
            $convId = \app\service\front\chat\ChatService::saveMessage($msg);
            \app\service\front\chat\ChatService::dispatch($ws, $msg, $convId);
        };

        Worker::runAll();
        return 0;
    }
}
```

消息落库和转发抽到 Service。tigshop 的前台业务 Service 都放 `php/app/service/front/` 下（现有的有 cart、user、promotion 这几层），我就照着加一个 `php/app/service/front/chat/ChatService.php`：

```php
<?php
namespace app\service\front\chat;

use app\model\chat\ChatMessage;
use app\model\chat\ChatConversation;

class ChatService
{
    public static function saveMessage(array $msg): int
    {
        $conv = ChatConversation::where('user_id', $msg['user_id'])->find();
        if (!$conv) {
            $conv = ChatConversation::create(['user_id' => $msg['user_id'], 'update_time' => time()]);
        }
        ChatMessage::create([
            'conversation_id' => $conv->conversation_id,
            'from_type'       => $msg['from_type'],
            'content'         => $msg['content'],
            'add_time'        => time(),
        ]);
        $conv->save(['last_message' => $msg['content'], 'update_time' => time()]);
        return $conv->conversation_id;
    }

    public static function dispatch($ws, array $msg, int $convId): void
    {
        // 用户发的推给客服，客服发的推给对应用户
        $target = $msg['from_type'] == 1 ? 'admin_0' : 'user_' . $msg['user_id'];
        if (isset($ws->uidConnections[$target])) {
            $ws->uidConnections[$target]->send(json_encode([
                'conversation_id' => $convId,
                'content'         => $msg['content'],
                'from_type'       => $msg['from_type'],
            ]));
        }
    }
}
```

历史消息不走 WebSocket，还是普通 HTTP 接口，符合 tigshop controller 的习惯。放 `php/app/api/controller/user/Chat.php`，继承 `IndexBaseController`、用 `checkLogin()` 和 `success()`，跟 Address、Aftersales 那些控制器一个套路：

```php
<?php
namespace app\api\controller\user;

use app\api\IndexBaseController;
use app\model\chat\ChatMessage;
use think\Response;

class Chat extends IndexBaseController
{
    public function history(): Response
    {
        $this->checkLogin();
        $convId = $this->request->all('conversation_id/d', 0);
        $list = ChatMessage::where('conversation_id', $convId)
            ->order('message_id', 'asc')->limit(50)->select();
        return $this->success(['records' => $list]);
    }
}
```

路由挂到 `php/app/api/route/user.php` 的 user 组里，跟 address、aftersales 一样带上 `CheckLogin` 中间件：

```php
Route::group('chat', function () {
    Route::get('history', 'user.chat/history');
})->middleware([\app\api\middleware\CheckLogin::class]);
```

## 前端：Uniapp 连 wss

tigshop 的 Uniapp 在 `view/Tigshop-Uniapp/src`，我在 `src/pages` 下加了个 `chat/index.vue`，连接逻辑很直白：

```javascript
// src/pages/chat/index.vue <script setup>
const socket = uni.connectSocket({ url: 'wss://你的域名/wss', complete: () => {} })

socket.onOpen(() => {
  socket.send({ data: JSON.stringify({ type: 'bind', uid: userId, role: 'user' }) })
})

socket.onMessage((res) => {
  const m = JSON.parse(res.data)
  msgList.value.push(m)
})

function send() {
  socket.send({ data: JSON.stringify({
    type: 'msg', user_id: userId, from_type: 1, content: input.value
  })})
  input.value = ''
}
```

Nginx 把 `/wss` 反代到 Workerman 的 2346 端口。小程序只认 wss，站点得先开着 SSL：

```nginx
location /wss {
    proxy_pass http://127.0.0.1:2346;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}
```

## 上线时踩到的两点

Workerman 进程 SSH 一断就没了，得用 supervisor 守着。宝塔自带 supervisor 管理器，加一条 `php think chat:server start` 让它拉起来、挂了自动重启就行。

客服后台我偷懒了，直接在 Tigshop-Admin 里加了个页面，轮询 `history` 接口拉新消息，配一个发送框，没做坐席分配和排队，单商户就一个客服，用不上。

这套接不了 Pro 的完整客服，量一大就得换。但对小店的日常咨询、售后留言，跑起来是够用的。代码我放论坛帖里了，有需要的自取。


「小程序里要能跟客服在线聊」，这是验收时临时加进来的一条。翻了一圈 php/app/api/controller/，里面是 article、cart、category、order、product、user 这些目录，确实没有 chat 或者 kefu 那一套。再查官网功能清单，内置 IM 客服标着 Pro，开源版没给。

给 Tigshop开源商城单商户补一个 WebSocket 在线客服，Pro 才有的功能自己接（附代码）

后端

编程语言

开发工具

本文分享如何为开源电商系统Tigshop添加轻量级在线客服功能，包含完整的SQL表结构、PHP后端实现、WebSocket通信方案及Uniapp前端代码。采用Workerman实现实时聊天，适合单商户客服场景，解决预算有限无法升级Pro版的问题。提供Nginx配置和Supervisor守护方案，实现稳定运行。

代码解释

中间件

WebSocket

路由

Nginx

JSON

2026上云采购 | AI焕新·智启新局

热销域名限时优惠，新客首年免费！


domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

给 Tigshop开源商城单商户补一个 WebSocket 在线客服，Pro 才有的功能自己接（附代码）-腾讯云开发者社区-腾讯云

给 Tigshop开源商城单商户补一个 WebSocket 在线客服，Pro 才有的功能自己接（附代码）

给 Tigshop开源商城单商户补一个 WebSocket 在线客服，Pro 才有的功能自己接（附代码）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐