Building a Real-Time Chat Application with SingleStoreDB and MERN Stack

Hey everyone, I wanted to share a project I recently worked on, which uses SingleStoreDB and the MERN stack to create a real-time chat application. In this post, I'll walk you through the steps I took to build this app and provide some code snippets to help you get started.

What is SingleStoreDB

SingleStoreDB is a distributed relational database management system that is designed for high performance and scalability. It was formerly known as MemSQL before being renamed to SingleStore in 2020.

SingleStoreDB is designed to handle both transactional and analytical workloads, and is particularly well-suited for real-time data processing and analytics. It supports standard SQL queries, as well as distributed SQL queries across multiple nodes.

Some of the key features of SingleStoreDB include in-memory processing, the ability to scale horizontally across multiple nodes, automatic sharding and partitioning, and the ability to perform analytics on real-time data. It also supports a variety of data types, including structured, semi-structured, and unstructured data.

SingleStoreDB is used by a variety of organizations across industries such as finance, healthcare, and e-commerce to process large volumes of data in real time.

SingleStoreDB supports both SQL and NoSQL workloads, and provides support for ACID transactions. It also offers features such as columnstore indexing, data compression, and data encryption.

Some use cases for SingleStoreDB include real-time analytics, fraud detection, IoT applications, and ad tech platforms. SingleStoreDB is used by companies such as Comcast, Uber, and Akamai.

Here's an example code snippet from the Chat component:

First, we'll set up the SingleStoreDB cluster. We'll create a database called chat_app and a table called messages.

Sql

CREATE DATABASE chat_app
USE chat_app;


CREATE TABLE messages (
? id INT AUTO_INCREMENT PRIMARY KEY,
? user VARCHAR(255),
? message VARCHAR(255),
? created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

;        

Next, we'll create the backend API using Node.js and Express.js. We'll use the singlestore NPM package to connect to the SingleStoreDB cluster.

const express = require('express');
const mysql = require('singlestore');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);


const db = mysql.createPool({
? host: 'localhost',
? port: 3306,
? user: 'root',
? password: 'password',
? database: 'chat_app'
});


app.use(express.json());


app.get('/messages', (req, res) => {
? db.query('SELECT * FROM messages ORDER BY created_at DESC', (err, result) => {
? ? if (err) {
? ? ? res.status(500).send(err);
? ? } else {
? ? ? res.send(result);
? ? }
? });
});


app.post('/messages', (req, res) => {
? const { user, message } = req.body;


? db.query('INSERT INTO messages (user, message) VALUES (?, ?)', [user, message], (err, result) => {
? ? if (err) {
? ? ? res.status(500).send(err);
? ? } else {
? ? ? const newMessage = {
? ? ? ? id: result.insertId,
? ? ? ? user: user,
? ? ? ? message: message,
? ? ? ? created_at: new Date().toISOString()
? ? ? };
? ? ? io.emit('new message', newMessage);
? ? ? res.send(newMessage);
? ? }
? });
});


io.on('connection', (socket) => {
? console.log('A user connected.');


? socket.on('disconnect', () => {
? ? console.log('A user disconnected.');
? });


? socket.on('new message', (data) => {
? ? const { user, message } = data;
? ? db.query('INSERT INTO messages (user, message) VALUES (?, ?)', [user, message], (err, result) => {
? ? ? if (err) {
? ? ? ? console.log(err);
? ? ? } else {
? ? ? ? const newMessage = {
? ? ? ? ? id: result.insertId,
? ? ? ? ? user: user,
? ? ? ? ? message: message,
? ? ? ? ? created_at: new Date().toISOString()
? ? ? ? };
? ? ? ? io.emit('new message', newMessage);
? ? ? }
? ? });
? });
});


http.listen(3001, () => {
? console.log('Server is running on port 3001');
});

        

This backend API provides two endpoints - one to get all messages and one to create a new message. When a new message is created, it is inserted into the SingleStoreDB table and then emitted to all connected clients using Socket.IO.

Additionally, the server-side code has been updated to use Socket.IO to listen for new messages and emit them to all connected clients. When a new message is received, it is inserted into the SingleStoreDB table and then emitted to all connected clients using the 'new message' event.

Next, we'll create the frontend using React.js. We'll use the socket.io-client NPM package to handle real-time updates.

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


const socket = io('https://localhost:3001');


function App() {
? const [messages, setMessages] = useState([]);
? const [user, setUser] = useState('');
? const [message, setMessage] = useState('');


? useEffect(() => {
? ? socket.on('new message', (data) => {
? ? ? setMessages([...messages, data]);
? ? });
? }, [messages]);


? const handleSubmit = (event) => {
? ? event.preventDefault();


? ? socket.emit('new message', { user, message });


? ? setUser('');
? ? setMessage('');
? };


? return (
? ? <div>
? ? ? <h1>Real-Time Chat App</h1>


? ? ? <ul>
? ? ? ? {messages.map((message) => (
? ? ? ? ? <li key={message.id}>
? ? ? ? ? ? {message.user}: {message.message}
? ? ? ? ? </li>
? ? ? ? ))}
? ? ? </ul>


? ? ? <form onSubmit={handleSubmit}>
? ? ? ? <input type="text" value={user} placeholder="Name" onChange={(event) => setUser(event.target.value)} />
? ? ? ? <input type="text" value={message} placeholder="Message" onChange={(event) => setMessage(event.target.value)} />
? ? ? ? <button type="submit">Send</button>
? ? ? </form>
? ? </div>
? );
}


export default App;

        

This code creates a functional component called App which displays the chat interface and handles sending and receiving messages. The useState hook is used to create state variables for the messages, the user's name, and the user's message. The useEffect hook is used to listen for new messages from the socket.io server and update the state when a new message is received.

The handleSubmit function is called when the user submits a new message. It emits a new message event to the socket.io server with the user's name and message, then clears the input fields.

In the return statement, the ul element is used to display a list of all the messages received from the server. The form element allows the user to input their name and message and submit a new message. When the form is submitted, the handleSubmit function is called.

That's a brief overview of how to set up SingleStoreDB for this MERN stack example. Of course, there are many more things you could do with SingleStoreDB, such as creating indexes, optimizing queries, and scaling the database for large applications. But hopefully, this gives you an idea of how to get started.