Asp.NET MVC 5 ve SignalR İle Chat Uygulaması

Web yazılımlarında temel Server – Client haberleşmesi senkron yani eşzamanlı bir yapıdadır.Kullanıcının gönderdiği talep doğrultusunda sayfa Server’a gider, gerekli işlemler neticesinde sayfa oluşturulur ve cevap olarak Client’a gönderilir.Halk dilinde “sayfanın gidip gelmesi” olarak bilinen ve internet kullanan herkesin bildiği sayfa geçişlerinde ya da form işlemlerinde beklenilmesi aslında bu şekilde bir işlemsel süreçtir.

Eğer ki, Server – Client arasındaki haberleşme asenkron yani eşzamansız bir yapıda gerçekleştiriliyorsa bu web programlama dilleriyle gerçekleştirilemeyeceği için Ajax, JSon vs. gibi yan teknolojiler söz konusu olmalıdırlar.Bu teknolojiler sayesinde görsel ve işlevsel olarak esnek ve kullanıcılar açısından oldukça kullanışlı web yazılımları üretebilmekteyiz.Tabi yan teknolojilerle yapılmak istenen işin ağırlığına göre kod yazma ve prosedürel algoritmalar üretmede de bir o kadar çaba sarf etmekteyiz.

Bu yazımızda bahsedilen ya da benzer yan teknolojilere değinmeyeceğim.Gelişmiş teknolojinin getirdiği kolaylıklar yanında, beklenmeyen yapılardan bahsedeceğiz.Örneğin Ajax ile oluşturacağımız bir Chat uygulamasını, SignalR sayesinde beş dakikada yazabilmemizi sağlayan kütüphaneden bahsedeceğiz.

SignalR Nedir?
Web uygulamalarında, Server – Client haberleşmesini asenkron yapıda sağlayan bir kütüphanedir.Türlü türlü yapılarıyla göz dolduran bir FrameWork yapısıdır.”.NET” mimarisi için gerçek zamanlı bir web ortamı sağlar.Bağlı olan Client’lara gerçek zamanlı olarak veri geçişi sağlamak için kullanılan bir kütüphanedir.

Mekanizdamada çalışan “WebSockets” sunucusu eşliğinde, Client’ların Server’ı pool etmesi engellenir.Bu arada SignalR arada bir katman görevi görmektedir.Sunucu veya Client WebSockets desteklenmiyorsa diğer teknolojilere(polling dahil) FallBack yapar.

SignalR ile veride bir değişiklik olduğunda Server bunu Client ya da Client’lara haber vermektedir.

Http’nin Stateless yapısından kurtulmak için “WebSocket” ve “Long Polling” dışında “Forever Frame” ve “Server Sent Events” olarak iki teknik yapı daha sunmaktadır.

Forever Frame, eskimiş bir tekniktir.O yüzden burada bu tekniğe girmeye gerek yoktur.
Server Sent Events, Http protokolünü değiştirmeden browser üzerinden işlem gerçekleştirmektedir.

Peki Gerçek Zamanlı Veri Geçişine Neden İhtiyaç Duyarız?
Bu sorunun cevabını yaşadığınız sanal dünyada çok rahat bir şekilde görebilirsiniz.FaceBook ya da Twitter kullananlar bilirler ki, kendileri bir talep oluşturmadıkları halde bile güncellemeler ya da bildirimler sürekli gerçek zamanlı olarak canlı bir şekilde gözümüzün önünden akmaktadırlar.Kullanıcılar tarafından tetiklenme olmaksızın iletilen ya da güncellenen verilere genellikle “Push” adı verilmektedir.

SignalR’ı tanıttıktan sonra Asp.NET MVC 5 mimarisiyle SignalR kütüphanesini kullanarak Chat uygulamasının nasıl yapılacağına geçebiliriz.

Visual Studio ortamından boş bir Asp.NET MVC 5 projesi açalım.
SignalR’ı Asp.NET MVC 5 ile kullanabilmemiz için gerekli JavaScript ve .DLL dosyalarını projemize entegre etmemiz gerekmektedir.Bu dosyaları projemize ekleyebilmeniz için “Tools > Library Package Manager > Package Manager Console” kombinasyonunu takip etmelisiniz.

Karşımıza bir konsol(console) ekranı çıkacaktır.Bu konsol ekranına “Install-Package Microsoft.AspNet.SignalR” değerini yazıp “Enter” tuşuna basıyoruz.

Konsoldaki yaptığımız işlemler sonucu gerekli JavaScript ve .DLL dosyaları projemize yüklenmiş olacaktır.

Şimdi SignalR ile Chat uygulamamızın programatik kısmına geçebiliriz.
Ben projemize “ChatHub.cs” isminde bir “SignalR Hub Class” ekliyorum.Siz istediğiniz isimde de ekleyebilirsiniz.

“ChatHub.cs” isimli SignalR Hub Class sınıfımızın içeriği aşağıdaki gibi olacaktır.

    public class ChatHub : Hub
    {
        public void Send(string username, string message)
        {
            Clients.All.sendMessage(username, message);
        }
    }

Yukarıdaki kod bloğunu incelerseniz eğer, “Send” isimli metodu ekleyerek Chat anında sohbet akışını sağlayacak program parçacığını belirtmiş oldum.

Şimdi de “Startup.cs” isimli bir sınıf oluşturalım.

using Microsoft.Owin;
using Owin;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
[assembly: OwinStartup(typeof(ChatUygulamasi.Startup))]

namespace ChatUygulamasi
{
    public class Startup
    {
        public void Configuration(IAppBuilder App)
        {
            App.MapSignalR();
        }
    }
}

“Statup.cs” isimli sınıfımızın içeriğide yukarıdaki gibi olmalıdır.

Şimdi tek yapmamız gereken Controller sınıfı eklemek ve View dosyasını oluşturmak.
Ben “Home(Controller).cs” isimli bir Controller sınıfı ekliyorum ve içerisindeki “Index” Action’ının View dosyasını oluşturuyorum.

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

@{Layout = null;}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.6.4.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
    <script src="~/SignalR/Hubs"></script>
    <script>
        $(function () {
            var chat = $.connection.chatHub;
            var $username = $('#txtUsername');
            var $message = $('#txtMessage');
            var $messages = $('#messages');
            $message.focus();
            chat.client.sendMessage = function (name, message) {
                $messages.append('<li><strong>' + name + '</strong>: ' + message + '</li>');
            };
            $.connection.hub.start().done(function () {
                $('#btnSendMessage').click(function () {

                    chat.server.send($username.val(), $message.val());

                    $message.val('').focus();
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <label for="txtUserName">Kullanıcı: </label> @Html.TextBox("txtUsername")
        <br />
        <label for="txtMessage">Mesaj: </label> @Html.TextBox("txtMessage") <button id="btnSendMessage">Mesaj Yolla</button>
    </div>
    <div id="messages"></div>
</body>
</html>

Yukarıda gördüğünüz gibi View katmanında gerekli JavaScript kodlarımızı yazıp ayarladıktan sonra projemizi derleyip çalıştırabiliriz.

İşte Asp.NET MVC 5 ve SignalR Chat Uygulamasını bitirmiş olduk.Chat uygulamamızın kullanımını aşağıdaki videomuzdan daha net görebilirsiniz.

Hepinize iyi çalışmalar diliyorum…

Örnek projeyi buradan indirebilirsiniz.