Chat機能があるWebアプリを作成したい

0

0

背景

練習用Webアプリの仕様を考えていたところ、アプリ内で連絡が取れたら便利なように思いました。

もちろん、世の中には色々と便利なチャットアプリはありますが、アプリ内で連絡がとれるとアプリの使用率は向上し、かつ、アプリ内で情報を完結することができます。

具体的な連絡方法はチャットを考えており、重要な連絡はメールで通知が来るような仕様を考えております。しかし、Webアプリにチャット機能を実装したことがないため、その実装方法を調査しました。

手法

「Chat app ASP.NET」で検索すると、パッケージを使わない方法やTalkJSやPusherといったライブラリを使う方法が紹介されていました。しかし、その中でも圧倒的に情報量が多かったのが、SignalRというnuGetパッケージを使った方法です。microsoftの文書や個人のブログ、hands-onの動画もあったため、ひとまずSignalRについて調べることにしました。

以下、Microsoftの公式文書、Introduction to SignalR、https://learn.microsoft.com/en-us/aspnet/signalr/overview/getting-started/introduction-to-signalr　を参考文書としてまとめました。

SignalR

SignalRとは?

SignalRは、ASP.NET を用いたアプリ開発のためのライブラリで、アプリにリアルタイムなwebの機能を簡単に追加することができます。より技術的な表現をすると、SignalRはserver側からclientのJavaScriptの関数を呼ぶAPIを提供します。このAPIを利用することによって、server – client間の接続を自動で管理することが可能となり、chatアプリのように1人のユーザーから接続のあるユーザーへのメッセージの送信を実現することができます。

SignalRを使う利点

SignalRを使用する利点は、あらかじめ用意されている大量の関数です。ASP.NETを用いてchat appを開発する方法は、SignalRを利用するだけではありません。SignalRはWebSocketというprotocolを用いていますが、SignalRを介してではなく、直接使用することもできます。しかし、その際に必要となるいくつかの関数は自分で書く必要があり、SignalRを用いることによって、その手間を省くことができます。

調査

参考教材の調査

SignalRは、人気のあるライブラリのため、多くの人がチュートリアルを用意してくれています。

1. Microsoft 公式文書, ‘Tutorial: Get started with ASP.NET Core SignalR‘
2. Nick Proud, ‘Create Your Own Chat App: SignalR Mastery in C# & ASP.NET‘
3. Milan Jovanovic, ‘Building Real-Time Applications With SignalR & .NET 7‘
4. tutorialsEU – C#, ‘SignalR in ASP.NET and C# – Building real-time functionalities‘

上記の他にもあり、色々見てみましたが、今回は1と2を選びました。選んだ理由は、動画の解説が見たかったこと、そして英語が聞き取りやすかったためです。また、2は1のMicrosoftの公式ドキュメントをさらに深掘りして解説、という形式だったため、ひとまず、Microsoftの公式ドキュメントを見てみることにしました。

成果物のデモ

microsoftのチュートリアルをもとに、とりあえず動かすことができました(idやメソッドの綴りが誤っており、半日ほど時間を潰しましたが。)。フレームワークは.NET MVC、JSのライブラリはsignalR.js、そしてnuGetパッケージはSignalRChat.Hubsを用意することで実装することができました。

しかし、実際にアプリに組み込むことを考えると、足りない点はいくつかあります。

• 送信相手及びグループを作成する機能を実装したい
• メッセージを保存し、後から接続したユーザーにメッセージを表示したい

処理の概要

※左上のlayerから流れを追うことができます。

// Program.cs
builder.Services.AddSignalR();
app.MapHub<ChatHub>("/chatHub");

// chat.js
var connection = new signalR.HubConnectionBuilder().withUrl("chatHub").build();

connection.start().then(function () {
    document.getElementById('sendButton').disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

Information: WebSocket connected to wss://localhost:7150/chatHub?id=feiGHopeRfDip3PSVjrexw.

document.getElementById('sendButton').addEventListener('click', function (event) {
    var user = document.getElementById('userInput').value;
    var message = document.getElementById('messageInput').value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
})

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

connection.on('ReceiveMessage', function (user, message) {
    var li = document.createElement('li');
    document.getElementById("messagesList").appendChild(li);    
    li.textContent = `${user} says ${message}`;
});

参考文献

• signalr.jsのコメント
• Microsoft 公式文書, ‘Tutorial: Get started with ASP.NET Core SignalR‘
• Nick Proud, ‘Create Your Own Chat App: SignalR Mastery in C# & ASP.NET‘

まとめ

WebアプリにChat機能を実装するため、SignalRについて調査しました。microsoftのチュートリアルや解説動画から、簡単なアプリの開発とその処理の流れを理解することができました。

また、今回の調査によって、Chat機能を実装するための課題を把握することができました。

• 送信相手及びグループを作成する機能を実装したい
• メッセージを保存し、後から接続したユーザーにメッセージを表示したい

メモ

WebSocket

• 2層型のprotocol、主にclient – server間のCommunication Channelで使用される。
• クライアント – サーバー間で行き来する双方向の通信である。
• WebSocketを用いて立ち上げた通信は、参加者が通信を切らない限り続く。

WebSocketの使用が推奨される状況

• リアルタイムのwebアプリを開発するとき
• チャットアプリを開発するとき
• ゲームアプリを開発するとき

参考文献

• wallarm, “What is WebSocket and How it Works?”, https://www.wallarm.com/what/a-simple-explanation-of-what-a-websocket-is

Source map error

事象

Source map error: Error: request failed with status 404
Resource URL: https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js
Source Map URL: signalr.min.js.map

とりあえずmicrosoftのチュートリアル通りに進めたところ、開発者ツール上で上記のような警告がされました。警告のため、普通に動かす分には問題ないのですが、少し気になったため、何を言っているのか調べてみました。

原因

「そもそも、source mapとはなんだ」を解消するため、こちらの記事を参考にしました。公式文書ではないため、合っているかは定かではありませんが、ある回答を抜粋します。(source map の公式文書ってなんだ。)

.map ファイルはJavaScriptやCSS、そしてTypescriptを縮小化したファイルのためのファイルで、source maps と呼ばれています。あなたがangular.jsファイルを縮小化したとき、読みやすい数千行ものコードは数行の読みにくいコードになります。うまくいけば、あなたはコードを製品に載せることができ、縮小化前のファイルの代わりに使用することができます。あなたがアプリの作成中にエラーが発生した際、source mapがあることによって、縮小化したコードではなく、縮小化前の元のバージョンを見ることが可能になります。もし、あなたがsource mapをもっていなかった場合、縮小化したコードを見なければいけません。

stack overflow, ‘htps://stackoverflow.com/questions/21719562/how-can-i-use-javascript-source-maps-map-files’, 拙訳