【13日目】25日間でCocos Creatorでゲームを作る

バリデーションを行い、エラーメッセージを表示する

ユーザー名の制約

• 3文字以上、7文字以下
• 記号は使用禁止

サーバーで受け取ったテキストを見て、バリデーションを行う

1. game-server/index.jsに追記する

indx.js

  console.log("User connected:", socket.id);

  socket.on("login_request", (data) => {
    const username = data.username;

    // 追記 -ここから-
    let errorMessage = "";

    if (username.length < 3) {
      errorMessage = "3文字以上で入力してください。";
    } else if (username.length > 7) {
      errorMessage = "7文字以下で入力してください。";
    } else if (!/^[a-zA-Z0-9ぁ-んァ-ヶー一-龠]+$/.test(username)) {
      errorMessage = "記号は使用できません。";
    }

    if (errorMessage) {
      return socket.emit("login_response", {
        success: false,
        message: errorMessage,
      });
    }
    // 追記 -ここまで-

LoginUIでエラーメッセージを表示できるようにする

1. LoginUI.tsを書き換える

LoginUI.ts

else {
    this.statusLabel.string = data.message ? data.message : "ログイン失敗";
    this.statusLabel.color = Color.RED;
}

動作確認をする

1. ターミナルでサーバーのプロセスが起動中の場合、Ctrl + Cで停止させる
2. サイドプロセスを起動する
   node index.js
3. Cocos CreatorでMenuSceneを立ち上げ条件に合致しないユーザー情報を送信する
   

まとめ

簡易的なものになりますが、エラーハンドリングもこれで完了です。