ChatRoom.js-在文章流中分享你的聊天记录

文轩夜话

ChatRoom.js-在文章流中分享你的聊天记录 | 文轩夜话

awaae001 · 2025-02-22 · via 文轩夜话

现在，使用实时聊天工具成为了我们交流的第一选择（似乎也变成了唯一的选择?）人们之间的交流汇聚在指尖的方寸屏幕之间。而现在，愈来愈多的聊天记录也成为了证据作为法律判案的基础。我们渐渐离不开实时聊天软件， 也似乎离不开在屏幕上出现又消失的聊天记录它们或许是对我们做事目的的很好补充，也会是一个很好的借口。

既然我们无法阻止暴风雨的来袭，那么就让它们来的更更加猛烈吧！

chatroom

初见

让我们先看看它的样子，也就是出现在封面图片的那个实例：

您的浏览器版本过低，请考虑更新您的浏览器

非常经典的 chatroom.init 起手，再利用前面导入的的CSS和js打配合，最后在chatroom.init里面填写几个简单的配置，这个的小小的聊天记录解析器就可以正常的工作了，它无需hexo外挂标签插件，只要浏览器支持js就可以运行！

下面是我刚刚使用的实例，是不是非常简单有手就行！！！

<div id="chat"></div>
<script>
    chatroom.init ({
        jsonFilePath: "https://cdata.neosora.cc/chatRoom/chatRoom/test-1.json", 
        chatroomName: "chat",
        MyAvatar: "https://image.neosora.cc/?/images/2024/10/01/8tB9C0gYz5/eb0c7477f97f6d64f86c3cd3b4a1e7a5.jpg",
        title: "Chatroom.js", 
    })
</script>

初始化

这个组件存在 Github仓库，你可以非常简单的从仓库看到我的屎山，也可以非常方便的从仓库中使用CDN来导入chatroom.js前端聊天记录渲染组件。首先，让我们初始化一些必须的资源.它们不需要一个特殊的环境

包括：CSS样式表、chatroom.js前端聊天记录渲染组件、foo图标库。在不包含图标库的情况下仅占用13Kb的空间（未压缩）

<div>
    <script src="https://cdn.smartcis.cn/gh/awaae001/htmls@main/ChatRoom/main.js"></script>
    <link rel="stylesheet" href="https://cdn.smartcis.cn/gh/awaae001/htmls@main/ChatRoom/main.css">

    <!--foo图标库-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" integrity="sha512-ZfKn7az0YmtPUojZnRXO4CUdt3pn+ogBAyGbqGplrCIR5B/tQwPGtF2q29t+zQj6mC/20w4sSl0cF5F3r0HKSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</div>

你也可以下载文件并在您自己的服务器上面部署这些资源，其中，我们为CSS额外准备了三种不同的配色文件，分别是：苍山绿、玄素黑、天青蓝。你可以非常轻松的在这里找到它们。

配置

我们完成的导入组件，接下来我们看看要如何轻松简单的配置你要分享的聊天记录？

<div id="chat"></div>
<script>
    chatroom.init ({
        jsonFilePath: "https://cdata.neosora.cc/chatRoom/chatRoom/test-1.json",  
        chatroomName: "chat",
        MyAvatar: "https://image.neosora.cc/?/images/2024/10/01/8tB9C0gYz5/eb0c7477f97f6d64f86c3cd3b4a1e7a5.jpg",  
        title: "Chatroom.js", 
        hideAvatar: false, 
    })
</script>

最开始是 <div id="chat"></div> 这里是挂载点，必须持有唯一的id。它于与下面的 init 函数中的 chatroomName 一致，作为这个实例的挂载点存在。也是同时存在多个分享实例存在的基础。

借来看看主要的配置项目

