30行PHP，利用硅基流动API，网页客服瞬间上线

欢迎来到小灰灰的博客空间！Weclome you！
博客主页：IT·小灰灰
爱发电：小灰灰的爱发电
热爱领域：前端（HTML）、后端（PHP）、人工智能、云服务

一、硅基流动平台准备

二、极简架构设计

三、核心PHP代码实现

四、前端界面实现

五、部署与优化技巧

六、扩展方向

结语

在传统认知中，搭建一个智能客服系统需要经历需求分析、架构设计、模型训练、接口对接等漫长流程，动辄耗时数周甚至数月。然而，随着大模型API服务的成熟，开发者完全可以跳过复杂的模型部署环节，直接调用现成能力快速构建应用。硅基流动（SiliconFlow）作为国内领先的AI云服务平台，不仅提供了DeepSeek、Qwen等主流大模型API，更慷慨赠送14元额度（约2000万Token），让个人开发者也能零成本验证创意。
本文将打破"客服系统必须复杂"的刻板印象，用最极简的30行PHP代码，结合硅基流动的Chat Completion API，实现一个能实时响应、支持流式输出的网页客服系统。无需数据库、无需框架、无需复杂配置——只需一个PHP文件和几行前端代码，10分钟内即可让你的网站拥有AI客服能力。

一、硅基流动平台准备

访问 cloud.siliconflow.cn 完成注册，实名认证后，点击左侧菜单"API密钥"创建专属Key，这是后续调用的唯一凭证。

在"模型广场"中选择适合客服场景的模型。经实测，以下模型性价比突出：

DeepSeek-V3：响应速度快，通用问答能力强
Qwen/Qwen2.5-7B-Instruct：中文优化好，适合电商场景
Pro/deepseek-ai/DeepSeek-R1：复杂问题推理能力优秀

二、极简架构设计

摒弃传统MVC架构，采用"单文件PHP+静态HTML"的极端简洁模式：

后端：30行PHP负责接收请求、调用硅基流动API、返回流式响应
前端：原生HTML+JavaScript实现聊天界面和流式输出
通信：AJAX POST请求，EventSource接收流式数据

这种设计不仅部署方便（丢到任意PHP空间即可运行），更避免了框架依赖和性能开销。

三、核心PHP代码实现

<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $apiKey = 'sk-your-key-here'; // 从硅基流动控制台获取 $model = 'deepseek-ai/DeepSeek-V3'; // 根据需求调整 $message = $_POST['msg'] ?? ''; $history = $_POST['history'] ?? '[]'; $ch = curl_init('https://api.siliconflow.cn/v1/chat/completions'); curl_setopt_array($ch, [ CURLOPT_POST => true, CURLOPT_RETURNTRANSFER => false, CURLOPT_WRITEFUNCTION => function($ch, $data) { echo "data: " . base64_encode($data) . "\n\n"; ob_flush(); flush(); return strlen($data); }, CURLOPT_HTTPHEADER => [ 'Authorization: Bearer ' . $apiKey, 'Content-Type: application/json' ], CURLOPT_POSTFIELDS => json_encode([ 'model' => $model, 'messages' => array_merge(json_decode($history, true), [ ['role' => 'user', 'content' => $message] ]), 'stream' => true, 'max_tokens' => 2048, 'temperature' => 0.7 ]) ]); curl_exec($ch); curl_close($ch); ?>

代码要点解析：

设置text/event-stream头实现SSE流式传输
CURLOPT_WRITEFUNCTION实时转发API响应，避免内存积压
base64_encode处理中文编码问题，确保传输稳定
history参数实现多轮对话上下文记忆

四、前端界面实现

<!DOCTYPE html> <html> <head> <title>智能客服</title> <meta charset="utf-8"> <style> body{margin:0;background:#1a1a1a;color:#fff;font-family:monospace} #chat{height:90vh;overflow-y:auto;padding:20px} .msg{margin:10px 0} .user{text-align:right;color:#4af} .bot{color:#0f0} #input{position:fixed;bottom:0;width:100%;padding:10px;background:#333} #msgInput{width:80%;padding:8px;background:#222;color:#fff;border:none} button{padding:8px 20px;background:#4af;color:#fff;border:none;cursor:pointer} </style> </head> <body> <div id="chat"></div> <div id="input"> <input type="text" id="msgInput" placeholder="输入问题..."> <button onclick="send()">发送</button> </div> <script> let history = []; function send() { const input = document.getElementById('msgInput'); const msg = input.value.trim(); if (!msg) return; appendMsg('user', msg); input.value = ''; const source = new EventSource(`chat.php?action=stream`); source.onmessage = e => { const data = JSON.parse(atob(e.data)); if (data.choices?.[0].delta.content) { appendMsg('bot', data.choices[0].delta.content, true); } }; } function appendMsg(role, text, stream = false) { const chat = document.getElementById('chat'); if (!stream || !chat.lastElementChild?.classList.contains('bot')) { chat.innerHTML += `<div class="${role}">${text}</div>`; } else { chat.lastElementChild.textContent += text; } chat.scrollTop = chat.scrollHeight; } </script> </body> </html>

界面设计原则：