聊天小工具的搭建详细配置过程

资源荟萃
1

之前没有仔细说明怎么配置，这次我会在帖子里补充详细步骤。另外，我还准备了一个demo供大家玩玩。只需要去GitHub上下载 interactive-chat-demo.html 这个文件就能直接用了（不过运行的时候可能需要魔法）。

试用方法

  • 直接点击Demo即可直接试用

使用说明

版本选择

  • 加密版本搞出来了！不过，软件的核心还是能简单就简单。也留着不加密的版本，大家看着需求自己挑吧。
  1. 不加密版本：使用 unencrypted password version 文件夹下的代码
  2. 加密版本：使用 encrypted password version 文件夹下的代码

D1 数据库配置

  1. 在 Cloudflare 面板中选择"Workers 和 Pages"
  2. 选择"D1 SQL 数据库"
  3. 创建数据库，命名为 chat-db（可自定义）
  4. 在控制台中输入并执行 chat-db.sql 文件的代码

Workers 配置

  1. 在 Cloudflare 面板中选择"Workers 和 Pages"

  2. 选择"概述"

  3. 创建 Worker，命名为 chat-worker（可自定义），并保存链接

    image
    image861×118 5.04 KB

  4. 部署 Worker

  5. 编辑代码，输入 chat-worker.js 文件内容，部署并保存预览链接

  6. 返回"Workers 和 Pages"概述

  7. 选择新创建的 Worker

  8. 依次选择：设置 → 绑定 → 添加 → D1 数据库，变量名设为 DB，选择刚创建的数据库

HTML 配置

  1. 打开 HTML 源代码
  2. 第 131 行，将 const API_URL = "<https://xxxxxxxxxxxxxxx>"; 中的链接替换为 Worker 链接（注意：链接末尾不加 /）
  3. 用浏览器直接打开 HTML 文件即可运行

在线运行

  • 只要将修改好参数的HTML文件上传到文件床，就能在线运行。这样就省去了给朋友发送客户端的麻烦，直接发送文件床链接即可。

相关链接

26 个赞
2

来了！tieba_095

1 个赞
3

感谢大佬分享，这就试试看

4

微信截图_20241007211913
微信截图_202410072119131839×963 82.9 KB

搞了两个小时终于弄清楚了tieba_087
感觉还有很多上升空间tieba_013

5

我这边CF被墙了就只能代理才能发送信息了tieba_087

6

哇，感谢大佬

7

hhh 摸索的时候最快乐了，软件暂时不改了，核心还是能简单就简单。

1 个赞
8

我用curser和GPT试试tieba_002

9

:lark_084:加油！！！

10

用worker优选
worker绑定好域名（比如w.a.com → *w.a.com/ (worker)）把w.a.com的dns记录删了，新建一个cname记录，名称为“w”，值为“cfip.cfcdn.vip”，别开小黄云！！然后刷新下等待2min左右即可

可以通过itdog验证地区连通性，经测试这个优选域名是连通性最好的(失败<=5)

应该是这样（worker绑定：i.pximg.org）

Screenshot_20241007_233759_dev.jtsalva.cloudmare
Screenshot_20241007_233759_dev.jtsalva.cloudmare1080×1920 132 KB

1 个赞
12

有空的时候，试一试

13

原本打算用佬友分享的文件床来分享试用 demo 文件，没想到还有意外收获！发现直接用文件床链接就能在浏览器里运行聊天程序。

14

:bili_017:又发现了个新bug：第一次打开页面历史聊天记录会重复加载两次。暂时不修了，先在这记录一下以后有时间再修补