Masteryoda1976
Social Metrics Analyst
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Introduction:
This tutorial is the thirteenth in my Java Network Programming using KryoNet series, or eighth in creating a chat client and server system, in which we are going to be adding a chat GUI to the client.
Previous:
In the previous tutorial we created a login GUI for the client to allow for more interaction with the user.
The System:
We are going to give the user a GUI to interact with the system - to send messages and see the currently connected members of the chat.
When a client connects, add them to a list.
Send incoming messages to everyone within the client list except the sender - or send them one back saying that it is received, as confirmation.
This Tutorial:
In the previous tutorial we made a login GUI, this tutorial is going to be making the main chat GUI.
Chat GUI:
First we will make the chat GUI class. This is very similar to the login GUI but with a different layout...
Area1 is the main chat room which displays all the previously received messages, it is read only. Area2 is the message box where the user enters their own message followed by pressing the Send Message button, the area is editable (read only is false).
Next we need to add a button listener like we did with the login GUI. This button will create a new Packet2Message and send it through the client...
First we need to make the client. This will be the same as the login GUI which also uses the ClientCustom's client. We create a global client in the ChatGUI class...
Then modify the constructor to accept a client argument, and set the global client to the parameter client...
Running the ChatGUI:
So finally we need to run the ChatGUI. Once the user has logged in we want to run the ChatGUI and get rid of the login GUI, so we are going to modify our connect script to return a true or false to see if the user has connected or not...
-Was:-
-Now is:-
Then modify the login GUI button action to run the new ChatGUI if the user logs in successfully. It will give the new ChatGUI the same client it gets given from the main class...
This code will now try to login, if it does login successfully (the username is not already taken and the server can be reached and vice versa - the client receives data from the server) it disposes the loginGUI (closes/hides it) and create (opens/shows) a new ChatGUI window.
Next Tutorial:
Since we have covered a lot in this tutorial, the next tutorial will be making the ChatGUI actions work properly (update received messages and add a users list).
This tutorial is the thirteenth in my Java Network Programming using KryoNet series, or eighth in creating a chat client and server system, in which we are going to be adding a chat GUI to the client.
Previous:
In the previous tutorial we created a login GUI for the client to allow for more interaction with the user.
The System:
We are going to give the user a GUI to interact with the system - to send messages and see the currently connected members of the chat.
When a client connects, add them to a list.
Send incoming messages to everyone within the client list except the sender - or send them one back saying that it is received, as confirmation.
This Tutorial:
In the previous tutorial we made a login GUI, this tutorial is going to be making the main chat GUI.
Chat GUI:
First we will make the chat GUI class. This is very similar to the login GUI but with a different layout...
- import
java.awt.Color
;
- import
java.awt.Dimension
;
- import
java.awt.event.ActionEvent
;
- import
java.awt.event.ActionListener
;
- import
javax.swing.BorderFactory
;
- import
javax.swing.JButton
;
- import
javax.swing.JFrame
;
- import
javax.swing.JLabel
;
- import
javax.swing.JTextArea
;
- import
javax.swing.border.Border
;
- public
class
ChatGUI extends
JFrame
{
- JLabel
label1 =
new
JLabel
(
"Chat:"
)
;
- static
JTextArea
area1 =
new
JTextArea
(
"Welcome to the chat room!\n
"
)
;
- JTextArea
area2 =
new
JTextArea
(
)
;
- JButton
button1 =
new
JButton
(
"Send Message"
)
;
- public
ChatGUI(
)
{
- Dimension
dim =
new
Dimension
(
800
, 600
)
;
- setSize(
dim)
;
- setPreferredSize(
dim)
;
- setMinimumSize(
dim)
;
- setMaximumSize(
dim)
;
- setResizable(
false
)
;
- setLocationRelativeTo(
null
)
;
- setDefaultCloseOperation(
JFrame
.EXIT_ON_CLOSE
)
;
- setTitle(
"Client"
)
;
- setVisible(
true
)
;
- setLayout(
null
)
;
- label1.setLayout
(
null
)
;
- area1.setLayout
(
null
)
;
- area2.setLayout
(
null
)
;
- button1.setLayout
(
null
)
;
- label1.setSize
(
200
, 40
)
;
- label1.setLocation
(
10
, 10
)
;
- area1.setEditable
(
false
)
;
- area1.setSize
(
700
, 370
)
;
- area1.setLocation
(
10
, 40
)
;
- area2.setEditable
(
true
)
;
- area2.setSize
(
700
, 60
)
;
- area2.setLocation
(
10
, 440
)
;
- button1.setSize
(
200
, 40
)
;
- button1.setLocation
(
250
, 520
)
;
- Border
border =
BorderFactory
.createLineBorder
(
Color
.BLACK
)
;
- area1.setBorder
(
BorderFactory
.createCompoundBorder
(
border, BorderFactory
.createEmptyBorder
(
10
, 10
, 10
, 10
)
)
)
;
- area2.setBorder
(
BorderFactory
.createCompoundBorder
(
border, BorderFactory
.createEmptyBorder
(
10
, 10
, 10
, 10
)
)
)
;
- add(
label1)
;
- add(
area1)
;
- add(
area2)
;
- add(
button1)
;
- }
- }
Area1 is the main chat room which displays all the previously received messages, it is read only. Area2 is the message box where the user enters their own message followed by pressing the Send Message button, the area is editable (read only is false).
Next we need to add a button listener like we did with the login GUI. This button will create a new Packet2Message and send it through the client...
- add(
label1)
;
- add(
area1)
;
- add(
area2)
;
- add(
button1)
;
- button1.addActionListener
(
new
ActionListener
(
)
{
- public
void
actionPerformed(
ActionEvent
event)
{
- Packet2Message packet =
new
Packet2Message(
)
;
- packet.message
=
area2.getText
(
)
;
- client.sendTCP
(
packet)
;
- area2.setText
(
""
)
;
- }
- }
)
;
First we need to make the client. This will be the same as the login GUI which also uses the ClientCustom's client. We create a global client in the ChatGUI class...
- Client client;
Then modify the constructor to accept a client argument, and set the global client to the parameter client...
- public
ChatGUI(
final
Client cclient)
{
- client =
cclient;
- ...
- }
Running the ChatGUI:
So finally we need to run the ChatGUI. Once the user has logged in we want to run the ChatGUI and get rid of the login GUI, so we are going to modify our connect script to return a true or false to see if the user has connected or not...
-Was:-
- public
static
void
connect(
Client client, String
loggedInUsername)
{
- Packet3UsernameReq req =
new
Packet3UsernameReq(
)
;
- req.username
=
loggedInUsername;
- client.sendTCP
(
req)
;
- while
(
!
userServerRes)
{
- try
{
- System
.out
.println
(
"Sleeping..."
)
;
- Thread
.sleep
(
500
)
;
- }
catch
(
Exception
ex)
{
}
- }
- if
(
userServerAvailable)
{
- System
.out
.println
(
"That username is already taken. Please enter a new one... "
)
;
- userServerRes =
false
;
//Reset global booleans used for server username response
- }
else
{
//false=available
- System
.out
.println
(
"Connecting..."
)
;
- Packet1Connect con =
new
Packet1Connect(
)
;
- con.name
=
loggedInUsername;
- client.sendTCP
(
con)
;
- System
.out
.println
(
"Connected as "
+
loggedInUsername)
;
- userServerRes =
false
;
//Reset global booleans used for server username response
- }
- }
-Now is:-
- public
static
boolean
connect(
Client client, String
loggedInUsername)
{
- Packet3UsernameReq req =
new
Packet3UsernameReq(
)
;
- req.username
=
loggedInUsername;
- client.sendTCP
(
req)
;
- while
(
!
userServerRes)
{
- try
{
- System
.out
.println
(
"Sleeping..."
)
;
- Thread
.sleep
(
500
)
;
- }
catch
(
Exception
ex)
{
}
- }
- if
(
userServerAvailable)
{
- System
.out
.println
(
"That username is already taken. Please enter a new one... "
)
;
- userServerRes =
false
;
//Reset global booleans used for server username response
- return
false
;
- }
else
{
//false=available
- System
.out
.println
(
"Connecting..."
)
;
- Packet1Connect con =
new
Packet1Connect(
)
;
- con.name
=
loggedInUsername;
- client.sendTCP
(
con)
;
- System
.out
.println
(
"Connected as "
+
loggedInUsername)
;
- userServerRes =
false
;
//Reset global booleans used for server username response
- return
true
;
- }
- }
Then modify the login GUI button action to run the new ChatGUI if the user logs in successfully. It will give the new ChatGUI the same client it gets given from the main class...
- button1.addActionListener
(
new
ActionListener
(
)
{
- public
void
actionPerformed(
ActionEvent
event)
{
- if
(
ClientCustom.connect
(
client, text1.getText
(
)
)
)
{
- dispose(
)
;
- new
ChatGUI(
client)
;
- }
- }
- }
)
;
This code will now try to login, if it does login successfully (the username is not already taken and the server can be reached and vice versa - the client receives data from the server) it disposes the loginGUI (closes/hides it) and create (opens/shows) a new ChatGUI window.
Next Tutorial:
Since we have covered a lot in this tutorial, the next tutorial will be making the ChatGUI actions work properly (update received messages and add a users list).