ランキングを偽装させないゲームをつくるためにはクライアントサイドでは描画処理のみをおこなうようにして点数管理などの処理はサーバーサイドで管理するようにするしかなさそうです。これはクライアントサイドとサーバーサイドでデータをやりとりしなければならないことを意味します。そこで今回はゲームをつくるための準備として簡単なチャットを作成します。

タイトルとメッセージを入力してからSend Messageボタンを押すとタイトルとメッセージが表示されます。また別のタブで同じページを開いて同じようにメッセージをおくるとこれまで開いていたタブでも新しいメッセージを確認することができます。ただし後から開いたタブではこれまでに投稿された内容をみることはできません。また保存機能はありません。なので最初に開いたときは投稿内容はなにもありません。

SignalRを使って簡易チャットをつくってみる

チュートリアル: ASP.NET Core SignalR の概要 JavaScript による SignalRを見ながら作業をすることにしました。

上記のページに書かれている方法でSignalR クライアント ライブラリを追加します。

[Choose specific files](特定のファイルの選択) を選択して dist/browser フォルダーを展開し、signalr.js と signalr.min.js を選択する方法だと取得されたJavaScriptのファイルの階層がずいぶん深くなります。また一度取得したファイルを使い回すことはできないのでしょうか?

実際にやってみましたが問題ありません。上記のページに書かれている方法にともなって別のところにファイルができたり、既存のファイルが書き換えられることはなさそうです(実際にはlibman.jsonというファイルが生成されているが…)。

ChatHubクラスを作成する

次にChatHubクラスを作成するように書かれていますが、ファイル名はこれでなくてもかまいません。少しずつ変えてみて、どこは変更してもいいのか、どの部分は勝手に名前を変更してはいけないのかなどを試行錯誤してみました。鳩でもわかるC#管理人はChatHubTest1というクラス名で作成してみました。実際クラス名にあるようにテストだし、これから何回テストするかわかりません。1回目のテストです。

OnConnectedAsyncメソッドはハブとの新しい接続が確立されると呼び出されます。またOnDisconnectedAsyncメソッドは接続状態を切断したとき、ブラウザタグを閉じたり、ページをリロードしたり、GoBackしたときに呼び出されます。

SendMessageメソッドは接続されたときや切断されたとき、ユーザーが送信ボタンを押してメッセージを送信したデータを受け取ったときに、データをすべてのユーザーに送り返すときに呼び出されます。

Program.csの変更

SignalR 要求が SignalR に渡されるように SignalR サーバーを構成します。Program.cs ファイルを以下のように変更します。

レイアウトを作成する

次にクライアントサイドの処理を示したいのですが、その前にNET 6.0をエックスサーバーにインストールするで作成したサンプルページがあまりにも雑なのでレイアウトを整えます。そのためにプロジェクトのフォルダのなかにあるPages\Sharedフォルダのなかに_Layout2.cshtmlというファイルを作成します。そしてここに以下のように書きます。

一番上にGlobal.BaseUrlとありますが、これは以下のように定義しています。要はサブディレクトリで公開するときにややこしくなるのでデバッグ時とじっさいにサーバーにアップするとき用にわけているわけです。

ページを作成する

ChatTest.cshtmlというファイルをPagesフォルダ内に作成して以下のように書きます。

深い階層のページでも動作するか?

さて1階層目にある場合はこれで動作することが確認できますが、深い階層にあるページの場合はどうなるのでしょうか? 書き換えが必要な部分がでてくるのでしょうか?

そこでPagesフォルダ内にフォルダを作成し、さらにそのなかにフォルダを作成してdeep\and\deep\ChatTestSecond.cshtmlというファイルを作成します。そして上記と同じコードを書きます(ViewData[“Title”] = “チャットのテスト”;の部分は変更したほうがいいかも)。

すると何の問題もなく動作することがわかります。

実はこの行だけ変更が必要(階層が異なると相対urlではうまくいかない)だったのですが、@baseurlが自動的に変更されるのでうまい具合に動作してくれるのです。またそのような事情でJSファイルとして独立させずにこの場所に書くことにしました。

タイトルとメッセージを入力してからSend Messageボタンを押すとタイトルとメッセージが表示されます。また別のタブで同じページを開いて同じようにメッセージをおくるとこれまで開いていたタブでも新しいメッセージを確認することができます。ただし後から開いたタブではこれまでに投稿された内容をみることはできません。また保存機能はありません。なので最初に開いたときは投稿内容はなにもありません。