Realtime Collaborative Code Editor

รหัสซิงค์: ตัวแก้ไขรหัสการทำงานร่วมกันแบบเรียลไทม์

การแนะนำ

คุณเบื่อที่จะส่งตัวอย่างรหัสไปมาพยายามดิ้นรนเพื่อแก้ไขข้อบกพร่องและร่วมมือกับทีมของคุณหรือไม่? ไม่มองหาอีก! Sync Code อยู่ที่นี่เพื่อปฏิวัติวิธีที่คุณเขียนรหัสร่วมกัน โปรแกรมแก้ไขรหัสการทำงานร่วมกันที่ทรงพลังและใช้งานง่ายนี้ได้รับการออกแบบมาเพื่อเพิ่มขีดความสามารถของนักพัฒนาและทีมให้ทำงานได้อย่างราบรื่นแบบเรียลไทม์โดยไม่คำนึงถึงที่ตั้งของพวกเขา ด้วย รหัสซิงค์ คุณสามารถเขียนโค้ดร่วมกันดีบั๊กเข้าด้วยกันและจัดส่งได้เร็วขึ้นด้วยกัน

คุณสมบัติ

• ผู้ใช้หลายคนสามารถเข้าร่วมห้องและแก้ไขรหัสด้วยกัน
• การเปลี่ยนแปลงจะสะท้อนให้เห็นในเวลาจริง
• ปุ่มคัดลอกเพื่อคัดลอก ID ห้องไปยังคลิปบอร์ด
• ออกจากปุ่มเพื่อออกจากห้อง
• รองรับการไฮไลต์ไวยากรณ์สำหรับภาษาการเขียนโปรแกรมที่แตกต่างกัน
• ผู้ใช้สามารถเลือกธีมตามการตั้งค่าของพวกเขา
• ผู้ใช้สามารถออกจากห้องและเข้าร่วมอีกครั้งในภายหลังเพื่อแก้ไขต่อไป
• การเข้าร่วมและการออกจากผู้ใช้ก็สะท้อนให้เห็นในเวลาจริง

ข้อกำหนดเบื้องต้น

สำหรับการวิ่งผ่าน Docker

• Docker (25.0.4)
• นักเทียบท่า (1.29.2)

สำหรับการทำงานในพื้นที่

• node.js (v20.11.1)
• NPM (10.2.4)
• PM2 (5.3.1): เรียกใช้ npm i -g pm2 เพื่อติดตั้ง PM2 ทั่วโลก

หมายเหตุ: ฉันใช้ NVM (v0.39.7) เพื่อจัดการเวอร์ชันโหนดของฉัน ดูเอกสารอย่างเป็นทางการของ NVM เพื่อติดตั้ง

ซ้อนเทค

• react.js
• node.js
• Express.js
• ซ็อกเก็ต
• codemirror
• ตอบโต้

การติดตั้ง

รันผ่านภาพ Docker (แนะนำเป็นอย่างยิ่ง)

ในการเรียกใช้อิมเมจนักเทียบท่าให้ทำตามขั้นตอนด้านล่าง:

1. ติดตั้ง Docker บนเครื่องของคุณ
2. ดึงอิมเมจนักเทียบท่าจากฮับ Docker โดยเรียกใช้ docker pull mohitur/code-editor
3. เรียกใช้อิมเมจ Docker โดยเรียกใช้ docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editor
4. ไปที่ http://localhost:3000 เพื่อดูแอพ
5. สร้างห้องโดยคลิกที่ปุ่ม create new room และใส่ชื่อผู้ใช้ที่คุณเลือก 5 คัดลอกรหัสห้องโดยคลิกที่ปุ่ม Copy ROOM ID
6. หากต้องการเข้าร่วมเป็นผู้ใช้รายอื่นเปิดเบราว์เซอร์/เบราว์เซอร์-หน้าต่างหรือแท็บที่ไม่ระบุตัวตนและไปที่ http://localhost:3000
7. ป้อนรหัสห้องเดียวกันเพื่อเข้าร่วมห้องเดียวกัน

ตอนนี้ทั้งสองตัวแก้ไขของคุณจะได้รับการซิงค์และคุณสามารถเห็นการเปลี่ยนแปลงแบบเรียลไทม์ ลองเปิดห้องเดียวกันในเบราว์เซอร์/เบราว์เซอร์-หน้าต่างและดูการเปลี่ยนแปลง

หมายเหตุ: หากคุณใช้ Docker ใน WSL2/Linux ให้เพิ่ม sudo ก่อนคำสั่ง Docker

วิ่งผ่านการสร้างภาพนักเทียบท่าของคุณเอง

ในการเรียกใช้แอพโดยใช้ Docker ให้ทำตามขั้นตอนด้านล่าง:

