当前位置:首页 > PHP

php实现在线客服插件

2026-01-29 06:56:43PHP

实现基础功能

使用PHP结合WebSocket技术建立实时通信。安装Ratchet库(PHP WebSocket库),通过Composer进行安装:

composer require cboden/ratchet

创建WebSocket服务器脚本(例如server.php),处理连接、消息收发和断开事件:

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        foreach ($this->clients as $client) {
            $client->send($msg);
        }
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        $conn->close();
    }
}

$app = new Ratchet\App('localhost', 8080);
$app->route('/chat', new Chat, array('*'));
$app->run();

前端交互界面

创建HTML页面引入JavaScript WebSocket客户端,实现消息发送和接收功能:

<div id="chat-box" style="height:300px;overflow-y:scroll;"></div>
<input type="text" id="message" placeholder="输入消息">
<button onclick="sendMessage()">发送</button>

<script>
    const conn = new WebSocket('ws://localhost:8080/chat');

    conn.onmessage = function(e) {
        document.getElementById('chat-box').innerHTML += 
            '<div>' + e.data + '</div>';
    };

    function sendMessage() {
        const msg = document.getElementById('message').value;
        conn.send(msg);
        document.getElementById('message').value = '';
    }
</script>

用户身份识别

在连接建立时传递用户身份信息,服务器端进行区分存储。修改前端连接代码:

const userId = 'user_' + Math.random().toString(36).substr(2,9);
const conn = new WebSocket('ws://localhost:8080/chat?userId=' + userId);

服务器端解析查询参数并存储用户信息:

public function onOpen(ConnectionInterface $conn) {
    parse_str($conn->httpRequest->getUri()->getQuery(), $query);
    $conn->userId = $query['userId'];
    $this->clients->attach($conn);
}

消息持久化存储

创建MySQL表存储聊天记录:

php实现在线客服插件

CREATE TABLE chat_messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    sender_id VARCHAR(50),
    message TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

在消息处理时插入数据库记录:

public function onMessage(ConnectionInterface $from, $msg) {
    // 存储到数据库
    $pdo = new PDO('mysql:host=localhost;dbname=chat_db', 'username', 'password');
    $stmt = $pdo->prepare("INSERT INTO chat_messages (sender_id, message) VALUES (?, ?)");
    $stmt->execute([$from->userId, $msg]);

    // 广播消息
    foreach ($this->clients as $client) {
        $client->send(json_encode([
            'user' => $from->userId,
            'message' => $msg
        ]));
    }
}

客服人员分配

实现简单的轮询分配策略,创建客服在线列表:

class Chat implements MessageComponentInterface {
    protected $clients;
    protected $supportStaff = [];

    public function onOpen(ConnectionInterface $conn) {
        parse_str($conn->httpRequest->getUri()->getQuery(), $query);
        $conn->userId = $query['userId'];
        $conn->role = $query['role'] ?? 'customer';

        if ($conn->role === 'support') {
            $this->supportStaff[] = $conn;
        } else {
            $this->clients->attach($conn);
        }
    }
}

历史消息加载

添加API端点返回历史消息:

php实现在线客服插件

// 创建HTTP端点
$app->get('/history', function(Request $request) {
    $pdo = new PDO('mysql:host=localhost;dbname=chat_db', 'username', 'password');
    $stmt = $pdo->query("SELECT * FROM chat_messages ORDER BY created_at DESC LIMIT 50");
    return new Response(json_encode($stmt->fetchAll(PDO::FETCH_ASSOC)));
});

前端加载历史记录:

fetch('/history')
    .then(res => res.json())
    .then(messages => {
        messages.reverse().forEach(msg => {
            document.getElementById('chat-box').innerHTML += 
                `<div><strong>${msg.sender_id}:</strong> ${msg.message}</div>`;
        });
    });

运行与部署

启动WebSocket服务器:

php server.php

配置Nginx反向代理WebSocket连接:

location /chat {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}

使用Supervisor保持进程常驻:

[program:chat_server]
command=php /path/to/server.php
autostart=true
autorestart=true
stderr_logfile=/var/log/chat_server.err.log
stdout_logfile=/var/log/chat_server.out.log

分享给朋友:

相关文章

vue实现皮肤插件

vue实现皮肤插件

实现思路 Vue实现皮肤插件通常通过动态切换CSS变量或类名实现。核心思路是将皮肤样式抽离为独立的CSS文件或变量,通过用户交互或配置切换不同的皮肤主题。 基础实现方案 定义皮肤变量 在全局CSS中…

vue实现上移下移插件

vue实现上移下移插件

实现思路 在Vue中实现上移下移功能,可以通过操作数组元素的顺序来完成。通常需要绑定点击事件,利用数组的splice方法交换元素位置。 基础实现代码 <template> <d…

vue滚动插件实现

vue滚动插件实现

vue滚动插件实现方法 使用vue-virtual-scroller 安装依赖包: npm install vue-virtual-scroller 注册组件: import VueVirtu…

swiper插件如何react

swiper插件如何react

安装 Swiper 依赖 在 React 项目中安装 Swiper 的核心库和 React 组件包。通过 npm 或 yarn 安装以下依赖: npm install swiper react-i…

uniapp 路由插件

uniapp 路由插件

在UniApp中,路由管理通常依赖框架内置的页面跳转API,但若需要更高级的路由功能(如动态路由、拦截器等),可通过以下插件或方案实现: 路由插件推荐 uni-simple-router 专为Uni…

vue实现复制插件

vue实现复制插件

实现复制功能的插件方法 在Vue中实现复制功能可以通过多种方式完成,以下是几种常见且实用的方法: 使用clipboard.js库 安装clipboard.js库: npm install cl…