Chat System - Login GUI & Altering Messages

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

Introduction: This tutorial is the twelfth in my Java Network Programming using KryoNet series, or seventh in creating a chat client and server system, in which we are going to be altering received messages and creating the login GUI for the client. Previous: In the previous tutorial we created a way to stop two clients from having the same username, therefore making all client usernames unique. 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: Since we set up the unique usernames in the previous tutorial, we are now going to create a working login GUI for the client instead of just using a console based Command Line Interface (CLI). We are also going to be slightly altering messages. Message Altering: Now that we are properly building a way to handle multiple clients within one chat room on a server, we need to know who has sent what messages. So we can simply alter the circulate messages method in our client handler on our server. We simply add the username of the sender to the beginning of the message followed by a colon, a space then the message (user: message)...

public void circulateMessage(Connection connection, Packet2Message packet) {
        String msg = packet.message;
        packet.message = getUsername(connection) + ": " + msg;
        for (CustomClient c : this.clients) {
                if (c.getConnection().getID() != connection.getID()){
                        System.out.println("Sending to " + c.getUsername());
                        c.getConnection().sendTCP(packet);
                }
        }
}

It sets a new string variable named msg to the message within the packet, then it sets the message within the packet to the username of the connection returned by our getUsername method which accepts one parameter of a connection, then we put a colon, space and the message held in our msg string variable. Login GUI: Create a new class named LoginGUI within our Clients default package - or where your other classes are saved) - and make it extend JFrame...

import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
 
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
 
import com.esotericsoftware.kryonet.Client;
 
public class LoginGUI extends JFrame{
        
        JLabel label1 = new JLabel("Enter the username to login to the server:");
        JTextField text1 = new JTextField();
        JButton button1 = new JButton("Log in");
        Client client;
        
        public LoginGUI(final Client cclient) {
                client = cclient;
                Dimension dim = new Dimension(400, 250);
                setSize(dim);
                setPreferredSize(dim);
                setMaximumSize(dim);
                setMinimumSize(dim);
                setResizable(false);
                setTitle("Client Login GUI");
                setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                setLocationRelativeTo(null);
                setLayout(null);
                setVisible(true);
                
                label1.setSize(300, 40);
                label1.setLocation(10, 10);
                label1.setLayout(null);
                
                text1.setSize(300, 40);
                text1.setLocation(10, 50);
                text1.setLayout(null);
                
                button1.setSize(100, 40);
                button1.setLocation(10, 120);
                button1.setLayout(null);
                
                add(label1);
                add(text1);
                add(button1);
        }
}

So that is the main visuals, now we want to add a button listener on to the login button to make it use the connect method in our ClientCustom class. Add this just under our "add" section...

button1.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent event) {
                ClientCustom.connect(client, text1.getText());
        }
});

As you can see, that listener will then run the connect method in our ClientCustom class and pass it the client (global variable, set on the constructor) and the text entered in to the textbox, the log in name. Now we want to alter the connect method in our main ClientCustom class to accept a username string as well since we now accept it from the JFrame and not the scanner within the method... -Previous-:

public void connect(Client client) {
        System.out.println("Enter your username for the new chat room... ");
        Scanner userScan = new Scanner(System.in);
        while (true) {
                String loggedInUsername = userScan.nextLine();
                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
                        break;
                }
        }
}

-New-:

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

Since we have to make the method static, we also need to make the booleans static...

static boolean userServerRes = false;
static boolean userServerAvailable = false;

Finally instead of running the connect method like so...

connect(client);

(remove the above line and add the below line). We want to run a new instance of the new LoginGUI class and give it the client...

new LoginGUI(client);

Finished! That's the login GUI finished, the only other GUI related things we have to do are; Create a main Chat GUI. Move the output to the console to somewhere within the GUI. Add more features to the GUIs.

Add new comment

52 views