Demo_Websocket 📱

An Android messaging application that connects to the EchoWave WebSocket server for real-time chat communication.

📋 Overview

Demo_Websocket is the Android client companion for the EchoWave server. It provides a native Android interface for sending and receiving real-time messages through WebSocket connections.

✨ Features

• Real-time Messaging: Instant message delivery via Socket.IO WebSocket
• Local Database: SQLite Room database for offline message storage
• Auto Device Registration: Automatic device ID generation and persistence
• Message History: Load and display chat history from server
• Pagination: Load older messages by scrolling to the top
• Modern UI: Material Design with RecyclerView
• MVVM Architecture: ViewModel and LiveData for reactive UI
• Automatic Reconnection: Handles network interruptions gracefully

🏗️ Architecture

┌─────────────────────────┐
│    MainActivity         │
│  (UI Layer)             │
└───────────┬─────────────┘
            │
┌───────────▼─────────────┐
│   ChatViewModel         │
│  (ViewModel Layer)      │
└───────────┬─────────────┘
            │
┌───────────▼─────────────┐
│   Room Database         │
│  (Data Layer)           │
└─────────────────────────┘
            │
┌───────────▼─────────────┐
│  WebSocketManager       │
│  (Network Layer)        │
└───────────┬─────────────┘
            │
            ▼
    EchoWave Server

📦 Prerequisites

• Android Studio (Arctic Fox or higher)
• Min SDK: 21 (Android 5.0 Lollipop)
• Target SDK: 34
• Java: 8 or higher
• EchoWave Server: Must be running (Setup Guide)

🚀 Installation

1. Clone or open the project in Android Studio

   cd C:\Users\user\AndroidStudioProjects\Demo_Websocket

2. Configure Server URL

   Open WebSocketManager.java and update the server URL:

   private static final String SERVER_URL = "http://YOUR_SERVER_IP:3000";

   • For localhost on physical device: Use your computer's IP address
   • For Android Emulator: Use http://10.0.2.2:3000
   • For production: Use your server's domain (e.g., https://echowave.example.com)

3. Sync Gradle

   • Click "Sync Now" in Android Studio when prompted
   • Or go to File > Sync Project with Gradle Files

4. Build and Run

   • Connect an Android device or start an emulator
   • Click the "Run" button (▶) or press Shift + F10

🛠️ Technologies

Core Libraries

• Socket.IO Android Client v2.1.0 - WebSocket communication
• Room Database v2.6.1 - Local SQLite storage
• Gson v2.10.1 - JSON parsing

Android Components

• RecyclerView - Message list display
• ViewModel - UI state management
• LiveData - Reactive data observation
• Material Design - UI components

📁 Project Structure

app/src/main/java/com/presentation/demo/
├── MainActivity.java              # Main activity
├── adapter/
│   └── MessageAdapter.java       # RecyclerView adapter
├── database/
│   ├── AppDatabase.java          # Room database instance
│   ├── Message.java              # Message entity
│   ├── MessageDao.java           # Message data access
│   ├── DeviceInfo.java           # Device entity
│   └── DeviceInfoDao.java        # Device data access
├── viewmodel/
│   └── ChatViewModel.java        # ViewModel for chat
└── websocket/
    └── WebSocketManager.java     # Socket.IO manager

app/src/main/res/
├── layout/
│   ├── activity_main.xml         # Main layout
│   ├── item_message_sent.xml    # Sent message item
│   └── item_message_received.xml # Received message item
└── drawable/
    ├── bg_message_sent.xml       # Sent message background
    └── bg_message_received.xml   # Received message background

🔌 Connecting to EchoWave Server

Local Development

1. Start EchoWave Server

   cd C:\Projects\Node\EchoWave
   npm start

2. Find Your Computer's IP

   # Windows
   ipconfig
   # Look for IPv4 Address

3. Update SERVER_URL in WebSocketManager.java

   private static final String SERVER_URL = "http://192.168.1.XXX:3000";

Using Android Emulator

private static final String SERVER_URL = "http://10.0.2.2:3000";

10.0.2.2 is the special alias to your host machine's localhost from the Android emulator