1. ติดตั้ง Docker บนเครื่องของคุณ
2. โคลนพื้นที่เก็บข้อมูลโครงการและนำทางไปยังไดเรกทอรีโครงการ
3. นอกจากนี้คุณต้องเปลี่ยนค่า env ใน dockerfile
4. แทนที่ชื่อผู้ใช้ของคุณในไฟล์ Docker-compose.yml
5. เรียกใช้คำสั่ง Docker Compose: docker-compose up -d
6. ไปที่ http://localhost:3000 เพื่อดูแอพ
7. ทำตามขั้นตอนที่ 5-7 จากส่วนการทำงานผ่านทาง Docker Image เพื่อสร้างและเข้าร่วมห้อง

ทำงานในพื้นที่

1. โคลนที่เก็บและซีดีนี้ลงไป
2. เรียกใช้ npm install เพื่อติดตั้งการอ้างอิง
3. สร้างไฟล์. ENV ในโฟลเดอร์รูทและคัดลอกวางเนื้อหาของ example.env และเพิ่มข้อมูลรับรองที่จำเป็น
4. ในการเริ่มต้นไคลเอนต์แอปตอบสนองการเรียกใช้ npm start ในเทอร์มินัลเดียว
5. ในการเริ่มต้นเซิร์ฟเวอร์เรียกใช้ npm server:dev หรือ pm2 start server.js ในเทอร์มินัลอื่น
6. ไปที่ http://localhost:3000 เพื่อดูแอพ
7. ทำตามขั้นตอนที่ 4-7 จากส่วนการทำงานผ่านทาง Docker Image เพื่อสร้างและเข้าร่วมห้อง

หมายเหตุ: หากต้องการหยุดเซิร์ฟเวอร์ของคุณให้กด Ctrl+c หรือถ้าคุณใช้ "PM2" จากนั้นใช้ pm2 stop server.js ในเทอร์มินัล

วิดีโอโครงการ

Project-walkthrough.mp4

หมายเหตุ: หากคุณพบข้อบกพร่องใด ๆ ให้สร้างปัญหาที่นี่ ฉันจะพยายามแก้ไขโดยเร็วที่สุด :)
ในกรณีที่คุณต้องการแก้ไขด้วยตัวเองอย่าลังเลที่จะทำคำขอดึง

ขอบเขตในอนาคต

1. เพิ่มไวยากรณ์ที่เน้นหลายภาษา
2. เพิ่มการสนับสนุนสำหรับหลายธีม
3. เพิ่มการสนับสนุนสำหรับการบันทึกธีมและภาษาสุดท้ายที่ผู้ใช้เลือกในพื้นที่จัดเก็บในท้องถิ่น
4. เพิ่มการสนับสนุนเพื่อยอมรับหรือปฏิเสธผู้ใช้ใหม่ที่พยายามเข้าร่วมห้อง
5. เพิ่มไปยังคุณสมบัติวิดีโอและการแชทด้วยเสียงภายในตัวแก้ไข
6. เพิ่มการสนับสนุนสำหรับการอัปโหลดไฟล์รหัสท้องถิ่น

การบริจาคโอเพ่นซอร์ส

หากคุณต้องการสนับสนุนโครงการนี้ให้ทำตามขั้นตอนด้านล่าง:

1. แยกที่เก็บนี้
2. โคลนที่เก็บข้อมูล
   

 git clone https://github.com/your-github_username/Realtime-Collaborative-Code-Editor.git

3. ซีดีลงในที่เก็บโคลน
4. สร้างสาขาใหม่
   

 git checkout -b your_branch_name

5. ทำการเปลี่ยนแปลงของคุณ
6. มุ่งมั่นและผลักดันการเปลี่ยนแปลงของคุณ
   

 git add . <br>
git commit -m "your commit message" <br>
git push origin your_branch_name

7. สุดท้ายสร้างคำขอดึงโดยไปที่ที่เก็บข้อมูลของคุณบน GitHub

หมายเหตุ: โปรดตรวจสอบให้แน่ใจว่าใช้สาขาของคุณเองเมื่อมีส่วนร่วม

เกี่ยวกับฉัน

ฉันเป็น Mohd Mohitur Rahaman ซึ่งเป็นนักเทคโนโลยีซึ่งกำลังติดตามปริญญาโทด้านคอมพิวเตอร์ (ปีสุดท้าย) จาก Kiit, Bhubaneswar และด้วยความหลงใหลในการเข้ารหัสและความรักที่แข็งแกร่งสำหรับวิทยาศาสตร์และเทคโนโลยีฉันทุ่มเทให้กับทักษะของฉันและบรรลุความสามารถในการเป็นนักพัฒนา

เชื่อมต่อกับฉัน

• LinkedIn
• คนอื่น ๆ