Element(以前称为 Vector 和 Riot)是使用 Matrix JS SDK 构建的 Matrix Web 客户端。
Element 对不同环境提供多层支持:
支持
问题被积极分类,回归阻碍了发布
定义:
桌面操作系统上 Chrome、Firefox 和 Edge 的最新 2 个主要版本
Safari 的最后 2 个版本
桌面操作系统上最新版本的官方 Element Desktop 应用程序
桌面操作系统是指操作系统供应商积极支持并接收安全更新的桌面设备的 macOS、Windows 和 Linux 版本
尽最大努力
问题已接受,回归不会阻止发布
更广泛的 Element 产品(包括 Element Call 和 Enterprise Server Suite)仍然没有正式支持这些浏览器。
element web 项目及其贡献者应该保持客户端正常运行,并在其他同级功能(例如 Element Call)可能无法运行的情况下优雅地降级。
定义:
Firefox ESR 和 Chrome/Edge Extended Stable 的最新主要版本
社区支持
问题已接受,回归不会阻止发布
欢迎社区捐款来支持这些问题
定义:
适用于 Android、iOS 和 iPadOS 上当前稳定版 Chrome、Firefox 和 Safari 的移动网络
不支持
定义:仅影响不受支持的环境的问题已关闭
其他一切
这些级别的支持期限应持续到上述指定的版本,加上 1 个应用程序发布周期(2 周)。对于 Firefox ESR,这一点得到了进一步扩展,以使其登陆 Debian Stable。
要在 Android 或 iOS 设备上访问 Element,我们目前推荐本机应用 element-android 和 element-ios。
测试 Element 最简单的方法是使用 https://app.element.io 上的托管副本。对于那些喜欢危险生活的人来说, develop
分支会持续部署到 https://develop.element.io。
要托管您自己的 Element 实例,请参阅安装 Element Web。
要将 Element 安装为桌面应用程序,请参阅下面的作为桌面应用程序运行。
我们不建议从与 Matrix 家庭服务器相同的域名运行 Element。原因是,如果有人导致 Element 从 Matrix API 加载和呈现恶意用户生成的内容,然后由于共享相同的域。
我们已经采取了一些粗略的缓解措施来尝试防止这种情况,但一开始就这样做仍然不是一个好的做法。有关更多详细信息,请参阅#1977。
除非您有特殊要求,否则您需要在托管 Element Web 时将以下内容添加到 Web 服务器配置中:
X-Frame-Options: SAMEORIGIN
标头,用于防止 Element Web 被框架并防止点击劫持。
将frame-ancestors 'self'
指令添加到Content-Security-Policy
标头中,作为X-Frame-Options
的现代替代品(尽管两者都应该包含在内,因为并非所有浏览器都支持它,请参阅此)。
X-Content-Type-Options: nosniff
标头,用于禁用 MIME 嗅探。
X-XSS-Protection: 1; mode=block;
标头,用于旧版浏览器中的基本 XSS 保护。
如果您使用 nginx,这将类似于以下内容:
add_header X-Frame-Options SAMEORIGIN; add_header X-Content-Type-Options nosniff; add_header X-XSS-Protection "1; mode=block"; add_header Content-Security-Policy "frame-ancestors 'self'";
对于 Apache,配置如下所示:
Header set X-Frame-Options SAMEORIGIN Header set X-Content-Type-Options nosniff Header set X-XSS-Protection "1; mode=block" Header set Content-Security-Policy "frame-ancestors 'self'"
注意:如果您已经在其他地方设置了Content-Security-Policy
标头,则应该修改它以包含frame-ancestors
指令,而不是添加最后一行。
Element 是一个使用现代 ES6 构建的模块化 Web 应用程序,并使用 Node.js 构建系统。确保您安装了最新的 LTS 版本的 Node.js。
建议使用yarn
而不是npm
。如果您还没有 Yarn 安装指南,请参阅它。
安装或更新node.js
,以便您的node
至少是当前推荐的LTS。
如果尚未存在,请安装yarn
。
克隆存储库: git clone https://github.com/element-hq/element-web.git
。
切换到 element-web 目录: cd element-web
。
安装先决条件: yarn install
。
如果您使用的是develop
分支,那么建议设置适当的开发环境(请参阅下面的设置开发环境)。或者,您可以使用 https://develop.element.io - 开发分支的持续集成版本。
通过将config.sample.json
复制到config.json
并修改它来配置应用程序。有关详细信息,请参阅配置文档。
yarn dist
构建要部署的 tarball。解压此文件将提供一个特定于版本的目录,其中包含 Web 服务器上需要的所有文件。
请注意,Windows 不支持yarn dist
,因此Windows 用户可以运行yarn build
,这会将所有必需的文件构建到webapp
目录中。如果不使用 dist 脚本,Element 的版本将不会出现在“设置”中。然后,您可以将webapp
目录挂载到 Web 服务器上以实际提供应用程序,该应用程序完全是静态内容。
Element 还可以作为桌面应用程序运行,封装在 Electron 中。您可以从 https://element.io/get-started 下载预构建版本,或者,如果您愿意,也可以自行构建。
要自行构建,请按照 https://github.com/element-hq/element-desktop 中的说明进行操作。
非常感谢@aviraldg 在 Electron 集成方面所做的初步工作。
配置文档显示了如何根据需要覆盖桌面应用程序的默认设置。
Element 支持多种设置来配置默认服务器、行为、主题等。有关更多详细信息,请参阅配置文档。
Element 的某些功能可以通过设置的Labs
部分中的标志来启用。其中一些功能在 labs.md 中进行了描述。
当/如果您从自己的网络服务器提供 Element 时,Element 要求不缓存以下 URL:
/config.*.json /i18n /home /sites /index.html
我们还建议您通过将网络服务器配置为返回Cache-Control: no-cache
for /
,强制浏览器在页面加载时重新验证 Element 的任何缓存副本。这可确保浏览器在部署后的下一个页面加载时获取新版本的 Element。请注意,这已在我们的 Dockerfile 的 nginx 配置中为您配置。
在尝试在 Element 上进行开发之前,您必须阅读matrix-react-sdk
的开发人员指南,该指南还定义了 Element 的设计、架构和风格。
请阅读选择问题页面,获取有关从哪里开始的一些指导。在开始开发某个功能之前,最好确保您的计划与我们对 Element 的愿景保持一致。在开始之前,请与 #element-dev:matrix.org 中的团队聊天,以便我们确保它是我们愿意合并的内容。
您还应该熟悉代码库中存在的驯服和不太驯服的龙(陷阱)的“Here be Dragons”指南。
Element 的想法是成为底层matrix-react-sdk
之上的相对轻量级的定制“皮肤”。 matrix-react-sdk
提供了较高和较低级别的 React 组件,可用于使用 React 构建 Matrix 通信应用程序。
请注意,Element 旨在无需访问公共互联网即可正确运行。因此,请不要依赖外部 CDN 或服务器托管的资源(JS 库、CSS、图像、字体),而是请将所有依赖项打包到 Element 本身中。
Element 中的大部分功能实际上都在matrix-js-sdk
模块中。可以以一种可以轻松跟踪 git 中的develop
分支并进行本地更改的方式进行设置,而无需每次都手动重建。
首先克隆并构建matrix-js-sdk
:
git 克隆 https://github.com/matrix-org/matrix-js-sdk.gitpushd matrix-js-sdk 纱线链接 纱线安装popd
克隆存储库并切换到element-web
目录:
git 克隆 https://github.com/element-hq/element-web.gitcd element-web
通过将config.sample.json
复制到config.json
并修改它来配置应用程序。有关详细信息,请参阅配置文档。
最后,构建并启动 Element 本身:
纱线链接矩阵-js-sdk 纱线安装 纱线开始
等待几秒钟以完成初始构建;你应该看到类似的东西:
[element-js] <s> [webpack.Progress] 100% [element-js] [element-js] ℹ 「wdm」: 1840 modules [element-js] ℹ 「wdm」: Compiled successfully.
请记住,该命令不会终止,因为它运行 Web 服务器并在源文件更改时重建源文件。此开发服务器还禁用缓存,因此请勿在生产中使用它。
在浏览器中打开 http://127.0.0.1:8080/ 以查看新构建的 Element。
注意:Linux 上的构建脚本默认使用 inotify 来监视目录的更改。如果 inotify 限制太低,您的构建将默默失败或出现Error: EMFILE: too many open files
。为了避免这些问题,我们建议监视限制至少为128M
,实例限制为512
左右。
您可能对问题 #15750 和 #15774 感兴趣以了解更多详细信息。
要设置新的 inotify 监视和实例限制,请执行:
sudo sysctl fs.inotify.max_user_watches=131072 sudo sysctl fs.inotify.max_user_instances=512 sudo sysctl -p
如果您愿意,可以通过执行以下命令使新限制永久生效:
echo fs.inotify.max_user_watches=131072 | sudo tee -a /etc/sysctl.conf echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.conf sudo sysctl -p
当您对matrix-js-sdk
进行更改时,Webpack 应该会自动获取并构建它们。
如果这些步骤中的任何一个出现file table overflow
错误,则您可能使用的 Mac 上的最大打开文件数限制非常低。运行ulimit -Sn 1024
并重试。在构建 Element 之前,您需要在打开的每个新终端中执行此操作。
在tests
目录下有很多应用程序级别的测试;它们被设计为与 Jest 和 JSDOM 一起运行。运行它们
yarn test
有关如何运行端到端测试的信息,请参阅matrix-react-sdk。
要添加新翻译,请前往翻译文档。
有关开发人员指南,请参阅翻译开发文档。
社区成员和 Web 应用程序团队按照分类流程对问题进行分类。
我们使用问题标签对所有传入的问题进行排序。