React-Native ve Socket.io ile Chat App

İhtiyacın olan teknolojiyi seçmelisin! Herkes bu cümleyi kurar. Peki biz bunu gerçekten yapıyor muyuz? Bence bizim elimizde olmayan sebeplerle yapamıyoruz, belkide yapmak istemiyoruz. Burasını gerçekten bilmiyorum.

Uzun vadede çalıştığım yerlerde yaşadığım bir konuşmayı sizlere aktarmak istiyorum:

AAA > Abi bize bu veriler anlık lazım.

XXX > O zaman şöyle yapalım sen bana 15 saniyede 1 request at.

AAA > Abi socket açsaaaa..

XXX > Boş ver abi.

Konu o kadar hızlı kapandı ki ikna edebilir miyim diye düşünemedim bile. Sonuç olarakta 15 saniyede bir request attım. Bunun sebebi belki kısa proje bitirme süreleri belki üşengeçlik, bilemiyorum. Neyse, hadi başlayalım!

Örnek için;

ayberkanilatsiz/react-native-socket.io-chat

React-Native ile uğraşıyoruz bende socket ile chat uygulaması yapmalıyım dedim. RN için kullandığım js kütüphaneleri;

"react-native-gifted-chat": "0.2.7",
"socket.io-client": "2.0.3",
"react-native": "0.48.3",

GiftedChat bir çok özelliği olan bir mesajlaşma component’i. Gayet başarılı daha önce de deneme fırsatı bulduğum bir component, bence kesinlikle denemelisiniz, gayet eğlenceli ve güzel. Ben bu yazıyı yazerken RN versionu 0.49'du. Fakat gifted-chat bu versionda sıkıntılı. Bu sorunun github linkini buraya tıklayarak bulabilirsiniz.

gifted-chat bir mesaj objesi alttaki gibi olmalı.

{
  _id: 1, // Mesaj ID'si
  text: 'Hello developer', // Mesaj Text
  createdAt: new Date(), // Mesajın yaratıldığı zaman.
  user: {
    _id: 2, //user id
    name: 'React Native', // user name
    avatar: 'https://facebook.github.io/react/img/logo_og.png',
    //avatar image path
  },
}

İlk olarak uygulama ayağa kalktığı anda socket server’a bağlanmamız gerekiyor. Bunun için;

“messages” ve “userId” değişkenlerinin artık bizim için bir event key’i olduğunu hayal edin. Server bu keyler ile bir yayın yapıyor ve bağlı olan socketlerin gerekli fonksiyonları çalışıyor. Şimdi birde bu fonksiyonlara bakalım.

onRecivedMessage fonksiyonu yeni bir mesaj geldiğinde Component State’inde bulunan mesajlara yeni gelen mesajı ekliyor.

onSend ise bir mesajımızı server’a yolluyor. Burada ben username’i objenin içerisine koydum. Aslında bunu server-side da socketId ile eşlesek daha güzel olur.

GiftedChat yazılı mesajları messages prop’u altında bir array olarak alıyor. Eğer mesaj objesinde bir avatar link’i yoksa, kullanıcı adının ilk harfini kullanıyor.

Kullanıcının bir isim girmesi için renderUsernameView fonsiyonunu çağırıyorum.

Username girildikten sonra buton ile isReady’i değiştiriyorum.

Start’a basıldığında alttaki fonkisyon isReady değişkenini true’a çekip kullanıcıyı chat ekranına atıyor.

start(){
 const { username } = this.state;
 if(username && username.length > 3){
  this.setState({isReady:true});
 }else{
  alert(‘Username is min 4 characters’)
 }
}

Client-Side sadece bu kadar. Şimdi biraz server side işlere geçelim.

Server için kullandığım js kütüphaneleri;

"express": "4.16.2",
"socket.io": "2.0.3"

Server-Side da çok minimal bir yapı var. Birçok şey daha eklenebilir. Ben gelen mesaj textini ve kullanıcı adını Gifted-Chat’in istediği hale getirip bütün clientlara gönderdim, bir yere kaydetme gereği duymadım açıkçası.

io.on(‘connection’, function (socket) {
  socket.emit(‘userId’,{userId:socket.id})
  ...
};

Connection ilk oluştuğu an kullancıya id’si olarak socketId’yi döndüm.

socket.on('messages', function (data) {
  let messageObj = {
    _id: new Date().getTime()+'#'+socket.id,
     text: data.text,
     createdAt: new Date(),
     user:{
       _id: socket.id,
       name: data.username
     }
  };
  console.log('messageObj => ', messageObj);
  socket.broadcast.emit('messages',{'messages':messageObj});
  socket.emit('messages',{'messages':messageObj});
});

Mesaj bana ulaştığı an mesaj objesini gerekli hale getirip açık socketlere tekrardan gönderdim. Burada 2 adet “emit” fonksyionu olduğunu göreceksiniz. socket.broadcast ile yapılan aksiyonda, mesaj gönderen kullanıcı hariç herkese gönderiliyor. Aslında client gönderdiği mesajı biliyor, tekrardan ona göndermeye gerek yok. Ve herşey tamam! Kendi chat uygulamanız hazır ☺.

Bütün bunları 1 saate yakın bir sürede bitirdim. Socket ayağa kaldırıp bağlanmak gerçekten çok iş yükü değil. Gerekli olduğunu düşündüğümüz yerlerde kesinlikle deneyip, deneyim etmeliyiz.

Instagram’da gizlice story izleyip indirebileceğini biliyor muydun?

Download Instagram Stories Anonymously