随着互联网发展，实时通讯越来越成为一个必不可少的功能，无论是社交网络，还是在线客服，甚至是在线教育等业务应用场景都需要有实时聊天的功能。前端开发者要实现实时聊天功能，需要兼顾前后端的开发和运维。但是，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
-- -------------------- ---- -------
----- -------- - --------------------
----- --- - ---------------------
-- ---------
-------------------------------------------------- -
---------------- -----
------------------- -----
---
-- -------------
----- ------------- - --- -----------------
--------- -------
-------- -------
------------ - ----- ----- -------- -------- --
---
-- --------
----- ------- - ------------------------- ---------------
-- ----
----- ------ - ---------------- -- -- -
---------------------- -- ---------
---
-- - --------- -------
----- -- - -----------------------------
-- ---------
------------------- -------- -- -
-------------- ---- ------------
-- --------------------
--------------
------- ------------ -- --
----------
---------------- -- -
----------------- ---------- --------------------
---
-- -------------
--------------- --------- --------- -- -
--------------------- - - ---------
-- ------------
--- ---------
--------- -----------------
-------- ----------------
----------
-- -------------
--------------------------- --------- ---------
---
-- ---------
----------------------- -- -- -
----------------- ---------------
---
---前端页面实现
App.js
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ -------------- ---- -------------------
------ ------------
-- -----------
----- ------ - ----------------------------------------
-------- ----- -
----- ---------- ------------ - -------------
----- --------- ----------- - -------------
----- ---------- ------------ - -------------
------------ -- -
-- --------
-------------------------------------------- - ---------
-- -----------
--------------- --------- ----- -- -
------------------------- ------
---
-- ------------
--------------- ---------- ------ -- -
------------------
---
-- -----------------------
------ -- -- -
--------------------
--
-- ------------
----- ------------ - --- -- -
-------------------
-- -------- -- --------- -
-- ----------
----------------- --------- - --------- ------- ---
-- -----
---------------
-
--
------ -
---- ----------------
-------------
---- ----------------------
---- --------------------------
------------------- ------ -- -
---- ------------------------ ------------
---- -------------------------------------------------------
---- ----------------------------------------------------
------
---
------
----- --------------------- ------------------------
------
----------------------
-----------
------------------
---------------
------------- -- ---------------------------
---------
--
------- -------------------------
-------
------
------
--
-
------ ------- ----总结
使用 Headless CMS 和 Socket.io 可以快速地实现基于实时通讯的聊天功能，提供了可定制化以及可扩展化的解决方案。在实际应用中，可以选择适合自己的 Headless CMS，并根据需要选择其它实时通讯工具，如 Websockets 或者 Firebase Realtime Database 等等。
因此，作为前端开发者，了解 Headless CMS 以及实时通讯技术将成为一项有价值的技能，也有助于提升自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6538f2ac7d4982a6eb221191