Svelte ve SignalR ile Chat Uygulaması

Bu yazıda Svelte ve SignalR kullanarak uygulama içi kullanıcılar ile gerçek zamanlı mesajlaşmak için chat uygulaması oluşturacağız.

.NET Core ile API projesi olusturalim

Aşağıdaki resimdeki gibi bir API projesi oluşturalım.

Devamında .NET 6.0 versiyonunu seçelim. Sonraki ekranda projemize isim verelim ve projemizin açılmasını bekleyelim.

SignalR Hubs

Hub’lar kısaca projemizde anlık iletişime olanak sağlayan birimlerdir, iletişim kurmak ve veri alışverişini sağlarlar. Bu uygulamada sadece bir Hub kullanacağız ancak isteğe göre birden fazla hub ile daha farklı veri alışverişleri sağlayabiliriz.

Hubs adında bir klasör oluşturalım ve aşağıdaki kodları ChatHub.cs class’ı açıp ekleyelim.

Program.cs dosyamızdaki gereksiz kodları silip aşağıdaki gibi sadeleştirelim. Ayrıca SignalR ve Cors ayarlarını da aşağıdaki gibi yaptığımıza dikkat edin. ChatHub’ı API’mıza eklemek için öncelikle using SignalRChat.Hubs eklemesini yaptık ve 18. satırda /chatHub endpointi üzerine eklemiş olduk. 7-13 satırları arasında ve 19.satırda gerekli CORS ayarlamamızı yaptık, bu sayede herhangi bir client portu üzerinden chat uygulamamıza erişimi açmış olduk.

Svelte projesi olusturalim

Aşağıdaki şekilde .NET proje klasörümüzde Vite.js ile Svelte projesi oluşturalım.

Projemizi çalıştırmadan önce @microsoft/signalr projeye kütüphanesini ekleyelim.

npm i @microsoft/signalr

Svelte projemizin App.svelte dosyasında script tag’ları arasına aşağıdaki kodu ekleyelim.

  import { HubConnectionBuilder } from "@microsoft/signalr";
  import { onMount } from "svelte";

  let connection;
  let connectionId;
  let message = "";
  let allMessages = [];
  onMount(() => {
    connection = new HubConnectionBuilder().withUrl("http://localhost:5280/chatHub").build();
    
    connection.start()
    .then(() => {
      connectionId = connection.connectionId;
    }).catch(() => {
      connectionId = null;
    });

    connection.on("ConnectMessage", function (connectionId, message) {
      allMessages = [...allMessages, { user: connectionId, message }];
    });

    connection.on("DisconnectMessage", function (connectionId, message) {
      allMessages = [...allMessages, { user: connectionId, message }];
    });
    
    connection.on("ReceiveMessage", function (user, message) {
      allMessages = [...allMessages, { user,message }];
    });
  });

Script kod bloğunda dikkat edilecek kısımlar;

onMount ile yani Svelte uygulamamız ilk açıldığında, oluşturduğumuz API’ımıza bağlantı isteği atmak. (chatHub endpointi önemli!)
ConnectMessage, DisconnectMessage, ReceiveMessage bizim API’ımızda tanımladığımız ve veri alışverişinin olduğu fonksiyonlar olmalı.

Ekranda gösterilecek kısımda da kullandığımız kod blokları aşağıdaki gibi. Buton’un on:click metodunda SendMessage fonksiyonuna istek gittiğine dikkat edelim. Aşağıdaki kısımda da gelen/giden mesajların yazıldığı bir kısım var.


<div class="d-flex justify-content-between">
  <label>user id</label>
  <input type="text" value={connectionId} />
</div>

<div class="d-flex justify-content-between">
  <label>message</label>
  <input type="text" bind:value={message}/>
</div>

<button style:margin="20px"
  on:click={() => {
    connection.invoke("SendMessage", connectionId, message).catch(function (err) {
      return console.error(err.toString());
    });
    
    message = "";
  }}
>
  send message!
</button>

<div>
  {#each allMessages as item}
    <div>{item.user}: {item.message}</div>
  {/each}
</div>

Chat uygulamamizi deneyelim

Uygulamız 5173 port’unda aşağıdaki çalışmaktadır ve uygulamaya bağlanan, ayrılan ve mesaj gönderen kullanıcıların mesajlarını aşağıdaki gibi göstermektedir.

Bu ve benzeri diğer yazılara, içeriklere veya bana ulaşmak için;