多语言在线客服系统源码全套开源｜支持Web/APP/H5｜一键部署方案

// src/lang/index.js
import { createI18n } from 'vue-i18n'
import en from './en.json'
import zhCN from './zhCN.json'
import ja from './ja.json'

const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('lang') || 'zhCN',
  fallbackLocale: 'zhCN',
  messages: {
    'zhCN': zhCN,
    en: en,
    ja: ja
  }
})

export default i18n

<template>
  <div>
    <h1>{{ $t('chat.title') }}</h1>
    <button @click="switchLanguage('en')">{{ $t('common.en') }}</button>
    <button @click="switchLanguage('zhCN')">{{ $t('common.zh') }}</button>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage(lang) {
      this.$i18n.locale = lang
      localStorage.setItem('lang', lang)
    }
  }
}
</script>

// 检测语种
function checkLang() {
  let lang = getQuery("lang") || getLocalStorage("lang");
  if (!lang) {
    switch (navigator.language) {
      case "en-US": 
        lang = "en";
        break;
      default: 
        lang = "cn";
    }
  }
  loadJsFile("lang/" + lang + ".js");
  return lang;
}

{
  "chat": {
    "title": "在线客服",
    "welcome_message": "欢迎使用在线客服系统！",
    "input": {
      "placeholder": "请输入您的问题...",
      "send": "发送"
    }
  },
  "common": {
    "loading": "加载中...",
    "confirm": "确定",
    "cancel": "取消"
  }
}

async function loadLanguageResources(lang) {
  const module = await import(`./locales/${lang}.json`);
  i18n.addResourceBundle(lang, 'translation', module);
}

function getCDNUrl(lang) {
  const region = detectUserRegion();
  return `https://cdn.example.com/${region}/${lang}/translation.json`;
}

{
  "welcome": "[§¼ñçë ŵêłçôмê]",
  "send_message": "[§êñð_µê§§áĝê]"
}

namespace App\WebSockets;

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class ChatWebSocket implements MessageComponentInterface
{
    protected $clients = [];
    
    public function onOpen(ConnectionInterface $conn, $userId = null, $agentId = null)
    {
        // 验证用户身份并存储连接
        $this->clients[$conn->resourceId] = [
            'conn' => $conn,
            'userId' => $userId,
            'agentId' => $agentId,
            'conversationId' => $this->chatService->getOrCreateConversation($userId, $agentId)
        ];
    }
    
    public function onMessage(ConnectionInterface $from, $msg)
    {
        $data = json_decode($msg, true);
        $client = $this->clients[$from->resourceId];
        
        switch ($data['type']) {
            case 'message':
                $this->handleMessage($client, $data['payload']);
                break;
            case 'typing':
                $this->handleTyping($client, $data['payload']);
                break;
        }
    }
    
    private function handleMessage($client, $messageData)
    {
        // 保存消息到数据库
        $message = $this->chatService->sendMessage(
            $client['conversationId'],
            $client['userId'],
            $messageData['content'],
            $messageData['type'] ?? 'text'
        );
        
        // 广播消息到对话相关的所有客户端
        $this->broadcastToConversation($client['conversationId'], [
            'type' => 'message',
            'payload' => $message->toArray()
        ]);
    }
}

export default class WebSocketService {
  constructor() {
    this.socket = null;
    this.callbacks = {};
  }
  
  connect(userId, agentId) {
    const token = localStorage.getItem('token');
    this.socket = new WebSocket(`ws://${window.location.host}/ws/chat/${userId}/${agentId}?token=${token}`);
    
    this.socket.onopen = () => {
      console.log('WebSocket连接已建立');
    };
    
    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (this.callbacks[data.type]) {
        this.callbacksdata.payload;
      }
    };
    
    this.socket.onclose = () => {
      setTimeout(() => {
        this.connect(userId, agentId); // 自动重连
      }, 3000);
    };
  }
  
  on(eventType, callback) {
    this.callbacks[eventType] = callback;
  }
}

namespace App\Services;

class AIService
{
    public function getAIReply($message, $context = [])
    {
        // 意图识别
        $intent = $this->detectIntent($message);
        
        // 根据意图选择回复策略
        switch ($intent) {
            case 'greeting':
                return $this->getGreetingReply();
            case 'product_query':
                return $this->handleProductQuery($message, $context);
            default:
                return $this->getGPTReply($message, $context);
        }
    }
    
    private function getGPTReply($message, $context)
    {
        // 调用OpenAI兼容接口
        $response = Http::withHeaders([
            'Authorization' => 'Bearer ' . config('services.openai.key'),
            'Content-Type' => 'application/json'
        ])->post('https://api.openai.com/v1/chat/completions', [
            'model' => 'gpt-3.5-turbo',
            'messages' => [
                ['role' => 'system', 'content' => '你是一个专业的客服助手'],
                ['role' => 'user', 'content' => $message]
            ]
        ]);
        
        return $response->json()['choices'][0]['message']['content'];
    }
}

namespace App\Traits;

trait Tenantable
{
    public function scopeForTenant($query, $tenantId = null)
    {
        $tenantId = $tenantId ?: app('currentTenant')->id;
        return $query->where('tenant_id', $tenantId);
    }
}

class Conversation extends Model
{
    use Tenantable;
    
    // 模型定义
}

// routes/api.php
Route::middleware('auth:sanctum')->group(function() {
    Route::prefix('chat')->group(function() {
        Route::get('conversations', [ChatController::class, 'getConversations']);
        Route::post('messages', [ChatController::class, 'sendMessage']);
    });
    
    Route::prefix('ai')->group(function() {
        Route::post('reply', [AIController::class, 'getAIReply']);
    });
});

# 连接服务器后执行以下命令
if [ -f /usr/bin/curl ]; then
    curl -sSO https://files.example.com/install.sh
else
    wget -O install.sh https://files.example.com/install.sh
fi

chmod +x install.sh
bash install.sh

<!-- 网页JS弹窗接入示例 -->
<script type='text/javascript'>
    (function(a, b, c, d) {
        let h = b.getElementsByTagName('head')[0];
        let s = b.createElement('script');
        s.type = 'text/javascript';
        s.src = c + "/static/js/kefu-front.js";
        s.onload = s.onreadystatechange = function() {
            if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") d(c);
        };
        h.appendChild(s);
    })(window, document, "https://your-domain.com", function(u) {
        KEFU.init({
            KEFU_URL: u,
            KEFU_KEFU_ID: "商户账号",
            KEFU_ENT: "商户ID",
            KEFU_LANG: "cn" // 设置默认语言
        });
    });
</script>

// H5嵌入示例
if (isWeChat()) {
    // 微信特定优化
    adaptWeChatEnvironment();
} else if (isDouYin()) {
    // 抖音特定优化
    adaptDouYinEnvironment();
}