Technical Spec Part 2: Chat Implementation & Deployment

Technical Spec: Chat Implementation & Deployment

This is part 2 of the developer documentation, focusing on the architecture for real-time communication. This section covers Socket.io setup, the React chat component, auto-translation API logic, file upload handling with watermarking, security checklists, and a projected 6-week implementation timeline.

Tech Stack

WebSocket Events

Client → Server

socket.emit("join_room", { room_id })
socket.emit("leave_room", { room_id })
socket.emit("typing", { room_id, is_typing })
socket.emit("message", { room_id, type, text, file_url })
socket.emit("read_messages", { room_id, message_ids })
socket.emit("voice_note", { room_id, audio_blob })

Server → Client

socket.on("new_message", (message) => { ... })
socket.on("user_typing", (data) => { ... })
socket.on("user_joined", (data) => { ... })
socket.on("user_left", (data) => { ... })
socket.on("message_read", (data) => { ... })
socket.on("nda_signed", (data) => { ... })
socket.on("deal_status_changed", (data) => { ... })
socket.on("online_status", (data) => { ... })

Socket.io Server (Node.js)

Implementing real-time communication requires a robust event-driven architecture. By utilizing Node.js with Socket.io, developers can manage bi-directional data flow effectively. While MBC focuses on connecting sponsors with farmers through the COJAZ cooperative in Zambezia and verifying field impacts, these technical patterns represent the potential future of digital infrastructure for agricultural transparency.

const io = require('socket.io')(server, {
  cors: { origin: process.env.FRONTEND_URL }
});

// Auth middleware
io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  const decoded = jwt.verify(token, process.env.JWT_SECRET);
  socket.userId = decoded.userId;
  next();
});

io.on('connection', (socket) => {
  // Join room
  socket.on('join_room', async ({ room_id }) => {
    const room = await ChatRoom.findById(room_id);
    if (!isParticipant(room, socket.userId)) return;
    socket.join(room_id);
    socket.to(room_id).emit('user_joined', { user_id: socket.userId });
  });

  // New message
  socket.on('message', async (data) => {
    const { room_id, type, text, file_url } = data;
    
    const message = await Message.create({
      chat_room_id: room_id,
      sender_id: socket.userId,
      type, text, file_url,
      original_language: data.original_language
    });

    // Auto-translate
    if (text) {
      message.translations = {
        en: await translateText(text, data.original_language, 'en'),
        pt: await translateText(text, data.original_language, 'pt'),
        zh: await translateText(text, data.original_language, 'zh')
      };
      await message.save();
    }

    io.to(room_id).emit('new_message', message);

    // Update room metadata
    await ChatRoom.findByIdAndUpdate(room_id, {
      last_message_at: new Date(),
      last_message_preview: text?.substring(0, 100) || '[File]'
    });

    // Send notifications to offline users
    const room = await ChatRoom.findById(room_id).populate('participants');
    const offline = room.participants.filter(p => 
      p._id !== socket.userId && p.online_status === 'offline'
    );
    offline.forEach(user => {
      if (user.notification_prefs.whatsapp) {
        sendWhatsApp(user.phone, 'New message on platform');
      }
    });
  });

  // Typing
  socket.on('typing', ({ room_id, is_typing }) => {
    socket.to(room_id).emit('user_typing', { user_id: socket.userId, is_typing });
  });

  // Read receipts
  socket.on('read_messages', ({ room_id, message_ids }) => {
    message_ids.forEach(id => {
      Message.findByIdAndUpdate(id, {
        $addToSet: { read_by: socket.userId }
      });
    });
    socket.to(room_id).emit('message_read', { message_ids, user_id: socket.userId });
  });
});

React Chat Component

The implementation of a React-based chat room allows for real-time interaction using Socket.io. This architecture is relevant when considering how digital platforms could facilitate communication in agricultural sectors, such as connecting technical support teams with rural cooperatives like the COJAZ cooperative in Zambezia, Mozambique.

import { useState, useEffect, useRef } from 'react';
import { io } from 'socket.io-client';

