SignalR ile Gerçek Zamanlı Chat Uygulaması
Asp.Net MVC 5 28 Haziran, 2018

Merhabalar bu yazımda Asp.Net Mvc 5'de SignalR ile Gerçek Zamanlı Chat Uygulaması yapmayı anlatacağım. SignalR'dan fazla detaya girmeden kısaca bahsetmek gerekirse; web uygulamalarında istemci-sunucu arasındaki iletişimi asenkron yapıda sağlayan bir kütüphanedir. Web Soketlerle web uygulamalarında gerçek zamanlı veri iletişimi sağlar. 

Chat uygulamamızda broadcast mesaj(tüm kullanıcılara), özel mesaj(belli bir kullanıcıya) ve grup mesajı gönderme özelliği olacaktır. Html sayfamız açıldığında kullanıcıdan isim ve dahil olmak istediği grup adı bilgileri alınacak ve bu bilgiler mesaj gönderme işlemlerinde kullanılacaktır. 

Uygulamamızda kullanıcı server'a bağlandığında ona bir ConnectionID atanmaktadır. Biz bu ConnectionID'yi kullanarak özel mesaj göndereceğiz. Grup mesajı gönderme işlemi ise aynı gruptaki kullanıcılar arasında olacaktır. 

Öncelikle bir Asp.Net Mvc 5 projesi oluşturalım. 

SignalR ile Gerçek Zamanlı Chat Uygulaması

Listeden "MVC" yi seçelim, "No Authentication" seçili olsun.

SignalR ile Gerçek Zamanlı Chat Uygulaması

"Solution Explorer" içinde proje adına sağ tıklayıp "Manage NuGet Packages" a tıklayıp "Browse" kısmına SignalR yazın ve 2.2.3 versiyonunu indirin. 

SignalR ile Gerçek Zamanlı Chat Uygulaması

Projeye "ChatHub" isimli SignalR Hub Class'ı ekleyin. Mesajlaşma işlemini bu sınıftaki metotlar yapacak.

SignalR ile Gerçek Zamanlı Chat Uygulaması

ChatHub.cs kodları:

// chat işlemlerimizi bu class yapacak.

public class ChatHub:Hub    
{
   // broadcast mesaj gönderir.
   public void sendbroadcast(string name, string message)   
   {
      Clients.All.broadcastMessage(name + " | broadcast msg.", message);
   }
   
   // grup mesajı gönderir.
   public void sendgroup(string name, string message, string groupName)  
   {
      Clients.Group(groupName).broadcastMessage(name + " | group msg.", message);
   }

   // özel mesaj gönderir.
   public void sendtouser(string name, string message, string receiverConId, string selfConId)  
   {
      Clients.Client(receiverConId).broadcastMessage(name + " | private msg.", message); 
      Clients.Client(selfConId).broadcastMessage(name + " | private msg.", message);
   }
   
   // kullanıcıyı gruba ekler.
   public void join(string roomName)  
   {
      Groups.Add(Context.ConnectionId, roomName);
   }      
}

Projeye "Startup.cs" isimli bir sınıf ekleyin. Bu sınıf SignalR işlemleri için gerekli.

SignalR ile Gerçek Zamanlı Chat Uygulaması

Startup.cs kodları:

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
   public class Startup
   {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
   }
}

HomeController'a Chat isimli bir ActionResult ekleyin.

SignalR ile Gerçek Zamanlı Chat Uygulaması

Chat.cstml kodları:

@{
    ViewBag.Title = "SignalR Chat Application";
    Layout = null;
}
<link href="~/Content/style.css" rel="stylesheet" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script>
<script src="~/Signalr/Hubs"></script>
<script src="~/Scripts/chat.js"></script>
<div class="container clearfix" style="width:850px;height:600px;">
    <div class="people-list" id="people-list">
        <div class="search">
            <input type="text" placeholder="User Connection ID" id="kime" style="width:100%;background:#ffffff;color:#000000;" />
        </div>
        <ul class="list" style="list-style:none;padding:0 20px;">
        </ul>
    </div>

    <div class="chat" style="width:590px;">
        <div class="chat-header clearfix">
            <img src="~/Content/images/user.png" alt="avatar" />
            <div class="chat-about">
                <div id="userName" class="chat-with">User Name</div>
                <div id="connID" class="chat-num-messages">Connection ID</div>
                <div id="groupName" class="chat-num-messages">Group Name</div>
            </div>
            <i class="fa fa-star"></i>
        </div> <!-- end chat-header -->

        <div class="chat-history" style="height:381px;">
            <ul style="list-style:none;" id="discussion"></ul>

        </div> <!-- end chat-history -->

        <div class="chat-message clearfix">
            <textarea name="message-to-send" id="message" placeholder="Type your message" rows="3"></textarea>

            <i class="fa fa-file-o"></i> &nbsp;&nbsp;&nbsp;
            <i class="fa fa-file-image-o"></i>

            <label><input type="checkbox" id="grupMesaj" class="form-control text-dark" />Grup Mesajı</label>
        </div> <!-- end chat-message -->

    </div> <!-- end chat -->

</div> <!-- end container -->

Bu işlemleri yaptıktan sonra projeyi derleyip tarayıcıdan localhost:xxxxx/Chat url ine gittiğimizde karşımıza aşağıdaki ekran çıkacaktır. 

Bu ekrandan kullanıcı adı girilip diğer kullanıcılarla mesajlaşılabilir.

 

Uygulamanın son ekran görüntüsü:

Projenin github linki buradadır.

Kodlamaya devam!


Yorumlar

