ASP.NET Core - SignalR을 사용하는 작은 채팅 앱

10673 단어 signalrcsharpdotnetaspnet
경고! 이 코드는 데모용입니다.

  • 빈 ASP.NET 웹앱을 만듭니다.

    dotnet new web -o TinyChat

  • Program.cs 에서 SignalR 서비스를 추가하고 정적 파일을 제공하도록 설정하고 SignalR 허브를 매핑합니다.

    var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR();
var app = builder.Build();

app.UseStaticFiles();
app.MapHub<ChatHub>("/ChatHub");
app.Run();


  • 프로젝트 디렉터리에서 다음을 포함하는 ChatHub.cs를 추가합니다.

    using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    // this can be invoked from JavaScript
    public async Task SendMessage(string username, string message)
    {
        // to all connections, invoke ReceiveMessage
        await Clients.All.SendAsync("ReceiveMessage", username, message);
    }
}


  • 프로젝트 디렉토리에 폴더wwwroot를 추가합니다. 그런 다음 다음을 포함하는 chat.html를 추가합니다.

    <!DOCTYPE html>
<html>
    <head></head>
    <body>
        <input id='usernameInput' placeholder='username' />
        <input id='messageInput' placeholder='message' />
        <button id='sendButton'>Send</button>
        <ul id='conversationList'></ul>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.8/signalr.min.js'></script>
        <script src='/chat.js'></script>
    </body>
</html>

  • wwwroot에서 다음을 포함하는 chat.js를 추가합니다.

    "use strict";
document.addEventListener('DOMContentLoaded', function() {
var connection = new signalR.HubConnectionBuilder().withUrl("/ChatHub").build();

// Handler for receiving message. This will be invoked by the server.
connection.on("ReceiveMessage", function (username, message) {
    var messageItem = document.createElement("li");
    messageItem.textContent = `${username}: ${message}`; 

    var conversationList = document.querySelector("#conversationList");
    conversationList.prepend(messageItem);
});

// Initiate connection and set callback for error.
connection.start().then(function () {

}).catch(function (err) {
    return console.error(err.toString());
});

// Handler for sending message to the server.
document.querySelector("#sendButton").addEventListener("click", function (event) {
    var username = document.querySelector("#usernameInput").value;
    var message = document.querySelector("#messageInput").value;

    connection.invoke("SendMessage", username, message)
    .catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});
});

  • dotnet run를 사용하여 앱을 실행하고 https://localhost:<port>/chat.html로 이동합니다.

    • 자원
    Microsoft Docs
    EKS + Fargate에서 ArgoCD 사용
    간편하게 코딩한다면 역시 Bootstrap보다 TACHYONS이구나

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage