Unduh react messenger - react messenger Source Code Download

react messenger

Kode Sumber AI

1.0.0

Unduh

Bereaksi Messenger

Proyek ini menggunakan React dan CSS untuk membuat ulang aplikasi web Facebook Messenger. Ini pada tahap awal tetapi sebagian besar blok bangunan sudah ada. Ini bukan produk Facebook resmi juga tidak dikelola oleh karyawan Facebook mana pun.

Klik di sini untuk demo langsung

Komponen yang tersedia

Saat menggunakan komponen -komponen ini, penting untuk diingat bahwa kami menggunakan beberapa ketergantungan yang berbeda untuk mencapai pengalaman pengguna yang lebih baik. Secara khusus:

Momen untuk parsing tanggal javascript dan mencetaknya dengan cara yang dapat dibaca.
Cukur untuk memangkas pesan panjang untuk mempertahankan konsistensi di antara ConversationListItem .
AXIOS untuk memfasilitasi permintaan HTTP (untuk pesan, pengguna, dll).

Menyusun

Komponen COMPOSE memungkinkan pengguna untuk mengirim pesan dan lampiran.

alat peraga	jenis	keterangan
`rightItems`	`ToolbarButton[]`	Ikon yang muncul di sebelah kanan elemen `input` yang memungkinkan pengguna untuk mengirim lebih dari teks (misalnya foto, uang tunai, lokasi, dll).

Daftar Percakapan

Ini adalah komponen sederhana yang membuat ConversationSearch dan menggunakan axios untuk mengambil pengguna dari API pengguna acak.

ConversationListItem

Komponen ini memberikan gambaran umum tentang percakapan tunggal, termasuk foto, nama (atau judul grup), dan cuplikan dari pesan terbaru. Kami menggunakan shave untuk memangkas pesan yang ditampilkan sehingga semua contoh ConversationListItem mengambil jumlah ruang vertikal yang sama.

alat peraga	jenis	keterangan
`photo`	`String`	URL foto yang akan ditampilkan untuk percakapan. Demo menggunakan foto yang disediakan oleh API pengguna acak.
`name`	`String`	Nama percakapan, apakah itu kelompok atau individu.
`text`	`String`	Teks dari pesan terbaru; Anda tidak perlu memotongnya sendiri.

Conversationsearch

Ini adalah elemen input sederhana yang ditata untuk menyerupai bilah pencarian Facebook Messenger. Placeholdernya berpusat sampai input difokuskan, memindahkan placeholder ke kiri.

Pesan

Karena sebagian besar pekerjaan dilakukan oleh MessageList , komponen ini cukup lurus. Seperti yang dinyatakan di bawah ini, ada banyak props yang memungkinkan Anda untuk menata kelompok pesan yang berbeda.

alat peraga	jenis	keterangan
`data`	`Object`	Objek yang berisi informasi tentang pesan tersebut. Kami menggunakan `data.message` untuk badan pesan dan `data.timestamp` .
`isMine`	`Boolean`	Menerapkan warna pada pesan ( `#007aff` dalam demo) dan menyelaraskannya ke kanan, menunjukkan bahwa pesan tersebut dikirim oleh Anda.
`startsSequence`	`Boolean`	Menunjukkan bahwa pesan tersebut mewakili awal dari urutan pesan. Ini menetapkan jari -jari perbatasan atas yang sesuai, tergantung pada apakah pesan itu dikirim oleh Anda atau orang lain.
`endsSequence`	`Boolean`	Menunjukkan bahwa pesan tersebut mewakili akhir dari urutan pesan. Ini menetapkan jari -jari perbatasan bawah yang sesuai, tergantung pada apakah pesan itu dikirim oleh Anda atau orang lain.
`showTimestamp`	`Boolean`	Menentukan apakah cap waktu pesan harus ditampilkan atau tidak. Aplikasi demo menetapkan nilai ini menjadi `true` jika lebih dari satu jam telah berlalu di antara pesan.

Distist Messagel