SignalR ile Gerçek Zamanlı Chat Uygulaması
Asp.Net MVC 5 28 Haziran, 2018

Merhabalar bu yazımda Asp.Net Mvc 5'de SignalR ile Gerçek Zamanlı Chat Uygulaması yapmayı anlatacağım. SignalR'dan fazla detaya girmeden kısaca bahsetmek gerekirse; web uygulamalarında istemci-sunucu arasındaki iletişimi asenkron yapıda sağlayan bir kütüphanedir. Web Soketlerle web uygulamalarında gerçek zamanlı veri iletişimi sağlar. 

Chat uygulamamızda broadcast mesaj(tüm kullanıcılara), özel mesaj(belli bir kullanıcıya) ve grup mesajı gönderme özelliği olacaktır. Html sayfamız açıldığında kullanıcıdan isim ve dahil olmak istediği grup adı bilgileri alınacak ve bu bilgiler mesaj gönderme işlemlerinde kullanılacaktır. 

Uygulamamızda kullanıcı server'a bağlandığında ona bir ConnectionID atanmaktadır. Biz bu ConnectionID'yi kullanarak özel mesaj göndereceğiz. Grup mesajı gönderme işlemi ise aynı gruptaki kullanıcılar arasında olacaktır. 

Öncelikle bir Asp.Net Mvc 5 projesi oluşturalım. 

SignalR ile Gerçek Zamanlı Chat Uygulaması

Listeden "MVC" yi seçelim, "No Authentication" seçili olsun.

SignalR ile Gerçek Zamanlı Chat Uygulaması

"Solution Explorer" içinde proje adına sağ tıklayıp "Manage NuGet Packages" a tıklayıp "Browse" kısmına SignalR yazın ve 2.2.3 versiyonunu indirin. 

SignalR ile Gerçek Zamanlı Chat Uygulaması

Projeye "ChatHub" isimli SignalR Hub Class'ı ekleyin. Mesajlaşma işlemini bu sınıftaki metotlar yapacak.

SignalR ile Gerçek Zamanlı Chat Uygulaması

ChatHub.cs kodları:

// chat işlemlerimizi bu class yapacak.

public class ChatHub:Hub    
{
   // broadcast mesaj gönderir.
   public void sendbroadcast(string name, string message)   
   {
      Clients.All.broadcastMessage(name + " | broadcast msg.", message);
   }
   
   // grup mesajı gönderir.
   public void sendgroup(string name, string message, string groupName)  
   {
      Clients.Group(groupName).broadcastMessage(name + " | group msg.", message);
   }

   // özel mesaj gönderir.
   public void sendtouser(string name, string message, string receiverConId, string selfConId)  
   {
      Clients.Client(receiverConId).broadcastMessage(name + " | private msg.", message); 
      Clients.Client(selfConId).broadcastMessage(name + " | private msg.", message);
   }
   
   // kullanıcıyı gruba ekler.
   public void join(string roomName)  
   {
      Groups.Add(Context.ConnectionId, roomName);
   }      
}

Projeye "Startup.cs" isimli bir sınıf ekleyin. Bu sınıf SignalR işlemleri için gerekli.

SignalR ile Gerçek Zamanlı Chat Uygulaması

Startup.cs kodları:

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
   public class Startup
   {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
   }
}

HomeController'a Chat isimli bir ActionResult ekleyin.

SignalR ile Gerçek Zamanlı Chat Uygulaması

Chat.cstml kodları:

@{
    ViewBag.Title = "SignalR Chat Application";
    Layout = null;
}
<link href="~/Content/style.css" rel="stylesheet" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script>
<script src="~/Signalr/Hubs"></script>
<script src="~/Scripts/chat.js"></script>
<div class="container clearfix" style="width:850px;height:600px;">
    <div class="people-list" id="people-list">
        <div class="search">
            <input type="text" placeholder="User Connection ID" id="kime" style="width:100%;background:#ffffff;color:#000000;" />
        </div>
        <ul class="list" style="list-style:none;padding:0 20px;">
        </ul>
    </div>

    <div class="chat" style="width:590px;">
        <div class="chat-header clearfix">
            <img src="~/Content/images/user.png" alt="avatar" />
            <div class="chat-about">
                <div id="userName" class="chat-with">User Name</div>
                <div id="connID" class="chat-num-messages">Connection ID</div>
                <div id="groupName" class="chat-num-messages">Group Name</div>
            </div>
            <i class="fa fa-star"></i>
        </div> <!-- end chat-header -->

        <div class="chat-history" style="height:381px;">
            <ul style="list-style:none;" id="discussion"></ul>

        </div> <!-- end chat-history -->

        <div class="chat-message clearfix">
            <textarea name="message-to-send" id="message" placeholder="Type your message" rows="3"></textarea>

            <i class="fa fa-file-o"></i> &nbsp;&nbsp;&nbsp;
            <i class="fa fa-file-image-o"></i>

            <label><input type="checkbox" id="grupMesaj" class="form-control text-dark" />Grup Mesajı</label>
        </div> <!-- end chat-message -->

    </div> <!-- end chat -->

</div> <!-- end container -->

Bu işlemleri yaptıktan sonra projeyi derleyip tarayıcıdan localhost:xxxxx/Chat url ine gittiğimizde karşımıza aşağıdaki ekran çıkacaktır. 

Bu ekrandan kullanıcı adı girilip diğer kullanıcılarla mesajlaşılabilir.

 

Uygulamanın son ekran görüntüsü:

Projenin github linki buradadır.

Kodlamaya devam!


Yorumlar