export default function ChatRoom({ roomId, userId, userLanguage }) {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const [otherUserTyping, setOtherUserTyping] = useState(false);
  const socketRef = useRef();
  const messagesEndRef = useRef();

  useEffect(() => {
    socketRef.current = io(process.env.REACT_APP_SOCKET_URL, {
      auth: { token: localStorage.getItem('jwt') }
    });
    const socket = socketRef.current;

    socket.emit('join_room', { room_id: roomId });

    socket.on('new_message', (message) => {
      setMessages(prev => [...prev, message]);
      if (message.original_language !== userLanguage) {
        // Auto-translate shows translated text
      }
      socket.emit('read_messages', { room_id: roomId, message_ids: [message.id] });
    });

    socket.on('user_typing', (data) => setOtherUserTyping(data.is_typing));

    return () => {
      socket.emit('leave_room', { room_id: roomId });
      socket.disconnect();
    };
  }, [roomId, userLanguage]);

  const sendMessage = () => {
    if (!newMessage.trim()) return;
    socketRef.current.emit('message', {
      room_id: roomId,
      type: 'text',
      text: newMessage,
      original_language: userLanguage
    });
    setNewMessage('');
  };

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div className="chat-room">
      <div className="messages">
        {messages.map(msg => (
          <div key={msg._id} className={msg.sender_id === userId ? 'own' : 'other'}>
            {msg.translations?.[userLanguage] || msg.text}
          </div>
        ))}
        {otherUserTyping && <div className="typing">Typing...</div>}
        <div ref={messagesEndRef} />
      </div>
      <div className="input">
        <textarea
          value={newMessage}
          onChange={e => setNewMessage(e.target.value)}
          onKeyPress={e => e.key === 'Enter' && !e.shiftKey && sendMessage()}
        />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
}

Auto-Translation

Integrating automated translation services enables cross-lingual communication. For future applications in agricultural development, this technology could help bridge language barriers between international sponsors and verified smallholder farmers in diverse regions, ensuring that information about crops or local needs is clearly understood.

const { Translate } = require('@google-cloud/translate').v2;
const translate = new Translate({ key: process.env.GOOGLE_TRANSLATE_KEY });

async function translateText(text, sourceLang, targetLang) {
  if (sourceLang === targetLang) return text;
  const [translation] = await translate.translate(text, {
    from: sourceLang, to: targetLang
  });
  return translation;
}
// Supports: pt, en, zh, fr, ar

File Upload with Watermarking

Securing shared media through visual watermarking ensures authenticity and accountability. When handling documentation—such as receipts for fertilizers and seeds provided to farmers—verifiable imagery is essential to maintain transparency between the sponsorship process and the verified smallholder farms.

const multer = require('multer');
const sharp = require('sharp');

const upload = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 50 * 1024 * 1024 } // 50MB
});

// Images get visual watermark
if (file.mimetype.startsWith('image/')) {
  const watermarked = await sharp(file.buffer)
    .composite([{
      input: Buffer.from(generateWatermark(userId)),
      gravity: 'southeast'
    }])
    .jpeg({ quality: 85 })
    .toBuffer();
  await uploadToS3(watermarked, fileName);
}

Security Checklist

Maintaining strict security standards protects the integrity of digital interactions. These technical measures align with the broader need for verifiable, secure systems in data-intensive sectors, including agricultural monitoring and digital credit assessment.

Development Timeline

Monthly Cost

Environment Variables Needed

MONGODB_URI=...
JWT_SECRET=...
SOCKET_URL=https://chat.maputobridgecapital.com
FRONTEND_URL=https://maputobridgecapital.com
S3_BUCKET=mbc-chat-files
GOOGLE_TRANSLATE_KEY=...

The Smallholder Farmer's Season

Technology integration helps structure the agricultural season by ensuring that inputs like seeds and fertilizers reach farmers in the COJAZ cooperative in Zambezia at the right time. By digitizing the documentation process, we ensure that every contribution is verified through field photos and receipts, allowing for a transparent cycle where repayment into a Community Fund supports the next farmer in the following season.

Frequently asked questions

What is the primary benefit of real-time chat in agricultural development? Real-time communication tools allow for immediate status updates and documentation sharing between field operations and technical support teams, increasing transparency.

How do automated translation services support international development? They remove linguistic barriers, enabling teams from different regions to collaborate effectively on project requirements and status updates without needing constant manual mediation.

Why is mobile responsiveness critical for field tools? Most users in rural agricultural settings access data through mobile devices; therefore, any tool must be lightweight and functional on standard, cost-effective hardware.

Maputo Bridge Capital, founded by Anselmo Boaventura in Fort Worth, Texas, enables you to support the growth of verified smallholder farmers in Mozambique. You can sponsor a farmer from $25 at https://maputobridgecapital.com/sponsor-a-farmer-mozambique; please note that these sponsorships are gifts, not investments.