Ini adalah komponen sederhana yang melakukan banyak pengangkatan berat untuk memberikan urutan pesan dengan gaya yang sesuai (lihat MessageList.renderMessages ). Secara khusus, kami menggunakan informasi tentang pesan ( author dan timestamp ) untuk membuat grup pesan yang lebih dekat dengan yang dimodifikasi-radii dan margin. Ini tidak hanya ada di Facebook Messenger, tetapi di aplikasi lain seperti iMessage juga. Anda dapat menghapus fungsi ini jika Anda mau.

Kurir

Komponen ini pada dasarnya adalah pembungkus untuk aplikasi web. Ini mendefinisikan tata letak kisi CSS dan memperlihatkan beberapa kelas pembantu (misalnya scrollable , memungkinkan kami untuk memisahkan pengguliran antara bilah samping dan panel konten).

Toolbar

Demo menggunakan dua toolbar yang duduk di atas bilah samping dan panel konten. Komponen ini menampilkan judul dan juga dapat menyertakan tombol. Judul tetap berpusat di dalam bilah alat terlepas dari apakah elemen ada di kedua sisi.

alat peraga	jenis	keterangan
`title`	`String`	Judul yang akan ditampilkan di tengah bilah alat.
`leftItems`	`ToolbarButton[]`	Elemen `ToolbarButton` yang harus muncul di sisi kiri bilah alat.
`rightItems`	`ToolbarButton[]`	Elemen `ToolbarButton` yang harus muncul di sisi kanan bilah alat.

Toolbarbutton

Mungkin lebih baik digambarkan sebagai "tombol ikon," hanya itu - tombol yang menunjukkan ikon. Saya akan menambahkan pertimbangan aksesibilitas tepat waktu.

alat peraga	jenis	keterangan
`icon`	`String`	Nama ikon yang akan diwakili melalui font ikon. Saya menggunakan ionicons dalam demo tetapi ini bisa dengan mudah ditukar dengan fontawesome atau perpustakaan serupa. Anda bahkan dapat membuat font ikon sendiri di Icomoon.

Peta jalan

Ini adalah perpustakaan yang agak lurus tetapi saya berencana untuk terus melakukan perbaikan dan menambahkan fitur. Jika Anda ingin berkontribusi, Anda disambut.

Pesan Media (misalnya foto, video)
Tooltips, Popovers, Modal (untuk Opsi Melihat, Mengirim Pesan Baru, dll)
Degradasi anggun (indikator status jaringan, pemintal pemintal, dll)
Responsif

Skrip yang tersedia

Di direktori proyek, Anda dapat menjalankan:

`npm start`

Menjalankan aplikasi dalam mode pengembangan.
Buka http: // localhost: 3000 untuk melihatnya di browser.

Halaman ini akan memuat ulang jika Anda mengedit.
Anda juga akan melihat kesalahan serat di konsol.

`npm test`

Meluncurkan test runner dalam mode jam tangan interaktif.
Lihat bagian tentang menjalankan tes untuk informasi lebih lanjut.

`npm run build`

Membangun aplikasi untuk produksi ke folder build .
Bundelnya dengan benar bereaksi dalam mode produksi dan mengoptimalkan build untuk kinerja terbaik.

Bangunan diminifikasi dan nama file termasuk hash.
Aplikasi Anda siap digunakan!

Lihat bagian tentang penyebaran untuk informasi lebih lanjut.

`npm run eject`

Catatan: Ini adalah operasi satu arah. Setelah Anda eject , Anda tidak bisa kembali!

Jika Anda tidak puas dengan alat build dan pilihan konfigurasi, Anda dapat eject kapan saja. Perintah ini akan menghapus ketergantungan build tunggal dari proyek Anda.

Sebagai gantinya, itu akan menyalin semua file konfigurasi dan dependensi transitif (Webpack, Babel, Eslint, dll) langsung ke proyek Anda sehingga Anda memiliki kontrol penuh atasnya. Semua perintah kecuali eject masih akan berfungsi, tetapi mereka akan menunjuk ke skrip yang disalin sehingga Anda dapat mengubahnya. Pada titik ini Anda sendirian.

Anda tidak harus menggunakan eject . Set fitur yang dikuratori cocok untuk penyebaran kecil dan tengah, dan Anda tidak boleh merasa wajib menggunakan fitur ini. Namun kami memahami bahwa alat ini tidak akan berguna jika Anda tidak dapat menyesuaikannya saat Anda siap untuk itu.