如何存储聊天消息？Node.js+Rails聊天应用AJAX存库实现

Got it, let's tackle that message loss problem! Right now, your chat messages only live in your Node.js server's memory—so when you refresh the page, they're gone for good. We'll fix this by tying your Node.js real-time setup to a Rails database, so every message gets saved permanently. Here's the step-by-step breakdown:

Step 1: Set Up Rails to Store Messages #

First, we need to create a way for Rails to save and retrieve messages via API.

1.1 Create a Message Model #

Run these commands in your Rails project to generate a model for messages:

rails generate model Message content:text user:string
rails db:migrate

I added user (for the sender's name) and content (the message text) as basic fields—adjust these if you need more data like timestamps (Rails adds created_at/updated_at automatically!).

1.2 Build an API Controller #

Create a controller to handle storing and fetching messages. Make a file at app/controllers/api/v1/messages_controller.rb with this code:

module Api
  module V1
    class MessagesController < ApplicationController
      skip_before_action :verify_authenticity_token # Skip CSRF for API requests

      # Get all historical messages (ordered by time)
      def index
        messages = Message.order(created_at: :asc)
        render json: messages
      end

      # Save a new message to the DB
      def create
        message = Message.new(message_params)
        if message.save
          render json: message, status: :created
        else
          render json: message.errors, status: :unprocessable_entity
        end
      end

      private
      def message_params
        params.require(:message).permit(:content, :user)
      end
    end
  end
end

1.3 Add API Routes #

Update your config/routes.rb to expose the API endpoints:

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :messages, only: [:index, :create]
    end
  end
end

Now you can send a POST to http://localhost:3000/api/v1/messages to save a message, and a GET to the same path to fetch all historical messages.

Step 2: Update Node.js to Save Messages to Rails #

Your Node.js server handles real-time chat, but now it needs to send every incoming message to Rails for storage first. We'll use node-fetch to make HTTP calls from Node.js to Rails.

2.1 Install Dependencies #

In your nodejs folder, install the fetch library:

npm install node-fetch

2.2 Modify Your index.js #

I'll assume you're using the ws library for WebSockets (since you mentioned socketList—if you're using a different library, adjust the WebSocket code to match your setup). Here's the updated code:

console.log("Server is starting...");
const http = require('http');
const hostname = '0.0.0.0';
const port = '8000';
const fetch = require('node-fetch');
const WebSocket = require('ws'); // Add this if you're using ws

console.log("Creating server...");
const server = http.createServer().listen(port, hostname);
console.log('chat server running on '+ hostname + ':' + port);

const wss = new WebSocket.Server({ server });
let socketList = []; // Replace with your existing socketList setup

wss.on('connection', (ws) => {
  console.log('New client connected');
  socketList.push(ws);

  ws.on('message', async (rawMessage) => {
    try {
      // Parse the incoming message (assuming it's JSON with user and content)
      const messageData = JSON.parse(rawMessage);
      
      // 1. Save the message to Rails first
      const railsResponse = await fetch('http://localhost:3000/api/v1/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message: {
            user: messageData.user,
            content: messageData.content
          }
        })
      });

      if (!railsResponse.ok) throw new Error('Failed to save message to Rails');
      const savedMessage = await railsResponse.json();

      // 2. Broadcast the saved message (with DB ID and timestamps) to all clients
      const broadcastMsg = JSON.stringify(savedMessage);
      socketList.forEach(socket => {
        if (socket.readyState === WebSocket.OPEN) {
          socket.send(broadcastMsg);
        }
      });
    } catch (err) {
      console.error('Error handling message:', err);
      ws.send(JSON.stringify({ error: 'Could not save your message' }));
    }
  });

  ws.on('close', () => {
    console.log('Client disconnected');
    socketList = socketList.filter(socket => socket !== ws);
  });
});

This code listens for incoming messages from clients, sends them to Rails to be saved, then broadcasts the saved message (with DB metadata) to all connected clients.

Step 3: Update Frontend to Load Historical Messages #

Finally, make sure your frontend loads old messages when the page refreshes, and sends messages correctly.

3.1 Load History on Page Load #

Add this to your frontend JavaScript to fetch and render historical messages when the page loads:

window.addEventListener('load', async () => {
  const messageContainer = document.getElementById('message-container');
  try {
    const response = await fetch('http://localhost:3000/api/v1/messages');
    const messages = await response.json();
    
    messages.forEach(msg => {
      const msgElement = document.createElement('div');
      msgElement.innerHTML = `<strong>${msg.user}</strong>: ${msg.content} <small>${new Date(msg.created_at).toLocaleString()}</small>`;
      messageContainer.appendChild(msgElement);
    });
  } catch (err) {
    console.error('Failed to load history:', err);
  }
});

3.2 Send Messages to Node.js #

Make sure your frontend sends messages as JSON to the Node.js WebSocket server:

function sendChatMessage(userName, messageText) {
  const ws = new WebSocket('ws://localhost:8000');
  ws.onopen = () => {
    ws.send(JSON.stringify({ user: userName, content: messageText }));
    ws.close();
  };
}

Quick Notes to Avoid Headaches #

• Run Both Servers: Make sure your Rails server (default port 3000) and Node.js server (port 8000) are running at the same time.
• CORS Issues: If your frontend is on a different port/domain, install the rack-cors gem in Rails and add this to config/initializers/cors.rb:

  Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
      origins '*' # Replace with your frontend domain in production
      resource '*', headers: :any, methods: [:get, :post]
    end
  end
  

• Socket List Adjustments: If your socketList uses a different WebSocket library (like Socket.io), tweak the connection/broadcast code to match that library's syntax.

内容的提问来源于stack exchange，提问作者Vishal Goel