react messenger Download - react messenger Source Source Download

react messenger

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

ตอบโต้ผู้ส่งสาร

โครงการนี้ใช้ React และ CSS เพื่อสร้างแอปพลิเคชันเว็บ Messenger Facebook ใหม่ มันอยู่ในช่วงเริ่มต้น แต่ส่วนใหญ่ของหน่วยการสร้างอยู่ในสถานที่ นี่ไม่ใช่ผลิตภัณฑ์ Facebook อย่างเป็นทางการและไม่ได้รับการดูแลโดยพนักงาน Facebook

คลิกที่นี่เพื่อสาธิตสด

ส่วนประกอบที่มีอยู่

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

ช่วงเวลาสำหรับการแยกวิเคราะห์วันที่จาวาสคริปต์และพิมพ์ด้วยวิธีที่อ่านได้
โกนเพื่อตัดข้อความยาวเพื่อรักษาความสอดคล้องระหว่าง ConversationListItem
Axios เพื่ออำนวยความสะดวกในการร้องขอ HTTP (สำหรับข้อความผู้ใช้ ฯลฯ )

แต่งเพลง

ส่วนประกอบ Compose อนุญาตให้ผู้ใช้ส่งข้อความและไฟล์แนบ

อุปกรณ์ประกอบฉาก	พิมพ์	คำอธิบาย
`rightItems`	`ToolbarButton[]`	ไอคอนที่ปรากฏทางด้านขวาขององค์ประกอบ `input` ช่วยให้ผู้ใช้สามารถส่งมากกว่าข้อความ (เช่นรูปภาพ, เงินสด, สถานที่, ฯลฯ )

รายการสนทนา

นี่เป็นองค์ประกอบง่าย ๆ ที่แสดง ConversationSearch และใช้ axios เพื่อดึงผู้ใช้จาก API ผู้ใช้แบบสุ่ม

ConversionListItem

ส่วนประกอบนี้ให้ภาพรวมของการสนทนาเดียวรวมถึงรูปภาพชื่อ (หรือชื่อกลุ่ม) และตัวอย่างของข้อความล่าสุด เราใช้ shave เพื่อตัดแต่งข้อความที่แสดงเพื่อให้ทุกกรณีของ ConversationListItem ใช้พื้นที่แนวตั้งในปริมาณเท่ากัน

อุปกรณ์ประกอบฉาก	พิมพ์	คำอธิบาย
`photo`	`String`	URL ของภาพถ่ายที่จะแสดงสำหรับการสนทนา การสาธิตใช้รูปภาพที่ได้รับจาก API ผู้ใช้แบบสุ่ม
`name`	`String`	ชื่อของการสนทนาไม่ว่าจะเป็นกลุ่มหรือบุคคล
`text`	`String`	ข้อความของข้อความล่าสุด คุณไม่ต้องตัดทอนสิ่งนี้ด้วยตัวเอง

บทสนทนา

นี่คือองค์ประกอบ input ที่เรียบง่ายที่มีสไตล์คล้ายกับแถบค้นหา Messenger Facebook ตัวยึดตำแหน่งของมันจะอยู่กึ่งกลางจนกระทั่งอินพุตมุ่งเน้นย้ายตัวยึดตำแหน่งไปทางซ้าย

ข้อความ

เนื่องจากงานส่วนใหญ่ทำโดย MessageList องค์ประกอบนี้ค่อนข้างตรงไปตรงมา ตามที่ระบุไว้ด้านล่างมี props จำนวนมากที่ช่วยให้คุณสามารถจัดสไตล์กลุ่มข้อความที่แตกต่างกัน

อุปกรณ์ประกอบฉาก	พิมพ์	คำอธิบาย
`data`	`Object`	วัตถุที่มีข้อมูลเกี่ยวกับข้อความ เราใช้ `data.message` สำหรับตัวข้อความและ `data.timestamp` สำหรับวัตถุวันที่ JavaScript ซึ่งแสดงถึงเวลาที่ส่งข้อความ
`isMine`	`Boolean`	ใช้โทนสีกับข้อความ ( `#007aff` ในการสาธิต) และจัดตำแหน่งให้อยู่ทางขวาเพื่อระบุว่าข้อความถูกส่งโดยคุณ
`startsSequence`	`Boolean`	ระบุว่าข้อความแสดงถึงการเริ่มต้นของลำดับของข้อความ สิ่งนี้ตั้งค่ารัศมีเส้นขอบด้านบนที่เหมาะสมขึ้นอยู่กับว่าข้อความถูกส่งโดยคุณหรือคนอื่น
`endsSequence`	`Boolean`	ระบุว่าข้อความแสดงถึงจุดสิ้นสุดของลำดับของข้อความ สิ่งนี้ตั้งค่ารัศมีเส้นขอบด้านล่างที่เหมาะสมขึ้นอยู่กับว่าข้อความถูกส่งโดยคุณหรือคนอื่น
`showTimestamp`	`Boolean`	กำหนดว่าควรแสดงการประทับเวลาของข้อความหรือไม่ แอพสาธิตตั้งค่านี้เป็น `true` หากผ่านไปมากกว่าหนึ่งชั่วโมงระหว่างข้อความ

นักแต่งเพลง

นี่เป็นองค์ประกอบที่เรียบง่ายที่หลอกลวงซึ่งทำการยกหนักจำนวนมากสำหรับการแสดงลำดับของข้อความที่มีสไตล์ที่เหมาะสม (ดู MessageList.renderMessages ) โดยเฉพาะเราใช้ข้อมูลเกี่ยวกับข้อความ ( author และ timestamp ) เพื่อแสดงกลุ่มข้อความที่ใกล้ชิดยิ่งขึ้นพร้อมกับการแก้ไข Radii และ Margin นี่ไม่ได้มีอยู่ใน Facebook Messenger แต่ในแอพอื่น ๆ เช่น iMessage เช่นกัน คุณสามารถลบฟังก์ชั่นนี้ได้หากคุณต้องการ

