Multi-Language Instant Messaging System: Complete Guide to Social Chat with Voice and Video Calling At the beginning of this year, I took on a social chat project in the Middle East region. The client required the system to simultaneously support multiple languages including Arabic, English, and Chinese, plus integrated voice and video calling features. After about three weeks of research, I finally selected this instant messaging solution based on UniApp front-end development. After two weeks of testing, the entire system finally stabilized. Today I am organizing the complete setup process for developers with similar requirements. 1. Detailed System Functionality Overview This multi-language instant messaging system uses a mainstream front-end and back-end separated architecture. The front-end is developed based on UniApp, which can simultaneously package iOS and Android APPs from one codebase. The back-end is fully open-source PHP supporting rapid secondary development. The main function modules include: 1.1 Multi-Language Chat Function Chat messages support multi-language real-time translation, which is one of the most distinctive features of the system. Messages sent by users can be real-time translated into the recipient’s set language, with translation delay controlled within 2 seconds. Testing shows support for mutual translation between more than 50 languages, with acceptable translation quality, fully sufficient for daily social scenarios. The system also supports multi-language interface switching. Users of different languages can independently set their interface language without affecting each other. 1.2 Voice and Video Calling Audio and video calling functionality implemented based on WebRTC technology. Call quality performs well under domestic network conditions. Testing shows WeChat video call latency is approximately 300-500ms, and this system is roughly at the same level. Supports video conferences with up to 9 people simultaneously (testing shows quality degrades noticeably above 5 people). The call module supports basic features such as call transfer, do-not-disturb, and whitelist/blacklist. The enterprise version also supports call recording and archiving. 1.3 Social Function Modules In addition to basic private messaging, the system also integrates the following social features: Dynamic Square: A Moments-style dynamic posting feature supporting images and short videos People Nearby: Location-based nearby user discovery feature Interest Groups: Groups organized by interest tags Friend Requests and Verification: Supports custom verification questions Message Read Receipts: Shows message delivery and read status 1.4 Message Security and Review The system has a built-in sensitive word filtering engine supporting custom word libraries. Image messages automatically detect and block inappropriate adult and violent content (based on Alibaba Cloud Content Security API). Important chat records support end-to-end encryption. 2. Pre-Setup Preparations Before starting setup, it is recommended to confirm the following points: Server Configuration: Recommended 4 cores and 8GB RAM or above, with bandwidth of at least 5Mbps. Voice and video calling have higher server performance requirements. If the user base exceeds 10,000, a configuration of 8 cores and 16GB RAM or above is recommended. Domain and SSL: HTTPS is mandatory. WebRTC calling must use port 443. Some browsers (such as Safari) will directly deny microphone permissions for non-HTTPS sites. Third-Party Service Applications: Need to apply in advance for LeanCloud or Jiguang IM services (for message push and offline message storage), plus Alibaba Cloud Content Security API (for image review). Technical Readiness: Familiar with UniApp, Vue.js, and PHP. Having WebRTC experience is a plus. Qualification Requirements: Voice and video calling business requires ICP license and related value-added telecom business license. Specific requirements depend on the regulations of the region and country where the service is operated. In China, voice and video calling falls under value-added telecom services and requires the relevant business license. Additionally, if social networking features are included, corresponding operating qualifications are also needed. For overseas deployment, the regulatory requirements vary by country and should be handled accordingly. 3. Server Environment Setup The recommended server environment configuration is as follows: Operating System: Ubuntu 20.04 LTS or CentOS 7+ Web Server: Nginx 1.18+ PHP: 7.4 or 8.0 Database: MySQL 5.7+ or MariaDB 10.5+ Redis: For caching and session storage Node.js: 14.x or higher (required for WebRTC signaling server) The installation steps are as follows: Step 1: Server Initialization Update the system and install basic dependencies: apt update && apt upgrade -y apt install -y curl wget git unzip libzip-dev libpng-dev libjpeg-dev libfreetype6-dev supervisor Step 2: Install Nginx Install Nginx and configure SSL certificates: apt install -y nginx systemctl enable nginx Step 3: Install PHP and Extensions Install PHP and required extensions: apt install -y php-fpm php-mysql php-json php-curl php-mbstring php-zip php-gd Step 4: Install MySQL Install and secure MySQL: apt install -y mysql-server systemctl enable mysql mysql_secure_installation Step 5: Install Redis Install Redis for caching: apt install -y redis-server systemctl enable redis-server Step 6: Deploy the Backend Code Clone the backend code from the repository: cd /var/www git clone [backend-repo-url] Configure the database connection and other settings in the configuration file. 4. UniApp Front-End Development The front-end uses UniApp framework, which supports compiling to iOS, Android, and WeChat mini-program. 4.1 Project Initialization Install HBuilderX or use the command line: npm install -g @vue/cli-init vue init dcloudio/uni-preset-vue [project-name] 4.2 Key Configuration Modify manifest.json to configure the app ID, permissions, and push notifications. In App.vue, initialize the multilingual configuration: import Vue from ‘vue’ import VueI18n from ‘vue-i18n’ import messages from ‘./lang’ Vue.use(VueI18n) const i18n = new VueI18n({ locale: ‘en’, messages }) new Vue({ i18n, render: h => h(App) }).$mount(‘#app’) 4.3 WebRTC Integration Integrate the WebRTC plugin for voice and video calling: import WebRTC from ‘@/utils/webrtc.js’ // Initialize WebRTC const webrtc = new WebRTC({ signalingUrl: ‘wss://your-server.com/ws’, iceServers: [ { urls: ‘stun:stun.l.google.com:19302’ } ] }) // Make a call async function callUser(userId) { const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) webrtc.call(localStream, userId) } 5. Multilingual Implementation The system implements multilingual support through VueI18n and backend translation APIs. 5.1 Front-End Multilingual Create language files in the lang directory: /lang /en.js /ar.js /zh.js // en.js export default { chat: { send: ‘Send’, input: ‘Type a message…’ }, call: { voice: ‘Voice Call’, video: ‘Video Call’ } } // ar.js export default { chat: { send: ‘إرسال’, input: ‘اكتب رسالة…’ }, call: { voice: ‘مكالمة صوتية’, video: ‘مكالمة فيديو’ } } 5.2 Real-Time Translation Integration The backend integrates the translation API to implement real-time message translation: // PHP Backend translation logic function translateMessage($text, $targetLang) { $apiKey = ‘your-translation-api-key’; $url = ‘https://api.translation-service.com/translate’; $data = [ ‘text’ => $text, ‘target’ => $targetLang, ‘source’ => ‘auto’ ]; $response = Http::post($url, $data); return $response->json()[‘translated_text’]; } 6. WebRTC Signaling Server Setup The WebRTC signaling server uses Node.js and Socket.io: const io = require(‘socket.io’)(server, { cors: { origin: ‘*’ } }) io.on(‘connection’, (socket) => { socket.on(‘join-room’, (roomId, userId) => { socket.join(roomId) socket.to(roomId).emit(‘user-connected’, userId) socket.on(‘disconnect’, () => { socket.to(roomId).emit(‘user-disconnected’, userId) }) }) }) 7. Testing and Optimization During testing, several key areas should be focused on: 7.1 Translation Quality Testing Test translation accuracy across different language pairs, especially for Arabic which has right-to-left layout requirements. 7.2 Call Quality Testing Test voice and video calls under various network conditions (4G, 5G, WiFi). Monitor latency, packet loss, and call success rate. 7.3 Stress Testing Use tools like JMeter or wrk to perform stress testing on the server. Pay attention to database connection pool usage and Redis cache hit rates. 8. Common Issues and Solutions Issue 1: WebRTC Connection Fails This is usually due to NAT traversal issues. Solution: Deploy STUN/TURN servers, recommend using coturn. Issue 2: Translation API Rate Limits Solution: Implement translation result caching and use a queue to manage translation requests. Issue 3: Audio/Video Call Quality Issues Check server bandwidth and codec settings. For overseas users, consider deploying servers in multiple regions. Issue 4: App Crash on Low-End Devices Optimize the front-end code, reduce memory usage, and lazy load media resources. 9. Summary This multi-language instant messaging system integrates modern social features with robust translation and communication capabilities. The UniApp cross-platform development approach significantly reduces development and maintenance costs. The WebRTC-based calling functionality provides a native-like experience. For developers looking to build similar systems, it is recommended to start with a single-language version first, then add multilingual and calling features. Pay attention to compliance with local regulations and ensure proper licensing for the business. With proper optimization and scaling, this system can support millions of concurrent users. If you have any questions, feel free to leave a comment for discussion.