Merhaba arkadaşlar, gerçekten uzun süre uğraştığım konuyu bir seriye çevirme düşüncesindeydim. Bu seride react-native xmpp bağlantısı için stanza.io kütüphanesinin kullanımı ve özelliklerinden çoğunlukla bahsedeceğim. XMPP hakkında bilgiye sahip değilseniz https://xmpp.org/about sitesini ziyaret edebilirsiniz.

Güncelleme 10 Aralık 2019
react-native v60'dan sonrası güncellemede rn-config dosyası yerine metro.config.js dosyası kullanıldı. Burada anlatılanın çoğunu stanza.io kütüphanesinin dokümanında bulabilirsiniz.

Güncelleme 13 Mayıs 2018
Bu güncellemede rn-nodeify bağımlılığının yerine node-libs-react-native bağımlılığı kullanıldı
Bağımlılık yapısı tamamen değişti değişiklikleri repodan görebilirsiniz.

Öncelikle bağımlılıklardan başlamak istiyorum. (ben bir kütüphane kullanacaksam nelere bağımlı olduğu ilk araştıracağım konudur)

Stanza.io’yu react-native üzerinde çalıştırmak için gerekli bağımlılıklar:

• react-native-randombytes
• node-libs-react-native
• vm-browserify

Tüm bağımlılıklarıyla package.json

{
  "name": "Peanut",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "node-libs-react-native": "^1.0.3",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-randombytes": "^3.5.3",
    "stanza.io": "8.4.2",
    "vm-browserify": "^1.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/runtime": "^7.7.6",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.7.2",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Sonra bağımlılıkları kuralım (ios için)

$ cd ios && pod install

Bunları yaptıktan sonra metro.config.js dosyasına şunları ekleyelim:

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false
            }
        })
    },
+    resolver: {
+        extraNodeModules: {
+            ...require('node-libs-react-native'),
+            vm: require.resolve('vm-browserify')
+        }
+    }
};

Şimdi kütüphane üzerinden xmpp standartlarını çalıştıran bir servis’e bağlanabiliriz. Ben jabber (xmpp) server olarak openfire kullanacağım. Openfire, Linux / macOS / Solaris / Windows platformlarını destekleyen Apache-2.0 lisansına sahip açık kaynak bir sunucudur. Kurulumunu anlatan çoğu kaynak bulabilirsiniz. Ben yine de linux için kurulumundan bahsedeceğim.

Openfire kurulumu

Öncelikle bilgisayarınızda java runtime environment yüklü olması gerekir. Yüklü değilse bu komutu çalıştırın:

sudo apt-get install default-jre

Java bilgisayarımıza kurulduysa openfire’ı resmi sistesinden indiriyoruz. Ben debian tabanı kullanıyorum, o yüzden inen dosyayı .deb uzantısıyla kaydediyor. İnen .deb dosyasının bulunduğu dizini uçbirim(terminal) ile açıyorum ve şu komutu çalıştırıyorum: (ben o an 4.1.3 indirdim dosya ismi openfire_4.1.3_all.deb)

sudo dpkg --install openfire_4.1.3_all.deb

Kurulum şu an tamamlandı. Şimdi ayarlarını yapmamız gerekiyor. Openfire tanımlı olarak localhost:9090 portunu kullanıyor. Buraya girdiğimde benden dil seçmemi istiyor.

Ben (English) seçerek continue’ye tıklıyorum. Sonra benden sunucunun port ayarları ve paketlerde gönderilecek domain adını istiyor.

Ben portları olduğu gibi bırakıyorum. Domain’i ise avare diye seçerek devam ediyorum. Burada veri tabanı seçimi yapmamı istiyor.

Normalde Embeded olarak geliyor ama performans açısından bizim ihtiyaçarımızı karşılamayacağı için ben Standard Database Connection’u seçerek devam ediyorum. Sonraki adımda benden hangi veritabanın seçeceğimi soruyor. Ben mysql seçiyorum kullanıcı adım ve şifremi giriyorum ama “A connection to the database could not be made” şeklinde hata veriyor. Çünkü henüz veri tabanını oluşturmadım.

Veri tabanını oluşturmak için mysql komut satırında işlem yapabiliriz.

$ mysql -u root -p
$ mysql> CREATE DATABASE openfire;
Query OK, 1 row affected (0.00 sec)

Şeklinde başarılı şekilde mysql veri tabanını oluşturuyorum. Veritabanını oluşturduktan sonra tekrar aynı işlemi yapıyorum ve başarıyla o adımı geçiyoruz. Sonraki adımda ise veri tabanı profili yani kullanımı hakkında 3 seçenek sunuyor.

Ben fazla detayına inmeden bize önerdiği default’u seçiyorum ve devam ediyorum. Sonraki seçenekte kullanıcı adı ve şifre Admin Email Address yazan yere kullanıcı adınızıda girebilirsiniz.

