使用 Headless CMS 实现实时聊天功能-JavaScript中文网-JavaScript教程资源分享门户

随着互联网发展，实时通讯越来越成为一个必不可少的功能，无论是社交网络，还是在线客服，甚至是在线教育等业务应用场景都需要有实时聊天的功能。前端开发者要实现实时聊天功能，需要兼顾前后端的开发和运维。但是，Headless CMS 的出现，将前后端开发中的某些部分解耦合，让前端开发者更专注于实现聊天页面的开发。

什么是 Headless CMS

Headless CMS 是一种与传统 CMS 不同的内容管理系统，它把内容管理与内容呈现分离。而传统 CMS 只是提供了一个 UI 界面来进行内容编辑，同时也兼具对用户的呈现功能。举例来说，传统 CMS 的功能就好比 Word 文档编辑器，它可以编辑文档，也可以看到文档，而 Headless CMS 就像是只提供文档编辑器，不负责文档呈现的软件。

Headless CMS 提供了 REST 和 GraphQL 接口，让开发者能够根据自己的需要通过 API 获取和管理数据。开发者可以使用自己熟悉的编程语言和框架来实现界面的呈现，而不必使用 CMS 提供的模板。

实现实时聊天的架构

实现实时聊天功能需要前后端协作配合，但 Headless CMS 的出现把后端开发部分替换成了 CMS 系统，简化了后端部分的开发。本文介绍一种实现实时聊天的架构，使用 Prismic 作为 Headless CMS，借助 Socket.io 实现实时通讯功能。

下面是实现实时聊天功能的技术栈：

前端使用 ReactJS
Prismic 作为 Headless CMS
Socket.io 用于实现实时通讯
Express 用于后端开发
MongoDB 用于数据存储

实现过程

环境设置

安装依赖

npm i express mongoose socket.io

创建数据库

使用 MongoDB 创建一个 chat 数据库，创建 messages 集合存储聊天记录。

Prismic 设置

登录 Prismic 并创建一个 custom type，命名为 chat。
创建两个字段：username 和 message，以及一个时间字段 lastUpdated。

后端接口实现

server.js

// javascriptcn.com 代码示例
const mongoose = require('mongoose');
const app = require('express')();

// 链接MongoDB
mongoose.connect('mongodb://localhost:27017/chat', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// 定义聊天消息的Schema
const messageSchema = new mongoose.Schema({
  username: String,
  message: String,
  lastUpdated: { type: Date, default: Date.now },
});

// 创建聊天消息模型
const Message = mongoose.model('Message', messageSchema);

// 监听端口
const server = app.listen(5000, () => {
  console.log('listening on *:5000');
});

// 将 socket.io 附加到服务器上
const io = require('socket.io')(server);

// 当一个客户端连接时
io.on('connection', (socket) => {
  console.log('a user connected');

  // 查询最新的10条聊天记录，并发送给客户端
  Message.find()
    .sort({ lastUpdated: -1 })
    .limit(10)
    .then((messages) => {
      socket.emit('load messages', messages.reverse());
    });

  // 监听从客户端发来的聊天消息
  socket.on('chat message', (message) => {
    console.log('message: ' + message);

    // 将聊天记录插入到数据库中
    new Message({
      username: message.username,
      message: message.message,
    }).save();

    // 将消息广播给所有其他客户端
    socket.broadcast.emit('chat message', message);
  });

  // 当客户端断开连接时
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

前端页面实现

App.js

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';
import SocketIOClient from 'socket.io-client';
import './App.css';

// 初始化socket对象
const socket = SocketIOClient('http://localhost:5000');

function App() {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');
  const [username, setUsername] = useState('');

  useEffect(() => {
    // 设置默认的用户名
    setUsername(`user-${Math.floor(Math.random() * 1000)}`);

    // 监听从服务器发来的消息
    socket.on('chat message', (msg) => {
      setMessages([...messages, msg]);
    });

    // 获取最新的10条聊天记录
    socket.on('load messages', (msgs) => {
      setMessages(msgs);
    });

    // 在页面卸载时关闭socket连接，防止内存泄漏
    return () => {
      socket.disconnect();
    };
  }, [messages]);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (message && username) {
      // 发送聊天消息给服务器
      socket.emit('chat message', { username, message });

      // 清空输入框
      setMessage('');
    }
  };

  return (
    <div className="App">
      <h1>实时聊天</h1>

      <div className="chat-area">
        <div className="chat-messages">
          {messages.map((msg, index) => (
            <div className="chat-message" key={index}>
              <div className="chat-message-username">{msg.username}:</div>
              <div className="chat-message-content">{msg.message}</div>
            </div>
          ))}
        </div>

        <form className="chat-form" onSubmit={handleSubmit}>
          <input
            className="chat-input"
            type="text"
            placeholder="输入消息"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            autoFocus
          />

          <button type="submit">发送</button>
        </form>
      </div>
    </div>
  );
}

export default App;

总结

使用 Headless CMS 和 Socket.io 可以快速地实现基于实时通讯的聊天功能，提供了可定制化以及可扩展化的解决方案。在实际应用中，可以选择适合自己的 Headless CMS，并根据需要选择其它实时通讯工具，如 Websockets 或者 Firebase Realtime Database 等等。

因此，作为前端开发者，了解 Headless CMS 以及实时通讯技术将成为一项有价值的技能，也有助于提升自己的开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6538f2ac7d4982a6eb221191