element web
1.11.83
Element (anteriormente conhecido como Vector e Riot) é um cliente web Matrix construído usando o Matrix JS SDK.
Element tem vários níveis de suporte para diferentes ambientes:
Suportado
Problemas triados ativamente , regressões bloqueiam a liberação
Definição:
Últimas duas versões principais do Chrome, Firefox e Edge em sistemas operacionais de desktop
Últimas 2 versões do Safari
Versão mais recente do aplicativo oficial Element Desktop em sistemas operacionais de desktop
Sistemas operacionais de desktop significam versões macOS, Windows e Linux para dispositivos de desktop que são ativamente suportados pelo fornecedor do sistema operacional e recebem atualizações de segurança
Melhor esforço
Problemas aceitos , regressões não bloqueiam a liberação
Os produtos Element mais amplos (incluindo Element Call e Enterprise Server Suite) ainda não oferecem suporte oficial a esses navegadores.
O projeto da web do elemento e seus contribuidores devem manter o cliente funcionando e degradar normalmente onde outros recursos irmãos (por exemplo, Element Call) podem não funcionar.
Definição:
Última grande versão do Firefox ESR e Chrome/Edge Extended Stable
Apoiado pela comunidade
Problemas aceitos , regressões não bloqueiam a liberação
As contribuições da comunidade são bem-vindas para apoiar estas questões
Definição:
Web móvel para a versão estável atual do Chrome, Firefox e Safari no Android, iOS e iPadOS
Não compatível
Definição: os problemas que afetam apenas ambientes sem suporte são encerrados
Todo o resto
O período de suporte para essas camadas deve durar até os lançamentos especificados acima, mais 1 ciclo de lançamento do aplicativo (2 semanas). No caso do Firefox ESR, isso é estendido ainda mais para permitir que ele chegue ao Debian Stable.
Para acessar o Element em um dispositivo Android ou iOS, atualmente recomendamos os aplicativos nativos element-android e element-ios.
A maneira mais fácil de testar o Element é apenas usar a cópia hospedada em https://app.element.io. O ramo develop é continuamente implantado em https://develop.element.io para quem gosta de viver perigosamente.
Para hospedar sua própria instância do Element, consulte Instalando o Element Web.
Para instalar o Element como um aplicativo de desktop, consulte Executando como um aplicativo de desktop abaixo.
Não recomendamos executar o Element com o mesmo nome de domínio do seu servidor doméstico Matrix. O motivo é o risco de vulnerabilidades XSS (cross-site-scripting) que poderiam ocorrer se alguém fizesse com que o Element carregasse e renderizasse conteúdo malicioso gerado pelo usuário a partir de uma API Matrix que então tivesse acesso confiável ao Element (ou outros aplicativos) devido ao compartilhamento do mesmo domínio.
Implementámos algumas mitigações grosseiras para tentar proteger-nos contra esta situação, mas ainda não é uma boa prática fazê-lo em primeiro lugar. Consulte #1977 para obter mais detalhes.
A menos que você tenha requisitos especiais, você desejará adicionar o seguinte à configuração do seu servidor web ao hospedar o Element Web:
O cabeçalho X-Frame-Options: SAMEORIGIN , para evitar que o Element Web seja enquadrado e proteger contra clickjacking.
A diretiva frame-ancestors 'self' para seu cabeçalho Content-Security-Policy , como o substituto moderno para X-Frame-Options (embora ambos devam ser incluídos, pois nem todos os navegadores suportam ainda, veja isto).
O cabeçalho X-Content-Type-Options: nosniff , para desativar a detecção de MIME.
A X-XSS-Protection: 1; mode=block; header, para proteção básica de XSS em navegadores legados.
Se você estiver usando o nginx, seria algo parecido com o seguinte:
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, a configuração é semelhante a:
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: Caso você já esteja definindo um cabeçalho Content-Security-Policy em outro lugar, você deve modificá-lo para incluir a diretiva frame-ancestors em vez de adicionar a última linha.
Element é um webapp modular construído com ES6 moderno e usa um sistema de construção Node.js. Certifique-se de ter a versão LTS mais recente do Node.js instalada.
É recomendado usar yarn em vez de npm . Consulte o guia de instalação do Yarn se ainda não o tiver feito.
Instale ou atualize node.js para que seu node seja pelo menos o LTS atualmente recomendado.
Instale yarn se ainda não estiver presente.
Clone o repositório: git clone https://github.com/element-hq/element-web.git .
Mude para o diretório element-web: cd element-web .
Instale os pré-requisitos: yarn install .
Se você estiver usando o branch develop , é recomendável configurar um ambiente de desenvolvimento adequado (consulte Configurando um ambiente de desenvolvimento abaixo). Alternativamente, você pode usar https://develop.element.io – a versão de integração contínua do branch de desenvolvimento.
Configure o aplicativo copiando config.sample.json para config.json e modificando-o. Consulte a documentação de configuração para obter detalhes.
yarn dist para construir um tarball para implantar. Descompactar este arquivo fornecerá um diretório específico da versão contendo todos os arquivos que precisam ser armazenados em seu servidor web.
Observe que yarn dist não é compatível com o Windows, portanto, os usuários do Windows podem executar yarn build , que criará todos os arquivos necessários no diretório webapp . A versão do Element não aparecerá em Configurações sem usar o script dist. Você pode então montar o diretório webapp em seu servidor web para realmente servir o aplicativo, que é um conteúdo totalmente estático.
O Element também pode ser executado como um aplicativo de desktop, empacotado em Electron. Você pode baixar uma versão pré-construída em https://element.io/get-started ou, se preferir, construí-la você mesmo.
Para construí-lo você mesmo, siga as instruções em https://github.com/element-hq/element-desktop.
Muito obrigado a @aviraldg pelo trabalho inicial na integração do Electron.
Os documentos de configuração mostram como substituir as configurações padrão do aplicativo de desktop, se desejado.
O Element suporta uma variedade de configurações para configurar servidores padrão, comportamento, temas, etc. Consulte a documentação de configuração para obter mais detalhes.
Alguns recursos do Element podem ser habilitados por sinalizadores na seção Labs das configurações. Alguns desses recursos são descritos em labs.md.
Element requer que os seguintes URLs não sejam armazenados em cache, quando/se você estiver servindo Element a partir de seu próprio servidor web:
/config.*.json /i18n /home /sites /index.html
Também recomendamos que você force os navegadores a revalidar qualquer cópia em cache do Element no carregamento da página, configurando seu servidor web para retornar Cache-Control: no-cache for / . Isso garante que o navegador irá buscar uma nova versão do Element no próximo carregamento da página após sua implantação. Observe que isso já está configurado para você na configuração do nginx do nosso Dockerfile.
Antes de tentar desenvolver no Element, você deve ler o guia do desenvolvedor para matrix-react-sdk , que também define o design, a arquitetura e o estilo do Element.
Leia a página Escolhendo um problema para obter orientações sobre por onde começar. Antes de começar a trabalhar em um recurso, é melhor garantir que seu plano esteja alinhado com nossa visão para o Element. Converse com a equipe em #element-dev:matrix.org antes de começar para que possamos garantir que é algo que estaríamos dispostos a fundir.
Você também deve se familiarizar com o guia "Here be Dragons" para os dragões domesticados e não tão domesticados (pegadinhas) que existem na base de código.
A ideia do Element é ser uma "capa" relativamente leve de personalizações sobre o matrix-react-sdk subjacente. matrix-react-sdk fornece componentes React de nível superior e inferior, úteis para construir aplicativos de comunicação Matrix usando React.
Observe que o Element foi projetado para funcionar corretamente sem acesso à Internet pública. Portanto, não dependa de recursos (libs JS, CSS, imagens, fontes) hospedados por CDNs ou servidores externos, mas em vez disso, empacote todas as dependências no próprio Element.
Grande parte da funcionalidade do Element está, na verdade, no módulo matrix-js-sdk . É possível configurá-los de uma forma que facilite o rastreamento das ramificações develop no git e a realização de alterações locais sem a necessidade de reconstruir manualmente a cada vez.
Primeiro clone e construa matrix-js-sdk :
clone git https://github.com/matrix-org/matrix-js-sdk.gitpushd matriz-js-sdk ligação de fio instalação do fio popd
Clone o repositório e mude para o diretório element-web :
clone git https://github.com/element-hq/element-web.gitcd element-web
Configure o aplicativo copiando config.sample.json para config.json e modificando-o. Consulte a documentação de configuração para obter detalhes.
Finalmente, construa e inicie o próprio Element:
fio link matriz-js-sdk instalação de fio início do fio
Aguarde alguns segundos para que a compilação inicial termine; você deverá ver algo como:
[element-js] <s> [webpack.Progress] 100% [element-js] [element-js] ℹ ｢wdm｣: 1840 modules [element-js] ℹ ｢wdm｣: Compiled successfully.
Lembre-se de que o comando não será encerrado, pois executa o servidor web e reconstrói os arquivos de origem quando eles são alterados. Este servidor de desenvolvimento também desativa o cache, portanto NÃO o utilize em produção.
Abra http://127.0.0.1:8080/ em seu navegador para ver seu elemento recém-construído.
Nota : O script de construção usa inotify por padrão no Linux para monitorar alterações nos diretórios. Se os limites do inotify forem muito baixos, sua compilação falhará silenciosamente ou com Error: EMFILE: too many open files . Para evitar esses problemas, recomendamos um limite de observação de pelo menos 128M e um limite de instâncias em torno de 512 .
Você pode estar interessado nas edições #15750 e #15774 para obter mais detalhes.
Para definir um novo limite de instância e observação do inotify, execute:
sudo sysctl fs.inotify.max_user_watches=131072 sudo sysctl fs.inotify.max_user_instances=512 sudo sysctl -p
Se desejar, você pode tornar os novos limites permanentes, executando:
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
Quando você faz alterações no matrix-js-sdk elas devem ser automaticamente selecionadas pelo webpack e construídas.
Se alguma dessas etapas apresentar erro com file table overflow , você provavelmente está em um Mac que tem um limite muito baixo de arquivos abertos. Execute ulimit -Sn 1024 e tente novamente. Você precisará fazer isso em cada novo terminal aberto antes de construir o Element.
Existem vários testes em nível de aplicativo no diretório tests ; eles foram projetados para rodar com Jest e JSDOM. Para executá-los
yarn test
Consulte Matrix-react-sdk para saber como executar os testes ponta a ponta.
Para adicionar uma nova tradução, acesse o documento de tradução.
Para obter um guia do desenvolvedor, consulte o documento de tradução do desenvolvedor.
Os problemas são triados pelos membros da comunidade e pela equipe do Web App, seguindo o processo de triagem.
Usamos rótulos de problemas para classificar todos os problemas recebidos.
