Element (anteriormente conocido como Vector y Riot) es un cliente web Matrix creado con Matrix JS SDK.
Element tiene varios niveles de soporte para diferentes entornos:
Apoyado
Problemas evaluados activamente , las regresiones bloquean la publicación
Definición:
Últimas 2 versiones principales de Chrome, Firefox y Edge en sistemas operativos de escritorio
Últimas 2 versiones de Safari
Última versión de la aplicación oficial Element Desktop en sistemas operativos de escritorio
Sistemas operativos de escritorio significa versiones de macOS, Windows y Linux para dispositivos de escritorio que cuentan con soporte activo del proveedor del sistema operativo y reciben actualizaciones de seguridad.
Mejor esfuerzo
Cuestiones aceptadas , las regresiones no bloquean la liberación.
Los productos Element más amplios (incluidos Element Call y Enterprise Server Suite) todavía no son compatibles oficialmente con estos navegadores.
El proyecto web de elementos y sus contribuyentes deben mantener el cliente funcionando y degradarse con gracia donde otras funciones hermanas (por ejemplo, Element Call) pueden no funcionar.
Definición:
Última versión importante de Firefox ESR y Chrome/Edge Extended Stable
Apoyado por la comunidad
Cuestiones aceptadas , las regresiones no bloquean la liberación.
Las contribuciones de la comunidad son bienvenidas para apoyar estos temas.
Definición:
Web móvil para la versión estable actual de Chrome, Firefox y Safari en Android, iOS y iPadOS
No compatible
Definición: Los problemas que solo afectan a entornos no compatibles están cerrados
Todo lo demás
El período de soporte para estos niveles debe durar hasta los lanzamientos especificados anteriormente, más 1 ciclo de lanzamiento de la aplicación (2 semanas). En el caso de Firefox ESR, esto se amplía aún más para permitirle llegar a Debian Stable.
Para acceder a Element en un dispositivo Android o iOS, actualmente recomendamos las aplicaciones nativas element-android y element-ios.
La forma más sencilla de probar Element es simplemente utilizar la copia alojada en https://app.element.io. La rama develop
se implementa continuamente en https://develop.element.io para aquellos a quienes les gusta vivir peligrosamente.
Para alojar su propia instancia de Element, consulte Instalación de Element Web.
Para instalar Element como una aplicación de escritorio, consulte Ejecución como una aplicación de escritorio a continuación.
No recomendamos ejecutar Element desde el mismo nombre de dominio que su servidor doméstico Matrix. La razón es el riesgo de vulnerabilidades XSS (cross-site-scripting) que podrían ocurrir si alguien hiciera que Element cargara y renderizara contenido generado por usuarios maliciosos desde una API de Matrix que luego tuviera acceso confiable a Element (u otras aplicaciones) debido a que compartía el mismo dominio.
Hemos implementado algunas mitigaciones generales para tratar de protegernos contra esta situación, pero todavía no es una buena práctica hacerlo en primer lugar. Consulte el n.° 1977 para obtener más detalles.
A menos que tenga requisitos especiales, querrá agregar lo siguiente a la configuración de su servidor web cuando aloje Element Web:
El encabezado X-Frame-Options: SAMEORIGIN
, para evitar que Element Web se enmarque y proteger contra el clickjacking.
La directiva frame-ancestors 'self'
para su encabezado Content-Security-Policy
, como reemplazo moderno de X-Frame-Options
(aunque ambos deben incluirse ya que no todos los navegadores lo admiten todavía, vea esto).
El encabezado X-Content-Type-Options: nosniff
, para deshabilitar el rastreo MIME.
La X-XSS-Protection: 1; mode=block;
encabezado, para protección XSS básica en navegadores heredados.
Si está utilizando nginx, esto se parecería a lo siguiente:
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'";
Para Apache, la configuración es similar a la siguiente:
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'"
Nota: En caso de que ya esté configurando un encabezado Content-Security-Policy
en otro lugar, debe modificarlo para incluir la directiva frame-ancestors
en lugar de agregar esa última línea.
Element es una aplicación web modular construida con ES6 moderno y utiliza un sistema de compilación Node.js. Asegúrese de tener instalada la última versión LTS de Node.js.
Se recomienda usar yarn
en lugar de npm
. Consulte la guía de instalación de Yarn si aún no la tiene.
Instale o actualice node.js
para que su node
tenga al menos el LTS recomendado actualmente.
Instale yarn
si aún no está presente.
Clona el repositorio: git clone https://github.com/element-hq/element-web.git
.
Cambie al directorio element-web: cd element-web
.
Instale los requisitos previos: yarn install
.
Si está utilizando la rama develop
, se recomienda configurar un entorno de desarrollo adecuado (consulte Configuración de un entorno de desarrollo a continuación). Alternativamente, puede usar https://develop.element.io, la versión de integración continua de la rama de desarrollo.
Configure la aplicación copiando config.sample.json
en config.json
y modificándolo. Consulte los documentos de configuración para obtener más detalles.
yarn dist
para construir un tarball para implementar. Al descomprimir este archivo se obtendrá un directorio específico de la versión que contiene todos los archivos que deben estar en su servidor web.
Tenga en cuenta que yarn dist
no es compatible con Windows, por lo que los usuarios de Windows pueden ejecutar yarn build
, que creará todos los archivos necesarios en el directorio de webapp
. La versión de Element no aparecerá en Configuración sin utilizar el script dist. Luego puede montar el directorio webapp
en su servidor web para ofrecer la aplicación, que es contenido completamente estático.
Element también se puede ejecutar como una aplicación de escritorio, envuelta en Electron. Puede descargar una versión prediseñadas desde https://element.io/get-started o, si lo prefiere, crearla usted mismo.
Para crearlo usted mismo, siga las instrucciones en https://github.com/element-hq/element-desktop.
Muchas gracias a @aviraldg por el trabajo inicial en la integración de Electron.
Los documentos de configuración muestran cómo anular la configuración predeterminada de la aplicación de escritorio si lo desea.
Element admite una variedad de configuraciones para configurar servidores predeterminados, comportamiento, temas, etc. Consulte los documentos de configuración para obtener más detalles.
Algunas funciones de Element pueden habilitarse mediante indicadores en la sección Labs
de la configuración. Algunas de estas características se describen en labs.md.
Element requiere que las siguientes URL no se almacenen en caché, cuando/si está sirviendo Element desde su propio servidor web:
/config.*.json /i18n /home /sites /index.html
También recomendamos que obligue a los navegadores a volver a validar cualquier copia almacenada en caché de Element al cargar la página configurando su servidor web para que devuelva Cache-Control: no-cache
para /
. Esto garantiza que el navegador buscará una nueva versión de Element en la siguiente carga de la página después de su implementación. Tenga en cuenta que esto ya está configurado para usted en la configuración nginx de nuestro Dockerfile.
Antes de intentar desarrollar en Element, debe leer la guía para desarrolladores de matrix-react-sdk
, que también define el diseño, la arquitectura y el estilo de Element.
Lea la página Elegir un problema para obtener orientación sobre por dónde empezar. Antes de comenzar a trabajar en una función, es mejor asegurarse de que su plan se alinee bien con nuestra visión de Element. Charle con el equipo en #element-dev:matrix.org antes de comenzar para que podamos asegurarnos de que es algo que estaríamos dispuestos a fusionar.
También debes familiarizarte con la guía "Here be Dragons" sobre los dragones domesticados y no tan domesticados (trampas) que existen en el código base.
La idea de Element es ser una "piel" relativamente liviana de personalizaciones sobre el matrix-react-sdk
subyacente. matrix-react-sdk
proporciona componentes React de nivel superior e inferior útiles para crear aplicaciones de comunicación Matrix utilizando React.
Tenga en cuenta que Element está diseñado para ejecutarse correctamente sin acceso a la Internet pública. Por lo tanto, no dependa de los recursos (libras JS, CSS, imágenes, fuentes) alojados en CDN o servidores externos, sino que empaquete todas las dependencias en el propio Element.
Gran parte de la funcionalidad de Element se encuentra en realidad en el módulo matrix-js-sdk
. Es posible configurarlos de una manera que facilite el seguimiento de las ramas develop
en git y realizar cambios locales sin tener que reconstruir manualmente cada vez.
Primero clona y construye matrix-js-sdk
:
clon de git https://github.com/matrix-org/matrix-js-sdk.gitpushd matriz-js-sdk enlace de hilo instalación de hilopopd
Clona el repositorio y cambia al directorio element-web
:
clon de git https://github.com/element-hq/element-web.gitcd elemento-web
Configure la aplicación copiando config.sample.json
en config.json
y modificándolo. Consulte los documentos de configuración para obtener más detalles.
Finalmente, construya e inicie el propio Element:
matriz de enlace de hilo-js-sdk instalación de hilo inicio del hilo
Espere unos segundos hasta que finalice la compilación inicial; deberías ver algo como:
[element-js] <s> [webpack.Progress] 100% [element-js] [element-js] ℹ 「wdm」: 1840 modules [element-js] ℹ 「wdm」: Compiled successfully.
Recuerde, el comando no finalizará ya que ejecuta el servidor web y reconstruye los archivos fuente cuando cambian. Este servidor de desarrollo también desactiva el almacenamiento en caché, así que NO lo utilice en producción.
Abra http://127.0.0.1:8080/ en su navegador para ver su Elemento recién creado.
Nota : El script de compilación utiliza inotify de forma predeterminada en Linux para monitorear los directorios en busca de cambios. Si los límites de inotify son demasiado bajos, su compilación fallará silenciosamente o con Error: EMFILE: too many open files
. Para evitar estos problemas, recomendamos un límite de visualización de al menos 128M
y un límite de instancias de alrededor de 512
.
Quizás le interesen los números 15750 y 15774 para obtener más detalles.
Para establecer un nuevo límite de vigilancia e instancia de inotify, ejecute:
sudo sysctl fs.inotify.max_user_watches=131072 sudo sysctl fs.inotify.max_user_instances=512 sudo sysctl -p
Si lo deseas, puedes hacer que los nuevos límites sean permanentes, ejecutando:
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
Cuando realiza cambios en matrix-js-sdk
webpack los debe recoger y compilar automáticamente.
Si alguno de estos pasos produce un error y se produce file table overflow
, probablemente esté en una Mac que tiene un límite muy bajo en el número máximo de archivos abiertos. Ejecute ulimit -Sn 1024
y vuelva a intentarlo. Deberá hacer esto en cada nueva terminal que abra antes de construir Element.
Hay varias pruebas a nivel de aplicación en el directorio tests
; Estos están diseñados para ejecutarse con Jest y JSDOM. para ejecutarlos
yarn test
Consulte Matrix-react-sdk para saber cómo ejecutar las pruebas de un extremo a otro.
Para agregar una nueva traducción, dirígete al documento de traducción.
Para obtener una guía para desarrolladores, consulte el documento para desarrolladores de traducción.
Los miembros de la comunidad y el equipo de la aplicación web clasifican los problemas, siguiendo el proceso de clasificación.
Usamos etiquetas de problemas para ordenar todos los problemas entrantes.