[ASP.NET Core] SignalR 1 사용해보기

소개

이번에는 ASP.NET Core SignalR을 사용해 보겠습니다.

튜토리얼에서 샘플 프로젝트를 복사했습니다.

Get started with ASP.NET Core SignalR | Microsoft Docs

환경

.NET 5.0.103

인증용

Microsoft.EntityFrameworkCore 버전 5.0.4

Npgsql.EntityFrameworkCore.PostgreSQL 버전 5.0.2

Microsoft.AspNetCore.Identity.EntityFrameworkCore 버전 5.0.4

패키지.json

{
    "dependencies": {
        "@microsoft/signalr": "^5.0.4",
        "ts-loader": "^8.0.17",
        "tsc": "^1.20150623.0",
        "typescript": "^4.2.3",
        "webpack": "^5.24.4",
        "webpack-cli": "^4.5.0"
    }
}

SignalR + 웹팩 + TypeScript

실패한

JavaScript 프레임워크나 Blazor를 사용하지 않을 때는 Webpack과 TypeScript를 사용하여 클라이언트 측 코드를 작성하기 때문입니다.

그래서 개발 환경에 맞게 샘플 코드를 변경했습니다.
(방금 JavaScript 코드에서 TypeScript로 변경했습니다)

하지만 예외가 있습니다.

Uncaught TypeError: Cannot read property 'HubConnectionBuilder' of undefined
    at init (main.page.ts:9)
    at eval (main.page.ts:34)
    at Object../ts/main.page.ts (mainPage.js:259)
    at __webpack_require__ (mainPage.js:282)
    at mainPage.js:322
    at mainPage.js:325
    at webpackUniversalModuleDefinition (mainPage.js:17)
    at mainPage.js:18

해결하다

나는 두 가지 실수를 했다.

webpack.config.js

첫 번째는 "webpack.config.js"에 관한 것이었습니다.

아래와 같이 썼습니다.

webpack.config.js

var path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        'mainPage': './ts/main.page.ts',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'wwwroot/js'),
        library: 'Page',
        libraryTarget: 'umd'
    }
};

"devtool: "eval-source-map""을 추가해야 했습니다.

webpack.config.js

var path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        'mainPage': './ts/main.page.ts',
    },
    module: {
...
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    devtool: "eval-source-map",
    output: {
...
    }
};

'@microsoft/signalr' 가져오기

두 번째는 import "@microsoft/signalr"에 관한 것이었습니다.
아래와 같이 TS 코드를 작성했습니다.

main.page.ts

import signalR from '@microsoft/signalr';

function init() {
    const connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
...
}
init();

하지만 아래와 같이 변경해야 했습니다.

main.page.ts

import * as signalR from '@microsoft/signalr';

function init() {
    const connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
...
}
init();

이제 SignalR을 통해 메시지를 보내거나 받을 수 있습니다.

Use ASP.NET Core SignalR with TypeScript and Webpack | Microsoft Docs

인증

샘플에는 인증이 없기 때문에 누구나 채팅에 참여할 수 있습니다.
로그인을 요구하려면 어떻게 해야 하나요?

먼저 ASP.NET Core ID에 대한 코드를 추가했습니다.

그 후 "ChatHub"클래스에 "[Authorize]"속성을 추가하기만 하면 됩니다.

ChatHub.cs

using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.SignalR;

namespace SignalrSample.Hubs
{
    [Authorize]
    public class ChatHub : Hub
    {
...
    }
}

Authentication and authorization in ASP.NET Core SignalR | Microsoft Docs

클라이언트를 구별

샘플은 모든 클라이언트에 메시지를 보냅니다.

ChatHub.cs

...
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
...

나 자신에게 보내고 싶지 않다면 어떻게 해야 합니까?

SignalR은 클라이언트를 구별할 수 있습니다.
그래서 아래와 같이 변경하면 됩니다.

ChatHub.cs

...
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.Others.SendAsync("ReceiveMessage", user, message);
        }
    }
...

자원

Introduction to ASP.NET Core SignalR | Microsoft Docs

Get started with ASP.NET Core SignalR | Microsoft Docs

Use ASP.NET Core SignalR with TypeScript and Webpack | Microsoft Docs