为 Element Matrix 添加贴纸

为 Element Matrix 添加贴纸

  • 发布于 2023-05-08
  • 更新于 2024-10-11

「跟半年前的自己斗智斗勇」 #

对于不想自己部署的用户，可以直接阅读 #在客户端启用，将 url 替换为已托管的表情仓库。

效果图

托管项目 #

关于动图的提醒: 截至目前，原项目不支持原生的 gif，如果想要使用动图，请参考这个 issue，并合并 Oha-you 提供的 commit。

贴纸托管于 GitHub Pages,使用的项目是 maunium/stickerpicker

fork 一份后克隆到本地

git clone git@github.com:Hanekihyouka/stickerpicker.git
cd stickerpicker
## 因为我使用 arch linux ，所以在这里配置虚拟环境。
python3 -m venv .venv
source .venv/bin/activate
python3 -m pip install -r requirements.txt
## 如果不配置虚拟环境，则不需要上面这三行。
pip install .

等待依赖安装完毕。新建目录 100oj-default，将要添加的贴纸文件拷贝到该目录。

mkdir 100oj-default
cp /path/to/emotes 100oj-default

这里添加了来自 100% OrangeJuice 的 759 个默认的表情。

然后制作包:

sticker-pack 100oj-default --add-to-index web/packs
## 这一步会要求输入 matrix 服务器地址
## 和账户的 token
Homeserver URL: https://matrix.100oj.com
Access token: __

–add-to-index 选项用于将生成好包索引自动链接到前端。

对于 Element Matrix，Access token 的查看方式是：打开 [Settings]/[All settings]/[Help & About] 在最底端查看。

制作完成后将仓库内容其部署到 GitHub Pages 上去。

## 推仓库
git add web/packs/
git commit -m "add: 100oj-default emotes"
git push

在仓库的 [Setting] 界面找到 [GitHub Pages] 选择对应的分支和根目录。

部署完成后可以在 root/web 看到表情的浏览页面。

部署的内容到此结束，接下来是对接 Element Matrix 客户端。

在客户端启用 #

打开 Element Matrix，在任意房间输入命令 /devtools 后在面版选择 explore account data，事件类型选择 m.widgets，编辑事件：

如果没有 m.widgets 的选项，则直接新建事件，然后在事件类型里填上 m.widgets。

只修改其中的 url 项，将其改成对应的 GitHub Pages 链接。 对于我，是 https://hanekihyouka.github.io/stickerpicker/web/?theme=$theme

修改完成后如下

{
  "10d09903-9314-4e4b-9f36-f3d0fefd8100": {
    "content": {
      "type": "m.stickerpicker",
      "url": "https://hanekihyouka.github.io/stickerpicker/web/?theme=$theme",
      "data": {}
    },
    "sender": "@haneki:100oj.com",
    "state_key": "10d09903-9314-4e4b-9f36-f3d0fefd8100",
    "type": "m.widget",
    "id": "10d09903-9314-4e4b-9f36-f3d0fefd8100"
  }
}

这里的 uuid:10d09903-9314-4e4b-9f36-f3d0fefd8100 是生成的，仅用于识别，可以随意修改。

点击 send 发送该事件。

到此，表情就添加好，可以直接在客户端使用贴纸了。

踩坑 #

为 Matrix-Synapse 添加插件用到了 Federation，Federation Test

官方教程文档给出的，对于 Synapse 的 Apache 反向代理逻辑如下：

Matrix-Synapse 运行于 Host 服务器上，其中域名 domain.com 指向 Host。

默认的配置 #

Synapse 的 client 接口和 federation 接口都在本地使用 Host:8008 端口。

这一点在官方的默认配置文件中可以看出

listeners:
  - port: 8008
    tls: false
    type: http
    x_forwarded: true
    bind_addresses: ['::1', '127.0.0.1']
    resources:
      - names: [client,federation]
        compress: true

Apache 逻辑:

matrix.domain.com:443 -> Host:8008
domain.com:8448 -> Host:8008

羽希的配置 #

实际上大部分 Matrix 服务器都将 client 和 federation 分别部署在本地的不同端口上。

羽希的配置如下

listeners:
  - port: 8008
    tls: false
    type: http
    x_forwarded: true
    bind_addresses: ['::1', '127.0.0.1']
    resources:
      - names: [client]
        compress: true
  - port: 8449
    tls: false
    type: http
    x_forwarded: true
    bind_addresses: ['::1', '127.0.0.1']
    resources:
      - names: [federation]
        compress: false

Apache 逻辑:

matrix.domain.com:443 -> Host:8008
domain.com:8448 -> Host:8449