Rails 5 API Action Cable ve birden çok özel oda ve grup sohbeti seçeneği olan ReactJS kullanarak bir Sohbet sistemi oluşturun

Lütfen bu yazının bir öğretici olmadığını ve Rails 5 ActionCable ve ReactJS / Javascript özel kütüphane binasının bilgisi gerektirdiğini unutmayın.

Rails 5 ile birlikte gelen harika özelliklerden biri ActionCable. ActionCable ile websocket üzerinden aklınıza gelebilecek tüm gerçek zamanlı özellikleri oluşturabilirsiniz. Bir sohbet sistemi inşa etmek için uğraşırken, Rails 5 ActionCable ile nasıl bir sohbet uygulaması oluşturulacağına dair birçok örnek bulmuştum, ancak konsepti gerçek hayattaki herhangi bir sohbet uygulaması için bile uygulamak çok basit. İnternette böyle bir sohbet sisteminin nasıl kurulacağını gösteren ilk örnek olduğuna inanıyorum:

  • Rails 5 API arka uç ve bir ReactJS ön uç
  • Birden fazla özel oda
  • Bir odadaki pozitif kullanıcı sayısı (sadece 1–1 değil) veya grup sohbeti

Yetenekli arkadaşım Tim Chang ile yaptığım sohbet sistemi:

  1. Birden fazla özel sohbet odası
  2. Oda başına çoklu sohbet kullanıcısı
  3. Her kullanıcının çevrimiçi / çevrimdışı durumu
  4. Gerçek zamanlı “yazarak…” durumu
  5. Gerçek zamanlı okuma makbuzu
Son sonucumuz böyle görünüyor. (Bu örnek makale, yine de ön uç çalışmayı göstermeyecektir)

Bu kısa yayında, size yalnızca # 1 ve # 2 temellerini göstereceğim. Lütfen # 3, # 4 ve # 5 yapılarının nasıl yapıldığını göstermemi istiyorsanız, lütfen bana bir yorum bırakın. Rails 5'i arka uç API ve ReactJS kütüphanesi olarak ön uçta kullanıyorum.

Arka Ucu

Oluşturma sırasında, Rails tüm gerçek zamanlı sihrin gerçekleştiği kanal klasörlerini ve dosyalarını oluşturacaktır :)

Uygulama / kanalları / application_cable / channel.rb
Uygulama / kanalları / application_cable / connection.rb

Doğrulama

Öncelikle, connection.rb içindeki Rails sunucunuza websocket bağlantı isteklerini doğrulayalım.

Projenizde kullandığınız kimlik doğrulama gemisine veya hizmetine bağlı olarak, find_verified_user yöntemi ihtiyacınıza göre değiştirilmelidir. Valid_token adında bir yöntem var mı? erişim belirtecini ve client_id'yi doğrulamak için websocket isteğiyle iletildi. İstek doğrulanmazsa, reddedilir.

Veri yapısı

Fikir çok basit: Birden fazla mesaj içeren bir sohbet odası, her mesajın bir içeriği ve göndereni var. Bir mesajın “alıcısı” olmadığını unutmayın. Bu, bir odanın çok sayıda kullanıcısına sahip olmasını sağlar, çünkü mesajların alıcısıyla ilgilenmeniz gerekmez, çünkü gönderenlerden gelen tüm mesajlar, odanın içinde ne kadar katılımcı olursa olsun bir odada görünmeye başlar. Yani, bu kullandığım veri yapısı:

  • Konuşma (oda): has_many mesaj, kullanıcı ve bir kimliği var
  • Mesaj: bir sohbete ait, bir gönderen, metin içeriği var
  • Gönderen: Kullanıcı

Sonuç olarak 3 model oluşturdum:

Eylem tetikleyiciler

Bir müşteri bağlandığında (abone olduğunda) veya bir mesajı yayınladığında (konuşma), arka uç eylemlerle tepki verir. Klasör uygulamasında / kanallarında room_channel.rb adlı bir dosya oluşturacağım.

Yorumda görebileceğiniz gibi, bir müşteri "konuştuktan" sonra, yayın henüz gerçekleşmiyor; içeriği ve verileriyle yalnızca yeni bir Mesaj oluşturulur. İşlem zinciri, Mesaj DB'ye kaydedildikten sonra gerçekleşir. Mesaj modeline tekrar göz atalım:

after_create_commit {MessageBroadcastJob.perform_later (kendini)}

Ölçeklenebilirlik

Bu geri arama yalnızca Mesaj oluşturulduktan ve DB'ye atandıktan sonra çağrılır. Ölçeklemek için bu işlemi işlemek için arka plan işleri kullanıyorum. Aynı anda mesaj gönderen binlerce müşteriniz olduğunu hayal edin (bu bir sohbet sistemidir, neden olmasın?), Burada arka plan işini kullanmak bir zorunluluktur.

İşte yayın gerçekleştiği zaman. ActionCable, yükü sağlanan yük ile birlikte belirtilen odaya yayınlayacaktır.

ActionCable.server.broadcast (oda_adı, yük)

Kablo Güzergahı

İstemcinizin mesaj yayınlamak ve almak için bu uç noktayı arayabilmesi için / cable websocket yolunu routes.rb dosyasına eklemeniz gerekir.

mount ActionCable.server => '/ cable'

Ve bu arka uç için de geçerli! ReactJS ön uç kütüphanesine göz atalım.

Müşteri Kütüphanesi

Lütfen projenizin özelliklerine bağlı olarak, bu kodun kavramını bu kütüphanede anlamanız ve ihtiyaçlarınız doğrultusunda değiştirmeniz gerekeceğini unutmayın.

İlk olarak, ActionCableJS'yi npm ile kurun.

ReactJs uygulamanızdaki servislerden biri olarak bir ChatConnection.js dosyası oluşturun.

İşte kanca burada: createRoomConnection'da, müşteri arka uçta oluşturduğumuz RoomChannel ile bağlantı kurmaya (abone olmaya) çalışacak, bağlandığında (abone olunca), oda adı ChatRoom-id'den (room_channel'a bakın) akacak. rb yukarıda tekrar) Bir kez bağlandığında, sık sık çağrılacak 2 yöntem vardır, hangisini tahmin edersiniz?

Onlar: alındı ​​ve konuşun!

İstemciye sunucudan yayın yapan bir mesaj olduğunda alınan yöntem çağrılır, bunun tersine, istemci sunucuya bir mesaj yayınladığında speak denir.

İşte bu kadar! Bu kadar. Yine, bu, kullanıma hazır bir eğitim niteliğinde değildir, çünkü her proje farklıdır, ancak umarım size birden fazla özel sohbet odasıyla bir sohbet sistemi oluşturma hakkında bir fikir verir. ve oda başına birden çok kullanıcı. Herhangi bir sorunuz varsa lütfen yorum bölümünde bana bildirin.