Android'de Socket.io kullanımı ile online kullanıcı sayısını göstermek

Merhabalar,


Bu yazıda Android'de Socket.io kullanımı ile online kullanıcı sayısının gösterilmesinden bahsedeceğim. Client (istemci) ve server (sunucu) olarak çalışacak şekilde iki farklı projemiz olacak. Server tarafında Node.js ile Socket bağlantılı sunucumuzu ayağa kaldırırken, client tarafında Java ile sunucumuza bağlanıp gerekli veriyi elde edeceğiz.


Örnek projeleri Github üzerinden paylaştım. İndirip inceleyebilirsiniz:


Örnek Proje Linki (Server)

Örnek Proje Linki (Client)


İlk olarak server projemizle başlayalım:


Masaüstüne gelerek boş bir klasör oluşturuyorum. Sonrasında komut satırında oluşturduğum klasörün olduğu dizine gelerek;

npm init -y

komutunu çalıştırıyorum. Hemen ardından gerekli kütüphaneyi yüklemek adına;

npm install socket.io --save

komutunu çalıştırıyorum.


Klasörümün içinde server.js adında bir dosya oluşturup içeriğini şu şekilde dolduruyorum:

const http = require('http').createServer();
const io = require('socket.io')(http);

http.listen(3000);

let online_user_count = 0;

io.on('connection', socket => {
    console.log('yeni bir kullanıcı bağlandı.');
    online_user_count++;
    io.emit('newUser', online_user_count);

    socket.on('disconnect', () => {
        console.log('bir kullanıcı ayrıldı.');
        online_user_count--;
        io.emit('disUser', online_user_count);        
    });
});

Burada yaptığımız işlemler;

  • Http sunucusu oluşturup ayağa kaldırdık.
  • online_user_count adında bir değişken oluşturup başlangıç değerine 0 verdik.
  • Socket.io bağlantısını dahil edip connection durumunda değişkenimizin değerini 1 arttırdık ve newUser adında bir key ile gönderdik (emit). Disconnect durumunda ise değişkenimizin değerini 1 azalttık ve disUser adında bir key ile gönderdik.


Son olarak komut satırında projemizi ayağa kaldırmak adına;

node server

komutunu çalıştırıyorum.


Server tarafındaki işimiz bu kadardı. Şimdi de client tarafına geçelim:


Android Studio'yu açarak boş bir proje oluşturuyorum. build.gradle dosyasını açarak gerekli kütüphaneyi dahil ediyorum:

implementation 'com.github.nkzawa:socket.io-client:0.5.0'


activity_main.xml layout dosyasını açarak basit bir tasarım yapıyoruz:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvOnlineUserCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textColor="#000"
        android:textSize="30sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="kişi şuanda online" />

</LinearLayout>


AndroidManifest.xml dosyasını açarak internet iznini dahil ediyoruz:

<uses-permission android:name="android.permission.INTERNET" />


MainActivity.java dosyasını açarak içeriğini şu şekilde dolduruyoruz:

package com.yusufborucu.onlineusercount;

import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.Toast;

import com.github.nkzawa.emitter.Emitter;
import com.github.nkzawa.socketio.client.IO;
import com.github.nkzawa.socketio.client.Socket;

import org.json.JSONException;
import org.json.JSONObject;

import java.net.URISyntaxException;

public class MainActivity extends AppCompatActivity {

    TextView onlineUserCount;
    private Socket socket;
    {
        try {
            socket = IO.socket("http://192.168.1.13:3000");
        } catch (URISyntaxException e) {
            throw new RuntimeException(e);
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        socket.connect();

        onlineUserCount = findViewById(R.id.tvOnlineUserCount);

        socket.on("newUser", new Emitter.Listener() {
            @Override
            public void call(final Object... args) {
                runOnUiThread(new Runnable() {
                    @SuppressLint("SetTextI18n")
                    @Override
                    public void run() {
                        Integer online_user_count = (Integer) args[0];
                        onlineUserCount.setText(online_user_count.toString());
                    }
                });
            }
        });

        socket.on("disUser", new Emitter.Listener() {
            @Override
            public void call(final Object... args) {
                runOnUiThread(new Runnable() {
                    @SuppressLint("SetTextI18n")
                    @Override
                    public void run() {
                        Integer online_user_count = (Integer) args[0];
                        onlineUserCount.setText(online_user_count.toString());
                    }
                });
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        socket.disconnect();
    }
}

Burada yaptığımız işlemler;

  • Server tarafında ayağa kaldırmış olduğumuz Socket ile bağlantı kurduk.
  • newUser ve disUser şeklinde emit edilmiş olan değerleri elde edip ekranda bulunan TextView üzerinde gösterdik.


Uygulamayı 2 farklı emülatörde çalıştırıyoruz ve sonuç şu şekilde oluyor:


İyi çalışmalar.

Yusuf Borucu

Benim adım Yusuf. 1993 yılında Şanlıurfa'da doğdum. 2015 yılında Bilecik Şeyh Edebali Üniversitesi'nde Bilgisayar Mühendisliği bölümünden mezun oldum. Şu anda özel bir şirkette Yazılım Geliştirici olarak çalışmaktayım. Yazılıma yönelik uğraştığım, sevdiğim ve ilgi duyduğum teknolojilerden bahsetmem gerekirse; Laravel, MySQL (mevcut çalıştığım şirkette uğraştıklarım). Asp.Net Mvc, MSSQL (önceden ça...

"Android'de Socket.io kullanımı ile online kullanıcı sayısını göstermek" için hiç yorum yapılmadı.

Henüz yorum yapılmamış.

Yorum yap * E-posta adresiniz yayınlanmayacak.