Devam ediyorum ve kurulum tamamlanıyor.

Login to the admin console diyerekte giriş penceresine yöndendiriliyorsunuz. Giriş yaptığınızda Yönetici panelinde işlem yapabilirsiniz.

Şimdi sunucumuz kuruldu. Yapmamız gereken son şey bu sunucuya bağlanacak bir kullanıcı oluşturmak ve şifre vermek. Users/Groups > Create New User yolunu takip ederek bir kullanıcı oluşturuyorum.

Kullanıcı oluştu

Artık sunucumuza kodcu@avare jid’si ile bağlantı kurabiliriz. Sunucu ayarlamamız bitti. Bağlantı kurmak için WebSocket yerine Http-bind kullanacağız. Çünkü sunucuya websocket plugin’i kurulması ve ayarlanması gerekiyor bizim konumuz sunucudan çok stanza.io kullanımı olduğu için bizi ilgilendirmiyor. Ben şu an için http-bind üzerinde çalıştıracağım uygulamamızı. Server ayarlarmalarını kendinizde yapabilirsiniz.

Şimdi bizim hazırda bulunan sunucumuza bağlanmamız gerekiyor. Öncelikle ben simülatör üzerinde çalışacağım için kendi bilgisayarımın ip adresini bilmem gerekiyor. Benim ip 192.168.1.102. Sonra yapmam gereken iş Buffer’ı global değerine eklemek. ana dizine init.js adında bir dosya oluşturuyorum ve içine şu komutları yazıyorum:

import 'node-libs-react-native/globals';

Ardından init dosyasını index.js dosyasına ve xmpp kütüphanesi ile bağlantı kurmak için şu komutları yazıyorum:

import React, { Component } from 'react';
import {
	AppRegistry,
	StyleSheet,
	View,
	Text,
	Alert,
} from 'react-native';

import './init';

import XMPP from 'stanza.io';

export default class Peanut extends Component {

	constructor(props) {
		super(props);

		this.state = {
			logs: []
		};

		this.connectServer = this.connectServer.bind(this);
		this.addLog = this.addLog.bind(this);
	}

	componentWillMount() {
		this.connectServer(); // uygulama başlayınca otomatik çalıştırıyorum
	}

	addLog(log) {
		this.state.logs.push(String(log));
		this.setState({logs: this.state.logs});
	}

	connectServer() {
		var self = this;
		/*
		 * @jid: jid'miz
		 * @password: şifremiz
		 * @sasl: basit oturum doğrulama sistemini şeçiyoruz
		 * @transport: http-bind kullandığımız için bosh seçiyoruz
		 * @boshURL: sunucumuzun http-bind adresi
		*/
		var client = XMPP.createClient({
			jid: 'kodcu@avare',
			password: '1234',
			sasl: "plain",
			transport: 'bosh',
			boshURL: 'http://192.168.1.102:7070/http-bind/'
		});

		// oturumumuz başladı
		client.on('session:started', () => {
			// ekrana mesaj verdik
			self.addLog('Oturum başladı');
		});

		// mesaj geldiğinde
		client.on('message', msg => {
			console.log(msg);
			self.addLog(msg.toString());
		});

		// bağlanılamadığında veya bağlantı koptuğunda
		client.on('disconnected', xml => {
			console.log(xml);
			self.addLog('Bağlantınız Koptu');
		});

		// bağlantı isteği at
		client.connect();
	}

	render() {
		return(
			<View style={{marginTop: 50}}>
				<Text style={{borderBottomWidth: 1, borderBottomColor: '#ccc'}}>Tüm logları aşağıdan takip edebilirsiniz</Text>
				{
					this.state.logs.map((x, i) => (
						<Text
							key={i}>
							{x}
						</Text>
					))
				}
			</View>
		);
	}
}

AppRegistry.registerComponent('Peanut', () => Peanut);

Basitçe bu şekilde bağlantı kurabiliyoruz. Aslında bu proje react-native ile çalışan kararlı bir uygulama. İsmini Peanut (fıstık) koydum. Projeyi bu adresten elde edebilirsiniz. Eğer react-native hakkında biraz olsun bilgi sahibiyseniz uygulamayı geliştirmek için bana yardım ederseniz çok mutlu olurum. Spark gibi kararlı bir xmpp client oluşturma düşüncesindeyim. Projeme birde star atarsanız demeyin keyfime :D. 

Bugün anlatacaklarım bu kadardı aklınıza takılan bir soru olursa çekinmeyin. Eğer bu konu hakkında veya konu dışı olarak bana soru sormak istiyorsanız https://github.com/abdurrahmanekr/bana-istedigini-sor repository'sinde bir issue açabilirsiniz. Youtube kanalıma abone olarak ve yayınladığım bu makaleyi paylaşarak bana destek olabilirsiniz. Diğer makalelerde görüşmek üzere :)