ChatChatChat ～シンプルなチャットを作る～

UnityのWebGL出力に簡単に無料でグローバルランキングを実装できる仕組みを考えてみたの続きになります。

まず、 https://github.com/divide-by-zero/GSSA/ をチェックアウトし、
projects/Assets/Samples/Empty/Sample1_ChatChatChat/ChatChatChat.unity を開きます。

※こちら、ある程度作ってあるけれど重要なところが空のプロジェクトです。　完成品はCompleteフォルダ配下にあるので、チマチマと講座なんてみるより完成品見た方が早い！　というかたはそちらを見てくれればいいと思います。

0.下準備

元記事にもあったように、GoogleSpreadSheet側の準備と、WebアプリケーションとしてのURL取得、SpreadSheetSettingsのinspectorへのURLのセットが済んでいる事を前提に進めていきます。

初期のソースコードは

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using GSSA;
using UnityEngine;
using UnityEngine.UI;

public class ChatChatChat : MonoBehaviour
{
    [SerializeField] private Text logText;
    [SerializeField] private InputField nameInputField;
    [SerializeField] private InputField messageInputField;

    void Start ()
	{
        messageInputField.onEndEdit.AddListener(SendChatMessage);
	    StartCoroutine(GetChatLogIterator());
	}

    private void SendChatMessage(string s)
    {

    }

    private IEnumerator GetChatLogIterator()
    {
        while (true)
        {

            yield return new WaitForSeconds(5.0f);
        }
    }
}

以上な感じで、実行しても何も起きない状態です。

徐々に処理を追加していきます。

1.メッセージでエンターを押したらGSSA経由で保存する

NameのInputFieldとMessageのInputFieldは用意してありonEndEditにAddListenerでSendChatMessageを呼ぶところまではできています。　が、中身が空なので、何もできていない状態です。
ここで、onEndEdit＝Enterキー押下のたびに名前とメッセージをSpreadSheetに登録するよう処理を書きます。

    private void SendChatMessage(string s)
    {
        var so = new SpreadSheetObject("Chat");//Chatシート用のSpreadSheetObject作成
        so["name"] = nameInputField.text;//"name"列に名前用InputFieldのtextをセット
        so["message"] = s;//"message"列にはメッセージ用InputFieldのtext = onEndEditで渡される文字列(s)をセット
        so.SaveAsync();//SpreadSheetへ保存
        messageInputField.text = "";//サーバーに送信したので、手元の文字はクリア
    }

この時点で名前を入れて、メッセージを入力してエンターを押すたびに、サーバに1行データが保存されるようになるはずです。
＜EX＞

2.一定時間間隔で、ログ取得する

すでにサーバーにはデータがたまっているので、たまったデータを取得して、画面に表示すればチャットの大枠の出来上がりです。

上の何もない空間がTextField(logText)なので、ここにサーバーから取得したログを表示いれてあげます。

    private IEnumerator GetChatLogIterator()
    {
        while (true)
        {
            var query = new SpreadSheetQuery("Chat");//Chatシート用のQueryオブジェクト作成
            query.OrderByDescending("createTime").Limit(20);//生成日時の大きい順にソートして、最新20件を取得
            yield return query.FindAsync();//取得処理(yield returnで、サーバーから返却されるまで待機する）

            logText.text = "";
            foreach (var so in query.Result.Reverse())//取得できた結果をReverseで逆転（↑で生成日時の新しい順でソートしてしまっているので）
            {
                logText.text += so["name"] + ">" + so["message"] + "\n";
            }
            yield return new WaitForSeconds(5.0f);//5秒待ってあげてから、またサーバーからデータ取得
        }
    }

キモは、queryにOrderByDescendingでcreateTimeを指定して、生成日時の大きい＝新しいデータ順にしているところ。
＋Limitに20を指定して、最新データ20だけに抑えているところです。
これをしないと、表示しきれないほどのデータを毎回サーバーから取得しようとするので、通信量がなかなかな事になりかねません。

しかし、これでもまだ無駄が多いです。

SpreadSheetSettingのIs Debug Log Outputにチェックを入れて、通信ログを取得するとわかるのですが

常に最新データ上20件を取得するので、まったくデータが更新されていなくても同じデータが5秒に1回来てしまいます。
これは・・・あかんですよ・・・。

3.既に取得しているログはいらない

そんなわけで、↑これに尽きるんですが、どうやってすでに取得したものかどうかを判断するか。
今回の例だと、自動で生成されるcreateTimeを保持しておいて、Queryオブジェクトに条件を追加すればよさそうです。

最後に取得した時間(long)を取っておくための変数
private long lastGetTime;をフィールド変数として用意し、
Queryオブジェクトに、保持しているlastGetTimeよりも新しいデータだけほしいというWhereを追加してあげます。
query.OrderByDescending("createTime").Limit(20); →query.OrderByDescending("createTime").Where("createTime",">",lastGetTime).Limit(20);

加えて、この変更によって、Queryで返却される件数が0の場合があります（データ更新が無い場合、lastGetTimeよりも新しいデータが無いため）
そのためのif追加や、Logを継ぎ足していくだけではなく、表示しきれない範囲分は消していかなくてはいけないため、いきなりlogTextにログを追加するのではなく、Listの形で表示分の文字列リストを作成してからlogTextにセットするようにします。

    private List<string> chatLogList = new List<string>();
    private long lastGetTime;

    private IEnumerator GetChatLogIterator()
    {
        while (true)
        {
            var query = new SpreadSheetQuery("Chat");
            query.OrderByDescending("createTime").Where("createTime",">",lastGetTime).Limit(20);//ローカルで保持していない最新データ上限20件に絞る
            yield return query.FindAsync();

            if (query.Count > 0)//有効なデータが無い場合は何もしない
            {
                foreach (var so in query.Result.Reverse())
                {
                    chatLogList.Add(so["name"] + ">" + so["message"]);//いきなりlogTextに入れるのではなく、一旦Listに追加
                    if (chatLogList.Count > 17) chatLogList.RemoveAt(0);//画面に収まりきらない部分(17以上)からは古いデータを削除
                }
                logText.text = string.Join("\n", chatLogList.ToArray());//Listを改行でjoinしてlogTextにセット
                lastGetTime = (long)query.Result.First()["createTime"];//createTimeの新しい順に並んでいるので、先頭(First)のcreateTimeを保持しておく。
            }

            yield return new WaitForSeconds(5.0f);
        }
    }

※要注意！：createTimeは実際にはlongでデータが入っていますが、SpreadSheetObject上ではobject型なので、よしなにキャストしてあげる必要があります

この修正により、ローカルにあるデータは来なくなるので、通信量の削減につながります。

最後に

たかが、チャット。　しかも5秒に1回しか更新しない、プル型のチャットですが、いろいろな基本が詰まっており、これが出来れば大体のことができるんじゃないかと思ってます。
次回は、実際にゲームにランキング機能を付けて行きたいと思います。