📡 Socket.IO Events

Emitting Events (Client → Server)

register

socket.emit("register", deviceData, callback);

send_message

socket.emit("send_message", messageData, callback);

load_more_messages

socket.emit("load_more_messages", paginationData, callback);

Listening Events (Server → Client)

new_message - Receive new messages

socket.on("new_message", onNewMessage);

user_connected - User joined notification

socket.on("user_connected", onUserConnected);

user_disconnected - User left notification

socket.on("user_disconnected", onUserDisconnected);

🗄️ Database Schema

Messages Table

CREATE TABLE messages (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    serverId INTEGER,
    senderDeviceId TEXT,
    senderName TEXT,
    receiverDeviceId TEXT,
    message TEXT,
    timestamp INTEGER,
    isBroadcast INTEGER,
    isSent INTEGER
);

Device Info Table

CREATE TABLE device_info (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    deviceId TEXT UNIQUE,
    deviceName TEXT,
    createdAt INTEGER
);

🎯 Key Features Explained

1. Automatic Device Registration

On first launch, the app:

• Generates a unique device ID (via EchoWave server using Faker)
• Saves it to Room database
• Reuses the same ID on subsequent launches

2. Message Pagination

• Initial load: 50 latest messages
• Scroll to top: Loads 50 older messages
• Prevents duplicates using server message ID

3. Offline Support

• Messages are stored in local SQLite database
• Chat history persists across app restarts
• Syncs with server on reconnection

4. Real-time Updates

• LiveData observes database changes
• UI updates automatically when new messages arrive
• No manual refresh needed

🧪 Testing

Manual Testing

1. Single Device Test

   • Open the app
   • Send a message
   • Verify it appears in the list

2. Multiple Devices Test

   • Install app on 2+ devices
   • Send messages from each device
   • Verify all devices receive messages in real-time

3. Web + Android Test

   • Open web UI: http://localhost:3000/chat
   • Open Android app
   • Send messages from both
   • Verify cross-platform messaging works

Connection Testing

// Check connection status
if (webSocketManager.isConnected()) {
    Log.d("WebSocket", "Connected to server");
}

🚨 Troubleshooting

"Cannot connect to server"

Problem: App shows "Disconnected from server"

Solutions:

• ✅ Verify EchoWave server is running
• ✅ Check SERVER_URL in WebSocketManager.java
• ✅ Ensure phone and computer are on the same network
• ✅ Disable firewall or allow port 3000
• ✅ For emulator, use 10.0.2.2 instead of localhost

Duplicate Messages

Problem: Same message appears twice

Solution: Already fixed! The app now checks for existing messages before inserting.

Messages Not Loading

Problem: Chat history doesn't load

Solutions:

• ✅ Check Logcat for errors
• ✅ Verify database is created (device_info and messages tables)
• ✅ Ensure server has messages in MySQL database

Build Errors

Problem: Gradle sync fails

Solutions:

• ✅ Update Android Gradle Plugin
• ✅ Sync project with Gradle files
• ✅ Invalidate caches: File > Invalidate Caches / Restart
• ✅ Check internet connection for dependencies

📱 Permissions

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

🔐 Security Notes

• Device IDs are stored locally (not secure for production)
• No authentication implemented (add JWT tokens for production)
• Messages are sent in plain text (use HTTPS/WSS in production)
• No encryption on local database (use SQLCipher for sensitive data)

🚀 Future Enhancements

• User authentication with username/password
• Private messaging (one-to-one chat)
• Image/file sharing
• Push notifications
• Message read receipts
• Typing indicators
• User profiles with avatars
• Message search functionality
• Dark mode support

📖 Related Documentation

• EchoWave Server: ../../../Projects/Node/EchoWave/README.md
• Socket.IO Android: https://socket.io/docs/v4/client-api/
• Room Database: https://developer.android.com/training/data-storage/room

📝 License

This project is licensed under the MIT License.

👥 Contributing

This is a demo project. For production use, please implement proper authentication, encryption, and security measures.

---

Built with ❤️ for Android | Powered by EchoWave Server