Element (ранее известный как Vector и Riot) — это веб-клиент Matrix, созданный с использованием Matrix JS SDK.
Element имеет несколько уровней поддержки для разных сред:
Поддерживается
Проблемы активно сортируются , регрессии блокируют выпуск
Определение:
Последние две основные версии Chrome, Firefox и Edge для настольных ОС
Последние 2 версии Safari
Последняя версия официального приложения Element Desktop для настольных ОС.
Операционные системы для настольных компьютеров означают версии macOS, Windows и Linux для настольных устройств, которые активно поддерживаются поставщиком ОС и получают обновления безопасности.
Лучшее усилие
Проблемы приняты , регрессии не блокируют выпуск
Более широкие продукты Element (включая Element Call и Enterprise Server Suite) до сих пор официально не поддерживают эти браузеры.
Веб-проект элемента и его участники должны поддерживать функционирование клиента и корректно деградировать там, где другие родственные функции (например, вызов элемента) могут не работать.
Определение:
Последний крупный выпуск Firefox ESR и расширенной стабильной версии Chrome/Edge.
Поддерживается сообществом
Проблемы приняты , регрессии не блокируют выпуск
Вклад сообщества приветствуется для поддержки этих проблем.
Определение:
Мобильный Интернет для текущей стабильной версии Chrome, Firefox и Safari на Android, iOS и iPadOS.
Не поддерживается
Определение: проблемы, затрагивающие только неподдерживаемые среды , закрыты.
Все остальное
Период поддержки этих уровней должен длиться до выхода указанных выше выпусков плюс 1 цикл выпуска приложения (2 недели). В случае Firefox ESR это расширение расширено, чтобы позволить ему попасть в стабильную версию Debian.
Для доступа к Element на устройстве Android или iOS в настоящее время мы рекомендуем использовать собственные приложения element-android и element-ios.
Самый простой способ протестировать Element — просто использовать размещенную копию по адресу https://app.element.io. Ветка develop
постоянно развертывается на https://develop.element.io для тех, кто любит жить опасно.
Чтобы разместить собственный экземпляр Element, см. раздел «Установка Element Web».
Чтобы установить Element как настольное приложение, см. раздел «Запуск как настольное приложение» ниже.
Мы не рекомендуем запускать Element с того же доменного имени, что и ваш домашний сервер Matrix. Причиной является риск уязвимостей XSS (межсайтовый скриптинг), которые могут возникнуть, если кто-то заставил Element загружать и отображать вредоносный пользовательский контент из Matrix API, который затем имел доверенный доступ к Element (или другим приложениям) из-за совместного использования тот же домен.
Мы ввели некоторые грубые меры по смягчению последствий, чтобы попытаться защититься от этой ситуации, но делать это по-прежнему не рекомендуется. См. #1977 для более подробной информации.
Если у вас нет особых требований, вам нужно будет добавить следующее в конфигурацию вашего веб-сервера при размещении Element 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 и использующее систему сборки 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
для создания архива для развертывания. Разархивирование этого файла приведет к созданию каталога для конкретной версии, содержащего все файлы, которые необходимо разместить на вашем веб-сервере.
Обратите внимание, что yarn dist
не поддерживается в Windows, поэтому пользователи Windows могут запустить yarn build
, который создаст все необходимые файлы в каталоге webapp
. Версия Element не появится в настройках без использования сценария dist. Затем вы можете смонтировать каталог webapp
на своем веб-сервере, чтобы фактически обслуживать приложение, которое представляет собой полностью статический контент.
Element также можно запустить как настольное приложение, завернутое в Electron. Вы можете загрузить готовую версию с https://element.io/get-started или, если хотите, создать ее самостоятельно.
Чтобы создать его самостоятельно, следуйте инструкциям на странице https://github.com/element-hq/element-desktop.
Большое спасибо @aviraldg за первоначальную работу по интеграции Electron.
В документации по конфигурации показано, как при желании переопределить настройки настольного приложения по умолчанию.
Element поддерживает множество настроек для настройки серверов по умолчанию, поведения, тем и т. д. Более подробную информацию см. в документации по конфигурации.
Некоторые функции Element можно включить с помощью флажков в разделе Labs
настроек. Некоторые из этих функций описаны в labs.md.
Element требует, чтобы следующие URL-адреса не кэшировались, когда/если вы обслуживаете Element со своего собственного веб-сервера:
/config.*.json /i18n /home /sites /index.html
Мы также рекомендуем вам заставить браузеры повторно проверять любую кэшированную копию Element при загрузке страницы, настроив ваш веб-сервер на возврат Cache-Control: no-cache
for /
. Это гарантирует, что браузер получит новую версию Element при следующей загрузке страницы после ее развертывания. Обратите внимание, что это уже настроено для вас в конфигурации nginx нашего Dockerfile.
Прежде чем приступить к разработке на Element, вы должны прочитать руководство разработчика для matrix-react-sdk
, которое также определяет дизайн, архитектуру и стиль Element.
Прочтите страницу «Выбор проблемы», чтобы получить рекомендации о том, с чего начать. Прежде чем приступить к работе над функцией, лучше всего убедиться, что ваш план соответствует нашему видению Element. Пожалуйста, пообщайтесь с командой #element-dev:matrix.org, прежде чем начать, чтобы мы могли убедиться, что мы готовы объединить это.
Вам также следует ознакомиться с руководством «Здесь будут драконы» по прирученным и не очень ручным драконам (ошибкам), которые существуют в кодовой базе.
Идея Element состоит в том, чтобы быть относительно легкой «оболочкой» настроек поверх базового matrix-react-sdk
. matrix-react-sdk
предоставляет компоненты React как верхнего, так и нижнего уровня, полезные для создания коммуникационных приложений Matrix с использованием React.
Обратите внимание, что Element предназначен для корректной работы без доступа к общедоступному Интернету. Поэтому, пожалуйста, не полагайтесь на ресурсы (JS-библиотеки, CSS, изображения, шрифты), размещенные на внешних CDN или серверах, а вместо этого упакуйте все зависимости в сам Element.
Большая часть функциональности Element на самом деле находится в модуле matrix-js-sdk
. Их можно настроить таким образом, чтобы можно было легко отслеживать ветки develop
в git и вносить локальные изменения без необходимости каждый раз перестраивать вручную.
Сначала клонируйте и создайте matrix-js-sdk
:
git clone https://github.com/matrix-org/matrix-js-sdk.gitpushd matrix-js-sdk ссылка на пряжу пряжа installpopd
Клонируйте репозиторий и переключитесь в каталог element-web
:
git clone 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.
Помните, что команда не завершится, поскольку она запускает веб-сервер и перестраивает исходные файлы при их изменении. Этот сервер разработки также отключает кэширование, поэтому НЕ используйте его в рабочей среде.
Откройте http://127.0.0.1:8080/ в своем браузере, чтобы увидеть только что созданный элемент.
Примечание . Сценарий сборки по умолчанию использует inotify в Linux для отслеживания изменений в каталогах. Если пределы 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
веб-пакет должен автоматически подхватить их и собрать.
Если какой-либо из этих шагов приводит к ошибке file table overflow
, вы, вероятно, используете Mac, у которого очень низкий предел максимального количества открытых файлов. Запустите ulimit -Sn 1024
и повторите попытку. Вам нужно будет делать это в каждом новом терминале, который вы открываете перед созданием Element.
В каталоге tests
находится ряд тестов уровня приложения; они предназначены для работы с Jest и JSDOM. Чтобы запустить их
yarn test
См. Matrix-react-sdk, чтобы узнать, как запускать сквозные тесты.
Чтобы добавить новый перевод, перейдите к переводящему документу.
Руководство для разработчиков см. в переводе документации для разработчиков.
Проблемы рассматриваются членами сообщества и командой веб-приложений в соответствии с процессом сортировки.
Мы используем метки задач для сортировки всех входящих задач.