Başlangıç / Bilgisayar Bilimleri / SignalR ile Chat Uygulaması

SignalR ile Chat Uygulaması

Yazımıza SignalR nedir? sorusu ile başlamak istiyorum. Nedir ve ne işe yarar?

SignalR web uygulamalarında server ve client arasında haberleşmeyi asenkron yapıda gerçekleştirmemizi sağlayan bir kütüphanedir.

Client’lar arasında eş zamanlı olarak veri geçişi sağlamak için kullanılan bir kütüphanedir. İçeriğine bakıldığında “WebSockets” mantığı görülmektedir. SignalR ile veride bir değişiklik meydana geldiğinde bu bilgi client ya da diğer cilent’lara bildirilmektedir.

Peki ne işe yarar?

Yapacak olduğumuz örnekte de görüleceği gibi çok kolay ve basit bir kaç adım ile web ortamında chat uygulamasına sahip olmuş olacağız. Bunun için ekstra kod yazma ya da tasarım gibi aşamalara hiç girmeden Asp.Net.MVC projemize SignalR kütüphanesini dahil ederek eş zamanlı chat uygulaması gerçekleştirmiş olacağız. Şimdi kısaca iş mantığını anladığımıza göre Asp.Net.MVC 4 mimarisiyle SignalR kütüphanesi kullanarak chat uygulası projesinin gerçekleştirebiliriz.

 

 

Sonrasında açılan sayfadan

Ve projemiz açıldıktan sonra gerekli olan SignalR kütüphanesi dosyalarını indirmek için: TOOLS => NUGET PACKAGE MANAGER => PACKAGE MANAGER CONSOLE yolunu izliyoruz.

Visual Studio ekranının hemen altında bir console(konsol) açılacaktır. Bu konsol ekranından yüklemek istediğiniz kütüphane veya kütüphaneleri projenize indirebilirsiniz. Konsol ekranına “Install-Package Microsoft.AspNet.SignalR” yazıp “Enter” a basarak paketin tamamen yüklenmesini bekleyiniz.

Konsol ekranında yapmış olduğumuz işlem sonucunda gerekli olan JavaScript ve .Dll dosyaları projemize yüklenmiş bulunmaktadır.

Bu aşamadan sonra projemize “ChatHub.cs” adında “SignalR Hub Class” ekliyoruz.

“ChatHub.cs” isimli SignalR Hub Class sınıfımızın içeriği :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

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

Burada yapmış olduğumuz işlem Send adında bir metod yazarak Chat anında sohbet akışını gerçekleştirecek olan işlemleri belirtmiş olduk. Bu işlemler sohbet içerisinde string olarak tanımlanan, kullanıcıya ait isim ve kullanıcıya ait mesaj bilgisidir.

Bu aşamadan sonra “Startup.css” sınıfını oluşturmalıyız. Sınıfımızın içeriği aşağıdaki gibi olmalıdır.

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChatUygulamasi.Startup))]

namespace SignalRChatUygulamasi
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
           
            app.MapSignalR();
        }
    }
}

“Startup.cs” sınıfımızı oluşturduktan sonra yapmamız gereken işlem Controller sınıfı eklemek ve View dosyasını oluşturmaktır. MVC ile beraber Home klasörü içerisinde proje için gerekli olmayan dosyaları kaldırabilirsiniz. Şimdi ise HomeController.cs isimli sınıf içerisine aşağıdaki gibi “Indez” Action’ın View dosyasını oluşturuyoruz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SignalRChatUygulamasi.Controllers
{
    public class HomeController : Controller
    {
       
        public ActionResult Index()
        {
            return View();

        }
        [HttpPost]
        public ActionResult Create()
        {
            return View();
        }

    }
}

Sonrasında Views Klasörü içerisinde Home klasörü altında oluşturduğumuz “Index.cshtml” dosyamızın içeriğini aşağıdaki gibi düzenliyoruz. Burada view katmanında gerekli olan JavaScript kodlarımızı yazıp ayarladıktan sonra projemiz derlemeye hazır durumdadır.

@{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.0.1.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>
        
        <br /><label for="txtUserName">Kullanıcı Adınız: </label> @Html.TextBox("txtUsername")
        <br /><br/>
        <label for="txtMessage">Mesajnız:            </label> @Html.TextBox("txtMessage") <button id ="btnSendMessage">Gönder</button>
    </div>
    <div id="messages"></div>
</body>
</html>

Microsoft Visual Studio Asp.Net.MVC 4 ve SignalR ile chat uygulaması yapmış olduk. Umarım yararlı olmuştur. Son olarak uygulamamızın ekran görüntüsü aşağıdaki gibidir.

Asenkron olarak hem chrome hem de explorer üzerinde uygulama açık ve aynı anda mesajlaşma eş zamanlı olarak gerçekleşmektedir. Bu işlemi yapabilmek için veritabanı kullanmadık ya da verileri kayıt etmedik sadece SignalR kütüphanesini kullandık. Bu ve bu gibi işlemeler için SignalR kullanarak sizde daha gelişmiş uygulamalar yapabilirsiniz.

Projenin kaynak kodlarını buradan indirebilirsiniz!

Kontrol Ediliyor

Telefonun olmadığı dünyalar

Günümüzde telefon artık bir organımız haline geldi. Gece gündüz en çok onunla etkileşimde bulunuyoruz. Birçok …

Bir Cevap Yazın