React .netCore SignalR ile RealTime Mesaj Gönderme

Herkese merhabalar, bu yazımda sizlerle beraber react kullanarak .netCore da açılmış olan bir socket üzerinden bir mesajı almayı veya göndermeyi nasıl yapacağımıza değinmeye çalışıyor olacağım. Örneğimizde açık bir hub üzerine bağlı olan kullanıcıların sadece mesaj yazıp gönderdiği ve bağlı olan tüm istemcilere bu mesajın nasıl yansıdığını örnekliyor olacağız.

.netCore için ;

dotnet cli kullanarak eğer dotnet yüklü buradan yükleyebilirsiniz.

dotnet new webapi

diyerek projemizi oluşturuyoruz.Daha sonra .net projemize ilgili bağımlılığımızı aşağıdaki gibi ekliyoruz.

dotnet add package Microsoft.AspNetCore.SignalR.Client

bağımlılığımızı ekledikten sonra kök dizinde Hub adında bir klasör oluşturup içerisine ChatHub adında yeni bir c# classı oluşturuyoruz ve içerisine ilgili kodlarımızı yazıyoruz.

Yukarıdaki örnekte SendMessage adındaki fonksyon tetiklendiği zaman ReceiveMessage fonksiyonunu dinleyen bütün istemcilere SendMessage fonksiyonuna gelen string mesajın gönderileceğini söylüyoruz.

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
namespace SignalRChat.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string message){
await Clients.All.SendAsync("ReceiveMessage", message);
}}}

fonksiyonumuzu yazdıktan sonra Startup.cs dosyamıza giderek aşağıdaki gibi signalR kullanacağımızı servise register ediyoruz ve React projemizin çalışacağı 3000 numaralı porta Cors için izin veriyoruz.

services.AddSignalR();
services.AddCors(opt=>opt.AddPolicy(name:"CorsPolicy",builder=>builder.WithOrigins("http://localhost:300").AllowAnyMethod().AllowAnyHeader().AllowCredentials()));

oluşturmuş olduğumuz Hub ve policiy’i aşağıdaki gibi kullanıyoruz.

Yygulamanın az önce yazmış olduğumuz CorsPolicy adlı policiy kullanacağını söylüyoruz ve Hub için bir url belirliyoruz.

Daha sonra dotnet run diyerek projemizi ayağa kaldırabiliriz.

React için;

npx create-react-app my-app --template typescript

diyerek projemizi oluşturuyoruz ve ardından

npm install @microsoft/signalr --save

bağımlılıklarımızı yüklüyoruz.

import React, {useEffect, useState} from 'react';
import './App.css';
import {HubConnection, HubConnectionBuilder} from "@microsoft/signalr";
function App() {
const [text,setText]=useState<string>("");
const [msgList,setMsgList]=useState<Array<any>>([])
const [hubConnection, setHubConnection] = useState<HubConnection>()
useEffect(() => {
createHubConnection();
}, [])
const createHubConnection =async () => {
const hubCn = new HubConnectionBuilder().withUrl("http://localhost:5000/chat").build()
try {
await hubCn.start();
console.log(hubCn.connectionId)
setHubConnection(hubCn)
} catch (e) {
console.log("e", e)
}
}
const sendMsg=()=>{
if(hubConnection){
hubConnection.invoke("SendMessage",text).then((res)=>{})
}
}
    useEffect(()=>{
if(hubConnection){
hubConnection.on("ReceiveMessage",(mesaj:string)=>{
setMsgList((prevState)=>{
return prevState.concat(mesaj)
} ))
})
}
},[hubConnection])
return (
<div className="App">
<header className="App-header">
<input value={text} onChange={(e)=>{setText(e.target.value)}} />
<button onClick={sendMsg}>Mesaj Gönder </button>
</header>
      <div>
<h2>Mesajlar</h2>
<ul>
{msgList.map((item)=>{
return (
<li>{item}</li>
)
})}
</ul>
</div>
</div>
);
}
export default App;

Kodları açıklayacak olursak ; Bağımlılığımızı dahil ettikten sonra inputbox için bir text stateti oluşturuyoruz, mesaj listemizi için bir array listesi oluşturuyoruz ve connection tutacağımız bir state oluşturuyoruz.

Uygulamamız çalışınca createHubConnection methoduna çalıştırıp hub ayarlarımızı gerçekleştirdikten sonra c# uygulamamızın çalıştığı adresi verip connect oluyoruz.

Butona tıklayınca c# tarafında yazmış olduğumuz SendMessage methoduna invoke ediyoruz ve string text parametremizi gönderiyoruz. Useeffect’de

hubConnection on diyerek ReceiveMessage fonksiyonunu dinliyoruz dinlediğimiz connection tetikleniyor ve mesaj dinleyen tüm istemcilere aktarılıyor.

Daha Fazlası için youtube daki örneğime,kendi resmi dökümanlarına bakabilirsiniz.

Youtube örnek : https://www.youtube.com/watch?v=B7vNsmTnkG4&feature=youtu.be

Microsoft Docs :https://docs.microsoft.com/tr-tr/aspnet/core/tutorials/signalr?view=aspnetcore-5.0&tabs=visual-studio

Herkese İyi Çalışmalar Dilerim.