ผู้ส่งสาร

ส่วนประกอบนี้เป็นหลักสำหรับ wrapper สำหรับเว็บแอปพลิเคชัน มันกำหนดเค้าโครงกริด CSS และเปิดเผยคลาสผู้ช่วยบางส่วน (เช่น scrollable ทำให้เราสามารถแยกการเลื่อนระหว่างแถบด้านข้างและบานหน้าต่างเนื้อหา)

แถบเครื่องมือ

การสาธิตใช้แถบเครื่องมือสองอันซึ่งอยู่เหนือแถบด้านข้างและบานหน้าต่าง ส่วนประกอบนี้แสดงชื่อและสามารถรวมปุ่มได้ ชื่อเรื่องยังคงอยู่กึ่งกลางภายในแถบเครื่องมือโดยไม่คำนึงว่าองค์ประกอบนั้นมีอยู่ทั้งสองด้านหรือไม่

อุปกรณ์ประกอบฉาก	พิมพ์	คำอธิบาย
`title`	`String`	ชื่อที่จะแสดงในศูนย์กลางของแถบเครื่องมือ
`leftItems`	`ToolbarButton[]`	องค์ประกอบ `ToolbarButton` ที่ควรปรากฏทางด้านซ้ายของแถบเครื่องมือ
`rightItems`	`ToolbarButton[]`	องค์ประกอบ `ToolbarButton` ที่ควรปรากฏทางด้านขวาของแถบเครื่องมือ

Toolbarbutton

น่าจะอธิบายได้ดีกว่าว่าเป็น "ปุ่มไอคอน" มันเป็นเพียงแค่ปุ่มที่แสดงไอคอน ฉันจะเพิ่มการพิจารณาการเข้าถึงในเวลา

อุปกรณ์ประกอบฉาก	พิมพ์	คำอธิบาย
`icon`	`String`	ชื่อของไอคอนที่จะแสดงผ่านตัวอักษรไอคอน ฉันใช้อิออนในการสาธิต แต่สิ่งนี้สามารถเปลี่ยนไปได้อย่างง่ายดายสำหรับ fontawesome หรือห้องสมุดที่คล้ายกัน คุณสามารถสร้างแบบอักษรไอคอนของคุณเองได้ที่ iComoon

แผนงาน

นี่เป็นห้องสมุดที่ค่อนข้างตรงไปตรงมา แต่ฉันวางแผนที่จะทำการปรับปรุงและเพิ่มคุณสมบัติต่อไป หากคุณต้องการมีส่วนร่วมคุณยินดีต้อนรับมากกว่า

ข้อความสื่อ (เช่นรูปภาพวิดีโอ)
คำแนะนำเครื่องมือ, popovers, modals (สำหรับตัวเลือกการดู, การส่งข้อความใหม่ ฯลฯ )
การเสื่อมสภาพที่สง่างาม (ตัวบ่งชี้สถานะเครือข่ายการโหลดสปินเนอร์ ฯลฯ )
การตอบสนอง

สคริปต์ที่มีอยู่

ในไดเรกทอรีโครงการคุณสามารถเรียกใช้:

`npm start`

รันแอพในโหมดการพัฒนา
เปิด http: // localhost: 3000 เพื่อดูในเบราว์เซอร์

หน้าจะโหลดซ้ำหากคุณทำการแก้ไข
คุณจะเห็นข้อผิดพลาดผ้าสำลีในคอนโซล

`npm test`

เปิดตัวนักวิ่งทดสอบในโหมดนาฬิกาแบบโต้ตอบ
ดูหัวข้อเกี่ยวกับการเรียกใช้การทดสอบสำหรับข้อมูลเพิ่มเติม

`npm run build`

สร้างแอพสำหรับการผลิตไปยังโฟลเดอร์ build
มันรวมกันอย่างถูกต้องตอบสนองในโหมดการผลิตและปรับการสร้างเพื่อประสิทธิภาพที่ดีที่สุด

บิลด์มีขนาดเล็กและชื่อไฟล์รวมถึงแฮช
แอพของคุณพร้อมที่จะนำไปใช้งานแล้ว!

ดูหัวข้อเกี่ยวกับการปรับใช้สำหรับข้อมูลเพิ่มเติม

`npm run eject`

หมายเหตุ: นี่เป็นการดำเนินการทางเดียว เมื่อคุณ eject คุณไม่สามารถกลับไป!

หากคุณไม่พอใจกับเครื่องมือสร้างและตัวเลือกการกำหนดค่าคุณสามารถ eject ตลอดเวลา คำสั่งนี้จะลบการพึ่งพาการสร้างครั้งเดียวออกจากโครงการของคุณ

แต่จะคัดลอกไฟล์การกำหนดค่าทั้งหมดและการพึ่งพาสกรรมกริยา (WebPack, Babel, Eslint, ฯลฯ ) ลงในโครงการของคุณเพื่อให้คุณสามารถควบคุมได้อย่างเต็มที่ คำสั่งทั้งหมดยกเว้น eject จะใช้งานได้ แต่พวกเขาจะชี้ไปที่สคริปต์ที่คัดลอกมาเพื่อให้คุณสามารถปรับแต่งได้ ณ จุดนี้คุณเป็นของคุณเอง

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