jsonFilePath：JSON 文件的路径，必须提供
- 必须是可用且合规的 JSON 文件路径
chatroomName：聊天室的容器 ID，必须提供
- 为你的聊天记录添加一个绑定点，必须是唯一的id且为div
MyAvatar：我的头像，可选
- 提供一个可用的头像链接，必须为头像链接，此处不支持QQ号码。若是没有填写，则会从头像库中随机选取头像
title：聊天室标题，可选，默认为 群聊的聊天记录
hideAvatar：是否隐藏我的头像，可选，默认为 false
- 开启后会在全局隐藏所有用户头像
- 适合在单聊记录发送的时候开启，可以有效的增加阅读体验

不太懂？让我们看一张图片来了解一下这些配置项是怎么工作的

chatroom使用实例

json文件规范

作为几个需要挂载的聊天记录分享组件，你需要一个JSON文件来存储这些聊天记录。所以说： 前面的一切都是为了后面的文件而安装的框架。 事实上确实如此，json的数据文件的大小会超过其他所有文件的大小。它承载的是这个框架的意义，也就是真正的数据（聊天记录）

[
  {
    "name": "花露水|liushen.top",
    "content": "这是一个 聊天记录分享器，它可以解析聊天记录并生成HTML部分插入文章流",
    "avatar": "3162475700"    
  },
  {
    "name": "me",
    "content": "是的，它还有许多原版没有的功能",
    "avatar": "me"
  },
  {
    "name": "Me",
    "content": "比如：我要提醒某人的@功能： [:call::@花露水::]",
    "avatar": 3271436144
  },
  {
    "name": "花露水|liushen.top",
    "content": "用外挂标签版本修改而来，移除了外挂标签的前置组件，目前只需要你的浏览器可以运行js代码就可以使用<br>改版前在这里：[:a::https://gist.liushen.fun/LiuShen/Hexo-butterfly-tag-chat::]",
    "avatar": "3162475700"
  },
  {
    "name": "me",
    "content": "还支持比如：嵌套的聊天记录",
    "avatar": "123456"
  },
  {
    "name": "me",
    "content": "[:chat:(聊天记录)::https://cdata.neosora.cc/chatRoom/howToAsk/chatroom.json::]",
    "avatar": null
  },
  {
    "name": "Sci_qud",
    "content": "[:image::https://pic.awaae001.top/bg.webp::]",
    "avatar": "3341659982"
  },
  {
      "name": "Sci_qud",
      "content": "还支持分享你喜欢的图片",
      "avatar": "3341659982"
    },
  {
    "name": "me",
    "content": "还有选中的回复功能，虽然这引用的框有点太丑了[:rep:[我]:比如：我要提醒某人的@功能： @花露水::]",
    "avatar": null
  },
  {
    "name": "Bob",
    "content": "[:chat:(聊天记录)::https://cdata.neosora.cc/chatRoom/howToAsk/chatroom.json::]",
    "avatar": "123456"
  },
  {
    "name": "sys",
    "content": "BOb 因为违反社区规范被封禁",
    "avatar": null
  }
]

如你所见，这是一个标准的chatroom.js聊天记录的JSON文件。它是由多个数组组成，每个数组都是一个聊天记录。我们的数据就写在每一个数组里面，让我们仔细看看有什么规范是需要我们遵守的：

基础位置

name：聊天记录的发送者名称，必须提供
- 有两个固定占位符： sys 和 me，即系统消息和我发送的消息。你可以使用它来标记系统消息和本人发送者
- 此外，此处没有其他限制，但要确保使用特殊字符时的转义符的正常使用
content：聊天记录的内容，必须提供
- 支持html标签
avatar：聊天记录的发送者头像，可选
- 目前支持3种的头像来源：
  - 直接的URL链接导入
  - QQ号码导入
  - 头像库中随机选取
- 此条目在 me 下面是不起效果的，因为 me 使用的是系统的全局头像，目前尚未测试多个不同的全局头像之间的相互干扰

编写完成后将放入你的网站中，然后就可以使用了。

特殊语法

聊天记录支持一些特殊的语法，它们被用来添加一些特殊的功能。类似：嵌入聊天记录（对的，套娃）、引用回复、图片分享、内嵌超链接等高级功能，当初设计的目的是为了避免出现占用支付的情况。

