element web
1.11.83
Element (เดิมชื่อ Vector และ Riot) เป็นเว็บไคลเอ็นต์ Matrix ที่สร้างขึ้นโดยใช้ Matrix JS SDK
Element มีการรองรับหลายระดับสำหรับสภาพแวดล้อมที่แตกต่างกัน:
รองรับ
ปัญหาที่ ได้รับการตรวจสอบอย่างแข็งขัน การถดถอย จะบล็อก การเปิดตัว
คำนิยาม:
Chrome, Firefox และ Edge เวอร์ชันหลัก 2 เวอร์ชันล่าสุดบนระบบปฏิบัติการเดสก์ท็อป
Safari 2 เวอร์ชันล่าสุด
แอป Element Desktop อย่างเป็นทางการรุ่นล่าสุดบนระบบปฏิบัติการเดสก์ท็อป
ระบบปฏิบัติการเดสก์ท็อปหมายถึงเวอร์ชัน macOS, Windows และ Linux สำหรับอุปกรณ์เดสก์ท็อปที่ได้รับการสนับสนุนโดยผู้จำหน่ายระบบปฏิบัติการและรับการอัปเดตความปลอดภัย
ความพยายามอย่างดีที่สุด
ยอมรับ ปัญหาแล้ว การถดถอย ไม่ได้ขัดขวาง การเปิดตัว
ผลิตภัณฑ์องค์ประกอบที่กว้างขึ้น (รวมถึง Element Call และ Enterprise Server Suite) ยังไม่รองรับเบราว์เซอร์เหล่านี้อย่างเป็นทางการ
โครงการเว็บองค์ประกอบและผู้มีส่วนร่วมควรให้ไคลเอ็นต์ทำงานต่อไปและลดระดับลงอย่างสวยงามในกรณีที่ฟีเจอร์พี่น้องอื่นๆ (เช่น การเรียกองค์ประกอบ) อาจไม่ทำงาน
คำนิยาม:
Firefox ESR และ Chrome/Edge Extended Stable รุ่นหลักครั้งสุดท้าย
ชุมชนได้รับการสนับสนุน
ยอมรับ ปัญหาแล้ว การถดถอย ไม่ได้ขัดขวาง การเปิดตัว
การมีส่วนร่วมของชุมชนยินดีที่จะสนับสนุนปัญหาเหล่านี้
คำนิยาม:
เว็บบนมือถือสำหรับ Chrome, Firefox และ Safari เวอร์ชันเสถียรในปัจจุบันบน Android, iOS และ iPadOS
ไม่รองรับ
คำจำกัดความ: ปัญหาที่ส่งผลต่อสภาพแวดล้อมที่ไม่รองรับเท่านั้นจะ ถูกปิด
ทุกอย่างอื่น
ระยะเวลาการสนับสนุนสำหรับระดับเหล่านี้ควรคงอยู่จนถึงรุ่นที่ระบุไว้ข้างต้น บวกด้วย 1 รอบการเปิดตัวแอป (2 สัปดาห์) ในกรณีของ Firefox ESR จะมีการขยายเพิ่มเติมเพื่อให้เข้าสู่ Debian Stable
สำหรับการเข้าถึง Element บนอุปกรณ์ Android หรือ iOS ขณะนี้เราขอแนะนำแอปเนทีฟ element-android และ element-ios
วิธีที่ง่ายที่สุดในการทดสอบ Element คือเพียงใช้สำเนาที่โฮสต์ที่ https://app.element.io สาขา develop ถูกปรับใช้บน https://develop.element.io อย่างต่อเนื่อง สำหรับผู้ที่ชอบใช้ชีวิตแบบอันตราย
หากต้องการโฮสต์อินสแตนซ์ Element ของคุณเอง โปรดดูการติดตั้ง Element Web
หากต้องการติดตั้ง Element เป็นแอปพลิเคชันเดสก์ท็อป โปรดดูการทำงานเป็นแอปเดสก์ท็อปด้านล่าง
เราไม่แนะนำให้เรียกใช้ Element จากชื่อโดเมนเดียวกันกับเมทริกซ์โฮมเซิร์ฟเวอร์ของคุณ เหตุผลก็คือความเสี่ยงของช่องโหว่ XSS (cross-site-scripting) ที่อาจเกิดขึ้นหากมีคนทำให้ 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 ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js เวอร์ชัน LTS ล่าสุดแล้ว
แนะนำให้ใช้ yarn แทน npm โปรดดูคู่มือการติดตั้ง Yarn หากคุณยังไม่มี
ติดตั้งหรืออัปเดต node.js เพื่อให้ node ของคุณมี LTS ที่แนะนำในปัจจุบันเป็นอย่างน้อย
ติดตั้ง yarn หากยังไม่มี
โคลน repo: 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 เพื่อปรับใช้ การถอดไฟล์นี้จะทำให้ไดเร็กทอรีเฉพาะเวอร์ชันประกอบด้วยไฟล์ทั้งหมดที่จำเป็นต้องใช้บนเว็บเซิร์ฟเวอร์ของคุณ
โปรดทราบว่า yarn dist ไม่ได้รับการสนับสนุนบน Windows ดังนั้นผู้ใช้ Windows จึงสามารถรัน yarn build ได้ ซึ่งจะสร้างไฟล์ที่จำเป็นทั้งหมดลงในไดเร็กทอรี webapp เวอร์ชันของ Element จะไม่ปรากฏในการตั้งค่าโดยไม่ใช้สคริปต์ dist จากนั้น คุณสามารถเมานต์ไดเร็กทอรี webapp บนเว็บเซิร์ฟเวอร์ของคุณเพื่อให้บริการแอปได้จริง ซึ่งเป็นเนื้อหาแบบคงที่ทั้งหมด
องค์ประกอบยังสามารถทำงานเป็นแอปเดสก์ท็อปที่ห่อหุ้มด้วยอิเล็กตรอน คุณสามารถดาวน์โหลดเวอร์ชันที่สร้างไว้ล่วงหน้าได้จาก https://element.io/get-started หรือสร้างเองก็ได้หากต้องการ
หากต้องการสร้างด้วยตนเอง ให้ทำตามคำแนะนำที่ https://github.com/element-hq/element-desktop
ขอขอบคุณ @aviraldg มากสำหรับการทำงานเบื้องต้นเกี่ยวกับการบูรณาการอิเล็กตรอน
เอกสารการกำหนดค่าแสดงวิธีแทนที่การตั้งค่าเริ่มต้นของแอปเดสก์ท็อป หากต้องการ
Element รองรับการตั้งค่าที่หลากหลายเพื่อกำหนดค่าเซิร์ฟเวอร์เริ่มต้น พฤติกรรม ธีม ฯลฯ ดูเอกสารการกำหนดค่าสำหรับรายละเอียดเพิ่มเติม
คุณลักษณะบางอย่างของ Element อาจเปิดใช้งานได้โดยการตั้งค่าสถานะในส่วน Labs ของการตั้งค่า คุณสมบัติบางอย่างเหล่านี้อธิบายไว้ใน labs.md
องค์ประกอบต้องการให้ URL ต่อไปนี้ไม่ถูกแคช เมื่อ/หากคุณให้บริการองค์ประกอบจากเว็บเซิร์ฟเวอร์ของคุณเอง:
/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 ก่อนที่คุณจะเริ่มต้น เพื่อให้เรามั่นใจว่าเป็นสิ่งที่เรายินดีที่จะรวมเข้าด้วยกัน
คุณควรทำความคุ้นเคยกับคำแนะนำ "Here be Dragons" สำหรับมังกรที่เชื่องและไม่เชื่อง (gotchas) ซึ่งมีอยู่ในโค้ดเบส
แนวคิดของ Element คือการเป็น "สกิน" ที่ค่อนข้างเบาของการปรับแต่งที่อยู่ด้านบนของ matrix-react-sdk พื้นฐาน matrix-react-sdk มีส่วนประกอบ React ระดับสูงกว่าและต่ำกว่าซึ่งมีประโยชน์สำหรับการสร้างแอปการสื่อสาร Matrix โดยใช้ React
โปรดทราบว่าองค์ประกอบมีจุดมุ่งหมายเพื่อให้ทำงานได้อย่างถูกต้องโดยไม่ต้องเข้าถึงอินเทอร์เน็ตสาธารณะ ดังนั้นโปรดอย่าพึ่งพาทรัพยากร (JS libs, CSS, รูปภาพ, แบบอักษร) ที่โฮสต์โดย CDN หรือเซิร์ฟเวอร์ภายนอก แต่โปรดรวมการพึ่งพาทั้งหมดไว้ใน Element แทน
ฟังก์ชั่นส่วนใหญ่ใน Element นั้นจริง ๆ แล้วอยู่ในโมดูล matrix-js-sdk คุณสามารถตั้งค่าเหล่านี้ในลักษณะที่ทำให้ง่ายต่อการติดตามสาขา develop ใน git และทำการเปลี่ยนแปลงในเครื่องโดยไม่ต้องสร้างใหม่ด้วยตนเองในแต่ละครั้ง
โคลนครั้งแรกและสร้าง matrix-js-sdk :
โคลนคอมไพล์ https://github.com/matrix-org/matrix-js-sdk.gitpushd matrix-js-sdk ลิงค์เส้นด้าย ติดตั้งเส้นด้าย popd
โคลน repo และสลับไปที่ไดเร็กทอรี element-web :
git clone https://github.com/element-hq/element-web.gitcd องค์ประกอบเว็บ
กำหนดค่าแอปโดยการคัดลอก 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 สำหรับรายละเอียดเพิ่มเติม
หากต้องการตั้งค่าขีดจำกัดนาฬิกาและอินสแตนซ์ใหม่ ให้ดำเนินการ:
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 สำหรับวิธีรันการทดสอบแบบ end-to-end
หากต้องการเพิ่มคำแปลใหม่ ให้ไปที่เอกสารการแปล
สำหรับคู่มือนักพัฒนา โปรดดูเอกสารการแปล dev
ปัญหาต่างๆ ได้รับการตรวจสอบโดยสมาชิกชุมชนและทีมงาน Web App ตามกระบวนการคัดแยก
เราใช้ป้ายกำกับปัญหาเพื่อจัดเรียงปัญหาที่เข้ามาทั้งหมด
