Hello, this is Youngho Lee
In this lecture, we will learn about chat, essential for communication
between players when playing network multiplayer games
What we will learn is first creating a chat UI
and then implementing chat logic
You can quickly create a chat by applying the actor replication you learned earlier
First, let's create the chat UI
Create Chat UI
Now, let’s create a chat UI
The chat UI will be expressed like this
If you look at the screen, the UI is expressed like this at the bottom left
The message is sent
when the user enters a message using the chat UI
created in this way and presses the send button
The transmitted form looks like this:
this is the current server, the left is the server, and the right is the current client
When there are two clients and a server
the user is the client, just like chat and other things
This client sends a message to the server
When sent, it is sent in Server RPC format
So, if there is not just one client
but Client 1 and Client2
when the client sends a message to the server
the server receives it and broadcasts it
This is what we send to all clients
At this time, there may be several ways
First, we can use Server RPC
and as we did before, use multicast
to send it using NetMulticast
Then, the message will be sent to all users
It will appear on the screen like this
There may be a way like this
Another case is when you do not use multicast
but only Client RPC
Similarly, the client sends a message
to the server using Server RPC like this
Then, the server receives this
and sends it to the clients using Client RPC
How does this work?
In the case of the server, since it has PlayerControllers
it has PlayerControllers for all players
so the server can send messages
to this client and then to this client
You can also handle it like this
There can be many ways
We first configure the UI
We will even
implement the logic
to display such content
using multicast or clients
We will be creating this part to create a chat UI
To do this, go to Unreal Editor
and when you come to Unreal Editor, you can create UI
I'll go to the UI folder
and right-click to create a User Widget
so that the chat UI can be displayed
on the screen
Widget Blueprint
Then, the classes that need to be inherited appear here
A message created in the chat window
will be sent and processed as follows
There is a User Widget to handle this
You can create a separate C++ class later
then register it as a parent class and use it
We will create the UI first
then create a C++ class
and make that class its parent class
Now, first, click User Widget
and name it WBP_ChatMsg
The MSG Widget Blueprint
called WBP_ChatMsg, is
currently creating a User Widget as its parent class
Done
In addition, I will configure the UI first
I will add a text block here
for the content that goes here, text
Then the text appears here in common
It's a TextBlock
Let's add this by dragging and dropping
The text added like this
will be uploaded here as shown on the screen
If you look at the screen now
the main UI looks like this
At bottom left, right?
Then, if you look here, the message continues to be displayed on the screen and goes up
This message becomes a Chat message
The server will receive the message we sent here
Then, when it is received, the message will be added to this UI one by one like this
Like this
So when it is full, a scroll bar appears next to it
like this
So now we will create this message UI that will be displayed here
Let's name this TextBlock
txt_msg
Shall I add the color yellow so it stands out?
I will process it like this to make it look darker
and have a slightly orange tone from yellow to the eye
I will leave the font size at around 24
Then, the content will be entered into the text block created like this
and the message will be displayed
in the chat window at the bottom of the MainUI
Done?
Then, I will add a C++ class so that the created WBP_ChatMsg
can inherit the C++ class
Now, right-click on the C++ class folder
and select New C++ class
Find User Widgets in All Classes
See?
Select User Widgets and click Next
Let's name this C++ class to be Chat Widget
Let's click Create Class
Now reload everything
Go back to Unreal Editor
ove to the UI holder, and the parent class of the Chat WBP WBP_ChatMsg
you just created is now the User Widget
Let's change this parent class
Go to the graph tab and go to class settings
In WBP_ChatMsg, go to the Graph tab
and then the Chat Setting class settings
If you look here, the class and Parent class are currently set to User Widgets
Let's change this part to the ChatWidget we created
Then ChatWidget appears like this
Let's press this to compile it into ChatWidget
Then, the parent class
became ChatWidget
Let's do this and close WBP_ChatMsg like this
Next, it should be
displayed in the bottom left corner of the screen
We're going to make the chat window look like this
We will enter a message here, create a Send button
and process the message here to be displayed like this
To handle this, let's open the MainUI
There is WBP MainUI
Let's double-click to open it
Even GameoverUI is currently showing
In addition, I will add a border to the bottom left
Let's add a border from the palette
and add it to the bottom of the canvas panel like this
Next, as a child of the border
what continues to be shown is
wrapped in the border
here will be windows where you can put messages in them, right?
For these to fit, a scroll box needs to fit here
Also, there needs to be an input window
and a button below the scroll box
so I first surround it with a Vertical Box, and in here
let's add a scroll box, and chat messages can go in there like this
Since this is currently a Vertical Box, we will first place a Scroll Box in this Vertical Box
then a Horizontal Box here
and we will process the input back
into the Horizontal Box and then a button
Now, let's try making it with this structure
Add a Vertical Box under the border
Let's search and register the Vertical Box as a child of the border
Next, I'm going to add a scroll box
Let's grab the scroll box and place it as a child of the Vertical Box
Next, let's grab the Horizontal box, which will be responsible for the input window and send button
and place it as a child of the Vertical Box
Inside this
we will put an input window and a send button
If you simply input here, the back will become too transparent
so you will simply input text in the transparent area, and let's add another border here
We will add a border to the Horizontal Box and use this border
as a child of the border
As a child of the border
I'll add Editable Text
Let's grab the Editable Text as a child of the border and insert it into it
Then, we need to create a send button
Add a button to the Send button and add it as a child to this Horizontal Box
Now, there is Editable Text on the border
There is a button like this at the same level as the border
Now, we grab the text that will give the name to this button and call it TextBlock
Let's grab it and put it as a child in the button like this
Now, what has been added is a Vertical Box under the border, then a Scroll Box
and then a Horizontal Box with a border button
under the Horizontal Box
Set it like this
Let me add some names I'll enter the names of the widgets like this
Now, there is a scroll box here, and I'll name it scroll_msgList
I named it this way because the message is now registered in this scroll box
Now, there is Editable Text below the border
Let's add edit_input to receive text input from the user
Next, there is a button, and I'll name it btn_send
Then, let me lay out their layout
Now, first, select the border
So, I will make sure it's positioned at the bottom left here like this
so it's sorted based on this
So I'm going to open this anchor dropdown in the anchor preset
and then select the bottom left bottom
I put position X and Y as 0, 0
and then there's the alignment I'll just raise this
We will catch it to this extent, grow it, and then catch it and put it in this amount
Border size, so that the border is on this side like this
If it turns white like this, what happens when you play?
It blocks the screen, so it doesn't look good
So, let me change the color of this border so that it is transparent
Now, if you come to the right and look at the brush
you can see that you can insert an image here
and there is also a brush color
Where? When you come to this border, there is a brush color under the brush
Now, let's select the brush color and reduce the alpha value like this
Then, when you look at it from behind, the transparency changes
I'll make only about 30% transparent like this and click ok
If you click compile and check
it will be displayed transparently like this
It's done
Next, we have scroll_msgList scroll box
select this
Let's go to the details window on the right
and change the size to Fill
If you change the size to Fill
the scroll msgList takes up almost the entire screen
Then, because it goes too far, it becomes like this
Since we can work with these as percentages
let's put Fill here as 4.0
Then we'll press Horizontal Box
When it is 1 and when it is 4, it has a size
Then, I will click the Horizontal Box and change this to Fill
Let's change the size to Fill in the details window on the right
I processed it like this to make it look roughly bigger
You can adjust it according to the layout you want
First, I set it to Fill and set it like this
I'll do it like this, and then
I'll leave the border
as Fill
If you look below, you will see a border under the Horizontal Box
Let's set this Border to Fill and leave it at 1.0 for now
Then there is the Edit Input below
I put the Edit Input like this, and the border color is too dark, so it doesn't look transparent like this
If you look at it now, the screen is covered like this
So, let me change the color of this border
If you go to the right, you can see the brush color
Let's roughly make it stand out from the Brush Color and make it a little more pink
Let's reduce the alpha value like this
If you set only about 30% like this and compile it
it is divided like this when you go to see it to enter the text
It goes like this
Then, in the Edit Input, enter the first message
I will add this to the Hint Text so that it appears
We will insert it like this: Insert MSG
Then, if you look here, it says Insert MSG
If you want to align it in the exact center
you can do it so that the phone text is in the exact center in Justification
and then in Vertical, it is at the bottom like this
Set it right in the center for Vertical Alignment
If you do this in Justification, it will be centered
I want to type from the far left, so it will be filled in by typing from the left
In the Vertical Alignment, we will leave Justification on the far left
We can also input the font color here
Here, there is Color & Opacity and the color at the border
As you can see, if you click on Color & Opacity, it changes to black, which lowers the color
The hint says to enter a message like this
You can see it coming out
Here, Color & Opacity appears in Input
I'll compile it and go and play it Then, an Insert message appears here
Now, I'll enter 'Hello'
The hint message disappears, and the message we entered appears
At this time, if you click the button next to it, it will be transmitted
Let's go back to WBP_MainUI
press btn_send
btn_send is currently full
So, the border is currently set to 1, so the message window can widen
btn_send is now set to auto
so change it to Fill
I'll change it to Fill
and leave the skill value behind as 1.0
So that the border value above takes up more space
I will change the Fill part to 1.0 and change it to 3.0
Then there is an insert message and a text box is added next to it like this
Let's change the name of this text box, and name the text box's name under btn_send
Send
So that the message is sent
Right? Should we change the color to black?
Like this
So, the text is too slanted to one side so that the user can enter
the message by pressing the send button
In this Justification, we will change it to center alignment
There is a TextBlock under btn_send
I named it Send, and then, if you scroll down, there is Justification
I placed it like this so that Justification is centered
Let's put it like this, click compile, and then go and take a look
When you press the play button, it is placed at the bottom left like this
Since the bullet and the UI overlap a little now
I will grab this border that overlaps the bullet and raise it to the top
If you click compile and go back, it looks like this
Here, you type hello
Then, when you press the send button, we will send it
So far, I've created a Chat UI
Implement Chat Logic
The chat logic implementation
will be implemented in the same way as the RPG communication described above
First, in the client
the user will enter a chat message
This chat message is then transmitted to the server
Then this server receives the message
Once sent, the server receives the message
We will receive it, simply process it
here as a server
and broadcast the message to all clients
This means transmitting, so we will use NetMulticast
to transmit it from the server to the client again
Then, each client receives this message
and visualizes it on the screen
It is displayed on the UI
We will receive this content
and process it like this For this, we will implement Server RPC
and NetMulticast with this content
First, we have these UIs in the WBP main we created earlier
Let's move on to Visual Studio to use these UI widgets
In Visual Studio, move to the header file of the main UI
Let's move the bottom part
Now, let me add chat-related content here
public
Put UPROPERTY below this, edit defaults only
Then TsubclassOf
Class
This message will be added to this chat window I will put the received message here
Enter the UChatWidget type class for the message to be received
Let's put it as a chatWidget
We created this chat widget here
Now, if you look, there was a WBP chatmsg
The parent class that WBP chatmsg inherits from is chatWidget
We're trying to take that widget and continue adding it to the scroll box
Next, let's add the widgets we want to add here as members
This time, add blueprint_read_write to UPROPERTY
Let's bind it using the meta keyword BindWidget
Add the class UScrollBox widget here
The name
of the variable was
scroll_msgList in the MainUI
So I'll take it as is and put it in like this
Copy UPROPERTY above and add another one
and add class UEditableText
I put it as edit_input Let me add one more
Here, class UButton, I'll connect it with send button
Let's put btn_send like this
By using bind widgets like this, you match the widgets' names as they are
The names must be the same
Only then can they all be uploaded to this BindWidget
Let's do this and add a function
that will send a message when the btn_send button is clicked
Let's put UFunction void SendMsg
SendMsg When this function is called, let's process it so that a message is sent here
I think I need to get it, too
Let's enter void ReceiveMsg
and enter the received message as const FString msg
Now, we have added the two functions we need here
Implement sendmsg in mainui.cpp
It came out like this Then, I will add receive msg as well
These two
SendMsg will process like this so that
this SendMsg is executed when btn_send is pressed
So, if we look at the native construct
we will add it under btn_retry like this
Let's do btn_send here
then
SendMsg and connect like this
Then, we will process it like this
so that the sendmsg function is called when btn_send is clicked
So what do you do when this sendmsg is called
It will ask you to send it to the server
When the client receives input like this, it will be sent to the server in the SendMsg function
How? With Server RPC
We will send it using Server RPC
Then, the server will receive this Server RPC request
and send a message to all clients using NetMulticast
You can put this in several classes
You can put it in NetPlayerController
and then you can put this part in the net_tps character
Or you can bring it in through other actors
However, we explained in our communication connection structure
that for communication to occur
this client must have someone as a result
You must have a PlayerController
This PlayerController
has the net_connection and needs to communicate through
So the type that can have this PlayerController is
called the owner
That's right, it's a structure that allows communication through this owner
and ultimately through the net_connection object in PlayerController
So, the form that can be had like this is, first
the PlayerController is a Pawn that Possesses a client, right?
If we use our character here
we will have a PlayerController to communicate
Next, create an actor to communicate with a general actor
and set the owner for this communication actor
You use a pawn or PlayerController to set the owner
Then, you can use this actor to chat
through the connection in the PlayerController
You have to handle it this way for chatting
or do these chat content to
PlayerController
If you send a Server RPC to the PlayerController
the PlayerController can just take the Server RPC
and send it to the server itself
But when it happens like this, there are things we need to consider
There is a server, and there is a client
They all have their own PlayerController
How about a server? I have all the PlayerControllers
and matching PlayerControllers for the server now
So, P0 communicates with P0
and P1 communicates with P1 in this structure
That's because the server has them all
Now, what kind of problem arises here?
Look, this problem occurs when sending a message
from the server to the client First, the client makes a request to the server
using Server RPC
Then, let's look at NetMulticast from this server's perspective
But what problems will arise if NetMulticast is implemented in PlayerController?
When it's sent, then, from the server's point of view, I want to send it through NetMulticast
but all clients must have the ones corresponding to this P0
to communicate through the PlayerController
But there isn't one
So, you can't use NetMulticast if you use PlayerController
On the other hand, if you just use regular Client RPC
when you use this Client RPC, you can do this
It is sent from the client to the server through this PlayerController
And server sends a message to each of them
Now, P0 is sent to P0 The server sends P0 to P0
Then, P1 sends it to P1; since it is a client, it is sent only to each client
Then send P2 to P2, and what if it goes like this?
Communication is possible because all clients have their communication structure
But what happens if you use NetMulticast?
Since the PlayerController only has its right now, when the server sends it
if you NetMulticast it, you can receive the one corresponding to this P0
NetMulticast But since there is no P0 here, there are no actors
You can't send data to an actor that doesn't exist
So, for actor replication to occur
the actor must be in the same world space, but communication itself is impossible because it is not there
So, if you try to use NetMulticast with this PlayerController
a problem will arise
At this time, if you try to display the message to all clients using PlayerController
the message will be sent using Client RPC, not NetMulticast RPC
Then, we use this technique of going around the for loop
and sending Client RPCs to all PlayerControllers individually
So what we're going to choose now is that part seems too complicated
Instead of implementing it in PlayerController
we will put this content in the NetTPS character
So what about this character?
It's in every world right now
There is also C1 here
Here too, C1, C2, and C1 are together
If you look at the window, this is the window
If you look at the C1 character's window, you can see C1 player
C2 player, and C3 player on the screen
Likewise, in the C2 window, you will see your own C2 character
and the C1, C0, and C3 characters
In the c3 window, these actors also exist together, so NetMulticast RPC can be used now
On the other hand, there is only PlayerController corresponding to P0
So, if you send a message using the PlayerController actor
and you try to use NetMulticast
communication is impossible because there is no P0 here
So, to simply use this NetMulticast
let's move to the NetTPS character header file
I'll put the public at the bottom, and I'll put the chat content here
Now, let's add a Server RPC function here
UFUNCTION server
and then Reliable
void ServerRPC
_SendMsg
Set the const message to be sent as FString msg
Similarly, NetMulticast is now required for reception
So this is not a server, but NetMulticast
Set it to void MultiRPC
Let's set up MulticastRPC like this
Please enter the name in a format that you can identify
In addition, send msg will be the message to be displayed on the received message screen
Let's put const FString msg like this
Let's try to implement this part, which can be sent through Server RPC
Next, we will also add Multicast RPC
Then, these two functions were added to the NetTPSCharter cpp file
The server is simple; it just receives messages from clients
It will simply receive the message from the client and transmit it via multicast
It only acts as a relay
Server RPC simply acts as a relay to transmit messages
Here, the Multicast RPC
SengMsg call is made like this Simply send the message you received her
So, where is this multicast part being performed now?
Client, and where is this? Literally, server
When you press the send msg button on the client, Server RPC is executed
and its function is simply to send
messages to all clients
Now, send msg to Server RPC
SendMsg Let's implement the part that calls this
Move to MainUI cpp
Let's go to SendMsg
Here, we want to implement the idea of transmitting the message entered by the user to the server
Then, the message entered by the user must be received and memorized
We will receive this entered message as fstring and put it as msg
This can be retrieved from the widget through the edit input widget
Let's get it here with get text and convert it to string
This takes the message from the editable text and puts it into the FString
Next
We put in here, the user pressed the send button
Then, in the message window sent from the UI
This input field editable text
would be better to delete the data and make it blank
So here, in the set text of the edit input
we will insert a blank character from the GETEmpty of the FTect, which has nothing
Next
if there is data in this msg
if you press send when it is blank, sending it to the server for no reason will result in a waste of data packing, right?
Send to the server only if there is a message to send in msg
if msg has IsEmpty
This means sending when this value is false
So here's
the character I'm sending here
I'm trying to call Server RPC on this NetTPSCharacter
Right? In this MainUI
if you want to get a pawn that has itself in the MainUI
you can use it like this
In this case, we just spread the MainUI
around the world
This is the thing that spreads out like that
So how can this MainUI
get NetTPSCharacter?
From PlayerController
if we get the Pawn that PlayerController is currently Possessing
it will be this NetTPSCharacter
We can use the ServerRPC on that character
so we need a PlayerController first
So, import Cast NetPlayerController from auto pc
In get world
If we get GetFirstPlayerController here
we can get PlayerController
Then, from this PlayerController
we can retrieve the character currently being used as Possess
Set it to the auto-player
Cast ANetTPSCharacter
Who do you get it from?
You can get it by using GetPawn from the PlayerController
Then, this PlayerController
takes the currently Possessed Pawn
and casts it to the ANetTPSCharacter type
Then, this player will contain that instance
So we can call ServerRPC on this player
Send message, we can put the message we sent here like this
Then, when the user presses the send button
the message is retrieved
and stored in
the editable input window
and then the contents of the Editable Text are deleted
Leave it blank
and then, if there is a message to send
import PlayerController
and ANetTPSCharacter, which is the Pawn it is Possessing
Then we can call the ServerRPC send message
in the ANetTPSCharacter we created
Then, this is the structure where it is transmitted directly to the server
Looking at it now, it looks like Editable Text should be added to the header
So #include here
Let's add component dot component slash
EditableText.h here like this
Next, we need to be able to use NetTPSCharacter as well
Then #include
Let's add NetTPSCharacter.h like this
Then, I implemented the content to be used in the send message
Build
Okay, then the receive message
the user sent a message to the sub
Then, NetTPSCharacter simply sends messages like this to users
Then, users will receive this multicast RPC send message
So what are you going to do here?
We are the client, so we must get the MainUI from here
And you will need to call
the receive function in this MainUI
That way, you can print the message on the screen
I think you need to know a little more about this in detail now
On the screen, we are trying to send a NetMulticast RPC call
Then, there is a screen like this This is C1 character
The C1 character looks like this
For this one, I will set
the PlayerController as P0
Then there is the C2 character and then the C3 character
Do they currently have a PlayerController or not?
Similarly, this time we come here
this is now
a C2 character
This time, it has its own PlayerController
Next, this is a C1 character
Since there are too many, I will remove C3
So there are two players, right?
Now, they want to send these messages to the server
If they want to send the message to the server
In the send message
you are currently sending a message to the server through this Pawn
It's sending it
In this case, the server will multicast again
and send it to this Shall we try using a different color?
I will send it to him like this
and then this one here is C1, right?
I'm going to send it to this guy right now
So, NetMulticast is completed
Right? Then
what about this case where the main character is yourself?
Well, it doesn't matter
It has a PlayerController
and a MainUI on its own
If the MainUI is currently in a PlayerController
the MainUI is active on itself
But let's see when it sends a message to C2 character
According to the arrow, when NetMulticast is performed
the server sends a message to the C1 character here
This is fine because it has the MainUI
Next, if you NetMulticast from the C2 character
and the window on the C2 character to the C1 character, a message will be sent to this one
So, who is the main character here? P1, this one
C2 has the MainUI right now
Attach it to the top of the screen
and the UI bar like this
Also add a crosshair here Who owns these as of now?
This guy has the C2 character But does the C1 character here have a MainUI or not?
No, there isn't one, so these things are displayed on his head
However, we have created a receive function and other things in this MainUI
We want to call the receive function in the MainUI
but there is no MainUI right now So whose thing should we use?
You have to use it using the MainUI this has
That way, it will be displayed on the screen in the chat window
So, this MainUI has to use the MainUI it has, so it doesn't have a MainUI right now
So, how did we move the MainUI to where it is?
I moved it to PlayerController
Let's go to PlayerController
If you look at my PlayerController, we've moved the MainUI from the character over here
Because the MainUI was continuously created due to duplication, I moved it to PlayerController
When the characters simply look at the MainUI in this PlayerController
in the init UI widget
when we take a look
they just register and use the MainUI in the PlayerController like this
Okay, what should we do when we want to receive
and call the receive function?
You can just take the MainUI in PlayerController and use it
So let me do it like this
To bring up the MainUI, we first need a PlayerController
Auto PC requires Cast ANetPlayerController
ANetPlayerController, you can get it from the world
GetFirstPlayerController, like this
And when we have a PlayerController, we want this to run
So, you can call the receive message function here
on the MainUI in PlayerController and insert Msg here
This message will then appear on the screen in the MainUI
Then, we just need to implement the receive message function
Let's go to ReceiveMsg
Now, if you come here and look at the receive function in the MainUI
it looks like this
Now, in the receive function, this is the content received from the server
This is currently running on the client, why? Because it is UI
Right?
And what widget do we want to add to this scroll box is
we want to add ChatWidget
So auto chat Should I put it as msgWidget?
Let's call it msgWidget
This is a message to add to the scroll box
Let's do CreateWidget
Let's create a UChatWidget type here
put GetWorld
and put chatWidget
We've already made it possible to receive chatWidget in the MainUI
Then, in cpp, we want to create a widget
and insert the created widget into the scroll box
Then, there is no data in this msgWidget yet
There's a message in it
There is a widget called text message
If you look closely at WBP ChatMsg, we set it as txt_msg
If you enter message data here, the content will be included
So, if you look at msgWidget
it is said, txt_msg
I haven't made it yet, so I'll add this part
Go into ChatWidget.h
Put public UPROPERTY
BlueprintReadWrite
meta, in fact, you don't have to write down BlueprintReadWrite
Since we will not input data from the Blueprint
we can simply put BindWidget here
And it would be class UTextBlock
txt_msg
Let's add the relevant content to UChatWidget.h like this
It is in, and then let's move to MainUI.cpp
Then, the txt_msg will appear in the msg widget that you tried to insert earlier
You can pass the msg received as this parameter
Add SetText here
Let's add FromString msg to FText like this
Since it comes in as string data, you need to enter it as text data in FText format
Let's add the msg widget created this way to the scroll box
Scroll
It hasn't been added
Here's scroll_msgList
Let me add it here by doing add a child
Here, msgWidget
Then, they will be added one by one to the scroll box
Then, when we see this on the screen, we have to think more
Here, we will print the message like this
It is added like this, but what happens if the following message appears?
A scroll bar like this should be added to automatically scroll here
That's right, the scroll bar is now set to automatically appear on the screen
But where should the current position of this scroll bar be?
You have to move it to the bottom so it won't be visible on the screen
So, I have to scroll to the bottom
to see how this can get up there
It goes up like this, and the whole thing has to go up like this
to show the message at the bottom
Like this
So, to do this, if you call ScrolltoEnd
in the scroll box and the scroll_msgList
this is the code that brings the scroll box down to the bottom
Then, it will move this scroll bar down on the screen
If you look now, the thing that appears in red like this is because there is no UChatWidget
Then, the scroll box is not declared
Let me go up to the top and add it here
Let's #include
and add ScrollBox.h to the component like this
Now, we need one more, ChatWidget
ChatWidget must be added here as a header file for use
Let's include two header files
Shall we try building next?
Then
you can see here that the UText block is currently being used
but not included
So, let's add TextBlock to the top of the header file
So, let's #include
and add TextBlock .h under the component like this
Then let's build again
So let's move on to Unreal Editor
Since a lot has been added, I'll close it and turn it back on
When Unreal Editor opens, move to the WBP MainUI
From here, you come to the graph window
In Class Default, we now need ChatWidget
So, if you select ChatWidget like this
if you search here, ChatWidget will appear
There's nothing here right now
so let's open it and add the WBP_ChatWidget here
Okay, click compile
Next, let's go into the main map of the Third Person
Now, press the play button
So it looks like this here Let's open one more player
In the server window before inserting the message, let's say hello and press send
Then, what happens?
You can check that the message is sent normally from the server and stamped as "Hello"
Then, "Hello" is stamped here, and "Hello" is stamped on the client
Then, let's say "Okay, hi" from client, then send
Then
On both side, "Okay, hi" is well shown
Client sent "Okay, hi" Server sent it and received it too
So here we have a server
Here, it's client, and this too
The client sent a Server RPC to the server, and then
the server sent NetMulticast to all clients
and the screen is currently in this state
There are three types of RPC
Server RPC, then Client RPC, and NetMulticast RPC
If you have a clear understanding of these concepts
you can easily implement chatting in no time
We have implemented the chat logic up to this point
Let's wrap up what we learned in this lecture
Create Chat UI Constructs a UI that allows chat communication between users within the game
The client sends a message to Server RPC, and the server sends a message to Client RPC
The server has a PlayerController and can send messages to all clients
Creating a UserWidget to display chat UI
Creating a chat window with a message input window and a Send button
Implement Chat Logic
Implements chat logic between multiple users using Server RPC and NetMulticast RPC
NetMulticast RPC does not work in PlayerController because the server holds PlayerControllers for all users
This is because the client has its own PlayerController
To use NetMulticast, all clients in the world, including the server, must have the same Actor
The End