聊天记录嵌入：
- 语法：[:chat:{{标题}}::{{内嵌JSON文件路径}}::]
- 示例：[:chat:(聊天记录)::https://cdata.neosora.cc/chatRoom/howToAsk/chatroom.json::]
- 注意事项：注意事项与init函数一致，它会将聊天记录你填写的内容作为问询参数发送到远端的聊天记录查看组件，并生成弹窗展示。默认解析器地址：https://blog.awaae001.top/Chatroom/
引用回复：
- 语法：[:rep:[{{被回复者}}]:{{回复内容}}::]
- 示例：[:rep:[我]:比如：我要提醒某人的@功能： @花露水::]
图片分享：
- 语法：[:image::{{图片链接}}::]
- 示例：[:image::https://pic.awaae001.top/bg.webp::]
超链接：
- 语法：[:a::{{超链接地址}}::{{超链接文本}}::]
- 示例：[:a::https://cdata.neosora.cc/chatRoom/howToAsk/chatroom.json::]
@某人：
- 语法：[:call::@{{被@的人}}::]
- 示例：[:call::@花露水::]

请确保所有语法符合规范，不合规的语法将会无法渲染并在你的聊天记录中直接以纯文本的形态出现，类似图片上的情况：(无法识别渲染后直接输出)

错误语法示例

内嵌聊天记录解析器

其实就是一个支持URL传入参数的独立版本，支持从URL中获取chatroom.init必须的参数，在chatroom.js中，它是这样表述的：

        content = content.replace(chatPattern, (match, title, jsonFilePath) => {
            const encodedTitle = encodeURIComponent(title);
            const encodedJsonFilePath = encodeURIComponent(jsonFilePath);
            const chatLink = `https://blog.awaae001.top/Chatroom/?jsonFilePath=${encodedJsonFilePath}&title=${encodedTitle}`;
            return `
                <div class="chatQuoteCard">
                    <div class="chatQuoteTetle">
                        <i class="fa fa-database"></i>
                        <span>转发的聊天记录</span>
                    </div>
                    <a class="chatMessage" onclick="openChatWindow('${chatLink}')">转发自：${title}</a>
                </div>
            `;
        });

比可以通过修改chatLink来自定义您的远程解析查看器，在这里下载您的查看器并确保您使用的CDN和博客框架不会截断请求参数或者私自重定向，随后，将它往你的服务器上一扔……但是没有完成，我们还需要配置远程解析器的init参数

下载文件打开编辑器

init: function () {
    const urlParams = new URLSearchParams(window.location.search);

    const containerId = "chatContainer"; 
    const jsonFilePath = urlParams.get("jsonFilePath"); 
    const myAvatar = urlParams.get("myAvatar") <span class="spoiler"> "https://blog.awaae001.top/ico.webp";
    const title = decodeURIComponent(urlParams.get("title") </span> "群聊的聊天记录");

按照文件，你需要自定义的有：containerId、myAvatar

虽然myAvatar可以从urls中获取，但是仔细注意看：我偷懒并没有处理从URL解析头像的逻辑，你可以自己追加或者是自己指定

最后，保存，选择一个喜欢的颜色主题或者自己写一个，上传

<div id="chatContainer"></div>
<script src="/js/page-js/ChatRoom.js"></script>
<link rel="stylesheet" href="/css/page-css/Chatroom.css">

就此，完成所有的基本安装

最后

支持直接云端修改json文件，无需修改原文中的hexo外挂标签无需额外安装对应的辅助插件即插即用、按需导入而且不限制使用平台以及拥有更高的扩展性以及可优化空间……

其次，非私有标签，高可迁移性，支持多种平台无缝切换……

但是，缺点也显而易见：依赖较好的网络环境，有时额外的json文件的导入会影响到页面的加载速度和页面大小，况且json文件内置的html标签有安全隐患，可能会有xss注入的危机

接下来还会有更多的移植按需导入的标签，敬请期待……

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

文轩夜话

初见

初始化

配置

json文件规范

基础位置

特殊语法

内嵌聊天记录解析器

最后