Cloud/AI - 1:1 Chat with Moderation (Difficulty: 5)

CreatiCode

Introduction

In this tutorial, you will learn to build a simple 1:1 chat between 2 users on their own computers. All the chat messages will be moderated (reviewed), and any inappropriate message will be rejected. All CreatiCode projects that implement a chatroom are required to use the same moderation as shown in this project.

About Cloud Data

MIT Scratch offers “cloud variables”, which allows all users running the same project on their own computers to read or write the same variable. However, these variables are only limited to numbers (can’t store text in them) and for at most 256 digits.

CreatiCode playground offers a more powerful way to store and share data between computers. It is called “cloud data variables”. There is no limit on what you can store in these cloud data variables, and you can dynamically define new cloud data variables.

Demo Project

The completed project is shared at this link:

play.creaticode.com/projects/66ef784557566f00396e83ae

Please make a remix of it. This tutorial will help you understand how it works quickly, and then you can build new chat projects based on it.

How Cloud Data is used for setting up a new chat

Before we get into details, it will be helpful to explain the basic idea of how we are using cloud data variables to communicate between the 2 users on their own computers.

First, when the host user starts a new chat, we generate a random number to be used as the “room ID”. When the guest user joins a chat, they have to specify exactly the same ID. This way, each new chat will have different IDs, and all messages for this chat session will use this ID.

Suppose the room ID is 123. Then the host computer will create a new cloud data variable “host-123”, and its value will be the name of the host user. It will also create another cloud data variable “guest-123”, which will be “pending”. Then, when the guest user joins the room, they will set the “guest-123” variable to the full name of the guest user.

How Cloud Data is used for setting up a new chat

For passing the messages between these 2 computers, 2 other cloud data variables are used: “host-msg-123” and “guest-msg-123”.

For the host user, each time they enter a new message, it will be appened to the “host-msg-123” cloud data variable with an increasing ID and a separator of “&&”.

For example, if the host user says “hi”, then that variable becomes “&&1–hi”. If the host says “good”, then that variable becomes “&&1–hi&&2–good”. When the guest computer sees the updated value of that variable, the message is added to the chat.

Note that the cloud data variables are updated every 0.5 seconds, so there will be a small delay before other computers get the updated value.

Now, let’s look at the program.

Part 1 - Startup Screen

When the green flag is clicked, we will show a startup screen with 2 buttons and a textbox.

The top button is for the host user to start a new chat with a random ID. For the guest user, they need to input the same random ID and then click the bottom button to join that chat.

Below is the code for adding these 3 widgets:

Part 2 - Initialize Variables

A few variables will be used at both the host and guest computers. It is a good habit to initialize them at the beginning:

other msg ID: the ID of the last message processed from the other computer. Any message with a new ID will need to be added to the chat.
my msg ID: the ID of the next message that will be stored from this computer.
my message: the content of the message cloud data variable, which will keep getting longer and longer as this user inputs more chats.
**messages

Part 3 - Handle Chat Creation

When the top button is clicked, the host computer does a few things:

The host will see this screen now:

After showing this screen, the host computer moves on to wait for the guest to join.

Part 4 - Wait for Guest to Join

To wait for the guest user to join, the host computer set the value of the host name variable to their full name, and the guest name variable to “pending”. Then it will enter a forever loop until the guest name is no longer “pending”. After that, the host will run the “check for messages” block to repeatedly check for new messages from the guest.

Part 5 - Guest user joins

At the guest user’s computer, we read the room ID entered by the user, then check if the cloud variable “guest-room ID” is “pending”. If it is empty, then the room doesn’t exist; or if it is the name of another person, that means another guest has already joined. So we can only proceed if the guest name variable is still “pending”.

After joining the chat, we shot the chat window, then update the guest name variable with this user’s full name, so that the host computer will detect that some new user has joined.

Lastly, we also start the “check for messages” block to repeatedly check for new messages from the host.

Part 6 - Check and Send New Messages

When either the host or the guest enters a new chat message, we use the “get moderation result” block to check if that message is appropriate. If the result is “Pass” (as opposed to “Fail”), we will use it; otherwise we tell the user that message has been rejected. Note that this step is required for all chat projects.

For approved messages, we append it to “my message” using an ID (“my msg ID”) that increases every time. Then we add this message to the local chat window as the host or guest, and also store it in the cloud data variable “host-msg-room ID” or “guest-msg-room ID”.

Part 7 - Check for messages from the other computer

When the chat is running, both host and guest computers will keep checking the cloud data variable that contains the message list from the other person.

For example, for the host computer, if the room ID is 123, then it will be checking the content of “guest-msg-123” every 0.5 seconds.

Part 8 - Parse the Other User’s Message

Since the cloud data variable contains a list of all messages from the other user, we need to parse it. We first split it with “&&” and store the parts in the “messages” list. This way, we can look at each message one by one. Note that since the variable starts with “&&”, the actual messages only start at index 2 for the “messages” list.

For each message, we can split it by “–”, then the first part is the ID of that message.

Part 9 - Display New Messages

Now, we just need to check if the ID of each message is no less than the largest ID we have already processed (stored in “other msg ID”). If so, we add this new message to the chat, and also increase the “other msg ID” by 1.

Enhancement

This project is only showing the basic building blocks for an online chat. There are many ways you can try to improve it. Here are some interesting ideas:

Support more than 2 users: You can try to extend it to allow any number of users to join the chat.
AI participant: You can add a ChatGPT AI assistant to the chat, which will read all the chat messages and respond whenever it is called upon to do some task.
Online Games: You can use the cloud data variables in a similar way to create an online game, where 2 or more users can explore a virtual world together.