Chat System - Chat GUI | SourceCodester

Submitted by GeePee on Thursday, March 12, 2015 - 22:41.

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...

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).

Comments

The Code Does Not Work For Me

Add new comment

Add new comment
629 views