Set Up HarperDB:
Create a HarperDB instance (cloud or local).
Create a schema (e.g., chat_app) and a table (e.g., messages).
Backend (Node.js):
Initialize a Node.js project: npm init -y.
Install dependencies: npm install express socket.io harperdb.
Set up an Express server with Socket.IO for real-time communication.
Use HarperDB SDK to store and fetch messages.
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
const harperdb = require("harperdb");
const app = express();
const server = http.createServer(app);
const io = new Server(server);
const db = harperdb({
host: "your-harperdb-url",
username: "your-username",
password: "your-password",
});
io.on("connection", (socket) => {
console.log("A user connected");
socket.on("sendMessage", async (message) => {
await db.insert({
table: "messages",
records: [message],
});
io.emit("receiveMessage", message);
});
socket.on("disconnect", () => {
console.log("User disconnected");
});
});
server.listen(5000, () => console.log("Server running on port 5000"));
Frontend (React):
Create a React app: npx create-react-app chat-app.
Install Socket.IO client: npm install socket.io-client.
Connect to the backend and handle real-time messaging.
import React, { useEffect, useState } from "react";
import io from "socket.io-client";
const socket = io("http://localhost:5000");
function App() {
const [message, setMessage] = useState("");
const [messages, setMessages] = useState([]);
useEffect(() => {
socket.on("receiveMessage", (message) => {
setMessages((prev) => [...prev, message]);
});
}, []);
const sendMessage = () => {
socket.emit("sendMessage", { text: message, user: "User" });
setMessage("");
};
return (
<div>
<div>
{messages.map((msg, i) => (
<div key={i}>{msg.user}: {msg.text}</div>
))}
</div>
<input
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendMessage}>Send</button>
</div>
);
}
export default App;
Run the App:
Start the backend: node server.js.
Start the frontend: npm start.
