Java通信原理（3）——客户端界面实现（2）

梦里梦外; 2024-03-24 16:34 19阅读 0赞

### 一、概述 ###

当底层功能实现差不多的时候，可以使用图形化界面来实现相应功能的操作，本章主要讲解的是客户端的界面如何实现。

### 二、实现原理 ###

Java的图形化界面依然使用Java Swing实现，基本操作请看这篇文章：[(125条消息) 使用Java Swing组件开发画板（1）\_swing画板\_️771的博客-CSDN博客][125_ _Java Swing_1_swing_771_-CSDN]

本章主要讲解及时通信客户端的设计过程。

### 三、功能实现 ###

1、目标：客户端界面可以依照QQ的客户端实现 ，其中最基本的功能有

*  用户登录、注册界面
 *  好友列表
 *  消息收发界面

2、代码实现

（1）、用户登录界面

分析：用户登录界面最主要的内容是输入账号和密码，因此在这个界面需要添加文本框和密码框。其次是登录按钮，代码如下

public class LoginFrame extends JFrame implements Config{
        JButton login;
        JButton quit;
        JButton register;
        JTextField textField1;
        JPasswordField passwordField;
    
        //登录界面窗口设置
        public void setWindows(){
            this.setSize(loginFrameWidth , loginFrameHeight);
            this.setTitle("QQChat");
            this.setIconImage(icon);//设置软件图标
            this.setLocationRelativeTo(null);//设置窗口出现位置为屏幕正中
            this.setResizable(false);//设置大小不可变
            this.setDefaultCloseOperation(3);
        }
    
        //页面布局
        public void layOut(){
            //顶部图片
            JPanel northPanel = new JPanel();
            ImageIcon icon = new ImageIcon("./Image/QQ_Login.png");
            JLabel titleLabel = new JLabel();//
            northPanel.setBounds(0,-2,560,100);
            icon.setImage(icon.getImage().getScaledInstance(northPanel.getWidth(), northPanel.getHeight(), Image.SCALE_DEFAULT));//设置图像大小
            titleLabel.setIcon(icon);
            northPanel.add(titleLabel);
            this.add(northPanel,BorderLayout.NORTH);
    
            //输入框
            JPanel space = new JPanel();
            space.setLayout(null);
            space.setPreferredSize(new Dimension(140 , 0));
            this.add(space , BorderLayout.WEST);
    
            JPanel centerPanel = new JPanel();
            centerPanel.setLayout(new GridLayout(2, 1));
            centerPanel.setPreferredSize(new Dimension(0 , 140));
            JLabel text1 = new JLabel("用户名:");
            centerPanel.add(text1);
            textField1 = new JTextField(10);
            centerPanel.add(textField1);
            JLabel text2 = new JLabel("密   码:");
            centerPanel.add(text2);
            passwordField = new JPasswordField();
            centerPanel.add(passwordField);
            this.add(centerPanel, BorderLayout.CENTER);
    
            //按钮区域
            JPanel southPanel = new JPanel();
            southPanel.setLayout(null);
            southPanel.setPreferredSize(new Dimension(0 , 240));
            login = new JButton("登录");
            login.setBounds(300 , 100 , 80 , 40);
            southPanel.add(login);
            quit = new JButton("退出");
            quit.setBounds(160 , 100 , 80 , 40);
            southPanel.add(quit);
            register = new JButton("注册");
            register.setBounds(480 , 220 , 60 , 20);
            southPanel.add(register);
            this.add(southPanel, BorderLayout.SOUTH);
        }
    
        //登录按钮添加监听器
        public void login(){
            login.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    //拉取登录函数
                    loginAccount();
                }
            });
        }
        //退出按钮添加监听器
        public void quit(){
            quit.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    closeWindow();
                }
            });
        }
    
        public void registerFrame(){
            register.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    Register register = new Register();
                    register.init();
                }
            });
    
        }
    
        
        //登录函数
        public void loginAccount(){    
            //获取文本框中账号
            String userAccount = textField1.getText();
            //获取密码框中密码
            String passWord = new String(passwordField.getPassword());
            //检索数据库查询用户
            InfoCheck infoCheck = new InfoCheck(userAccount , passWord);
            //查询到用户时登录成功
            if(infoCheck.userJudge()){
                new FriendList(userAccount , infoCheck.getName()).initListUI();
                this.dispose();
                this.setDefaultCloseOperation(1);
            }
            else {
    
            }
            //获取数据库中用户信息
        }
    
        public void closeWindow(){
            this.dispose();
            this.setDefaultCloseOperation(3);
        }    
    
        //初始化函数
        public void initUI(){
            setWindows();
            layOut();
            registerFrame();
            login();
            quit();
            this.setVisible(true);
        }
    
        public static void main(String[] args) {
            LoginFrame loginFrame = new LoginFrame();
            loginFrame.initUI();
        }
    
    }

效果展示：

![21d815609fc2443d9701ef85cfc1a1fd.png][]

（2）、好友列表

分析：这个界面类似于QQ的好友列表界面，需要展示更多的信息，因此窗口为长条状，并且还要展示每一位好友。同时需要有滚动的效果。代码如下

首先创建一个长条形的窗口

public void setWindows(){
            //新建JFrame对象
            frame = new JFrame();
            //设置窗口大小，这里继承了一个接口，因此数值使用接口中的值
            frame.setSize(friendListWidth , friendListHeight);
            //设置窗口标题，继承接口
            frame.setTitle(userName);
            //设置大小不可变
            frame.setResizable(false);
            //设置窗口图标，数值来自继承的接口
            frame.setIconImage(icon);
            frame.setLocation(20 , 20);
            frame.setVisible(true);
            //设置窗口最小化为托盘
            trayIcon = new TrayIcon(trayIconImage);
            systemTray = SystemTray.getSystemTray();
            trayIcon.setImageAutoSize(true);
            //添加窗口监听器，当点击最小化时放置在托盘
            frame.addWindowListener(new WindowAdapter() {
                @Override
                public void windowIconified(WindowEvent e) {
                    try {
                        systemTray.add(trayIcon);
                    } catch (AWTException ex) {
                        ex.printStackTrace();
                    }
                    frame.setVisible(false);
                }
            });
            //设置窗口恢复，点击托盘图标后自动最大化
            trayIcon.addMouseListener(new MouseAdapter() {
                @Override
                public void mouseClicked(MouseEvent e) {
                    if (e.getClickCount() == 1){
                        frame.setExtendedState(NORMAL);
                    }
                    systemTray.remove(trayIcon);
                    frame.setVisible(true);
                }
            });
        }

用户头像添加

public void layOut(){
            //头部布局
            //添加头部Panel
            JPanel upLabel = new JPanel();
            //设置大小
            upLabel.setBounds(0 , 0 , 0 , 800);
            JLabel text = new JLabel("好友搜索");
            upLabel.add(text);
            JTextField search = new JTextField(20);
            search.setLocation(0 , 0);
            upLabel.add(search);
            JButton determine = new JButton("确认");
            upLabel.add(determine);
            frame.add(upLabel , BorderLayout.NORTH);
    
            //好友列表布局
            //设置好友列表Panel
            JPanel friendPanel = new JPanel();
            //设置布局
            friendPanel.setLayout(new GridLayout(50 , 1 , 4 , 4));    
            //在面板中添加多个label，通过一个列表存储面板上的label
            JLabel [] jlist = new JLabel[50];
            //通过循环设置每一个label
            for (int i = 0; i < jlist.length; i++) {
                //逐个设置label标题图像
                jlist[i] = new JLabel(i+1+"",new ImageIcon("./Image/0_32.jpg"),JLabel.LEFT);
                //逐个添加鼠标监听器
                jlist[i].addMouseListener(new MouseListener() {
                    @Override
                    public void mouseClicked(MouseEvent e) {
                        if(e.getClickCount()==1)   //getClickCount() 获取鼠标被单机的次数
                        {
                            //得到该好友的编号
                            //getText() 的意思是：返回数据窗口控件中 悬浮在当前行列之上的
                            friendNum=((JLabel)e.getSource()).getText();
                        
                        }
                    }
    
                    @Override
                    public void mousePressed(MouseEvent e) {
    
                    }
    
                    @Override
                    public void mouseReleased(MouseEvent e) {
    
                    }
                    
                    //当鼠标移动到Label上时，好友编号变为红色
                    @Override
                    public void mouseEntered(MouseEvent e) {
                        JLabel jl=(JLabel)e.getSource();
                        jl.setForeground(Color.red);
                    }
                    //当鼠标移走时为黑色
                    @Override
                    public void mouseExited(MouseEvent e) {
                        JLabel jl=(JLabel)e.getSource();
                        jl.setForeground(Color.black);
                    }
                });
                //在整个面板上添加好友列表组件
                friendPanel.add(jlist[i]);
            }
            //添加滚动条
            JScrollPane friendList = new JScrollPane(friendPanel);
            frame.add(friendList , BorderLayout.CENTER);
    
            frame.setVisible(true);
        }

总体代码：

public class FriendList extends JFrame implements Config , ActionListener {
        String friendNum;
        JFrame frame;
        SystemTray systemTray;
        TrayIcon trayIcon;
        String friendName;
    
    
        public FriendList(){}
       
        //窗口初始化
        public void setWindows(){
            frame = new JFrame();
            frame.setSize(friendListWidth , friendListHeight);
            frame.setTitle(windowsTitle);
            frame.setResizable(false);
            frame.setIconImage(icon);
            frame.setLocation(20 , 20);
            frame.setVisible(true);
            frame.setDefaultCloseOperation(3);
            //设置窗口最小化为托盘
            trayIcon = new TrayIcon(trayIconImage);
            systemTray = SystemTray.getSystemTray();
            trayIcon.setImageAutoSize(true);
            frame.addWindowListener(new WindowAdapter() {
                @Override
                public void windowIconified(WindowEvent e) {
                    try {
                        systemTray.add(trayIcon);
                    } catch (AWTException ex) {
                        ex.printStackTrace();
                    }
                    frame.setVisible(false);
                }
            });
            trayIcon.addMouseListener(new MouseAdapter() {
                @Override
                public void mouseClicked(MouseEvent e) {
                    if (e.getClickCount() == 1){
                        frame.setExtendedState(NORMAL);
                    }
                    systemTray.remove(trayIcon);
                    frame.setVisible(true);
                }
            });
        }
    
        
        //界面布局
        public void layOut(){
            //头部布局
            JPanel upLabel = new JPanel();
            upLabel.setBounds(0 , 0 , 0 , 800);
            JLabel text = new JLabel("好友搜索");
            upLabel.add(text);
            JTextField search = new JTextField(20);
            search.setLocation(0 , 0);
            upLabel.add(search);
            JButton determine = new JButton("确认");
            upLabel.add(determine);
            frame.add(upLabel , BorderLayout.NORTH);
    
            //好友列表布局
            JPanel friendPanel = new JPanel();//新建panel
            friendPanel.setLayout(new GridLayout(50 , 1 , 4 , 4));
            //通过循环的方式创建多个好友
            JLabel [] jlist = new JLabel[50];
            for (int i = 0; i < jlist.length; i++) {
                jlist[i] = new JLabel(i+1+"",new ImageIcon("./Image/0_32.jpg"),JLabel.LEFT);
                //在每个好友上添加鼠标监听器
                jlist[i].addMouseListener(new MouseListener() {
                    @Override
                    public void mouseClicked(MouseEvent e) {
                        if(e.getClickCount()==1)   //getClickCount() 获取鼠标被单机的次数
                        {
                            //得到该好友的编号
                            //getText() 的意思是：返回数据窗口控件中 悬浮在当前行列之上的
                            friendNum=((JLabel)e.getSource()).getText();
                            friendInfo = "1000" + friendNum;
                            InfoCheck infoCheck = new InfoCheck(friendInfo);
                            infoCheck.dbConnect();
                            //点击后获取好友编号
                            startChatFrame(infoCheck.getName(),userID , friendInfo);
                        }
                    }
    
                    @Override
                    public void mousePressed(MouseEvent e) {
    
                    }
    
                    @Override
                    public void mouseReleased(MouseEvent e) {
    
                    }
    
                    @Override
                    public void mouseEntered(MouseEvent e) {
                        //设置鼠标在数字上时为红色
                        JLabel jl=(JLabel)e.getSource();
                        jl.setForeground(Color.red);
                    }
    
                    @Override
                    public void mouseExited(MouseEvent e) {
                        //设置鼠标移开后数字为黑色
                        JLabel jl=(JLabel)e.getSource();
                        jl.setForeground(Color.black);
                    }
                });
                friendPanel.add(jlist[i]);
            }
            //滚动条设置
            JScrollPane friendList = new JScrollPane(friendPanel);
            frame.add(friendList , BorderLayout.CENTER);
    
            frame.setVisible(true);
        }
    
        public void initListUI(){
            setWindows();
            layOut();
        }
    
        @Override
        public void actionPerformed(ActionEvent e) {
    
        }
    
        public void setFriendName(String friendName) {
            this.friendName = friendName;
        }
    
    
    
        public void startChatFrame(String name ,String userID , String reciverID){
            new newClient(name ,userID , reciverID).init();
        }
    
    }

实现效果

![efd5d4db4bb8461c8e305673a5807185.png][]

（3）、聊天界面

分析：这个界面分为消息展示区和消息发送区，而消息展示区需要展示发送的信息和接收的信息，同时逐行高亮显示。代码如下

package com.company.Client;
    
    import com.company.Server.ClientMessageRecive;
    
    import javax.swing.*;
    import java.awt.*;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    import java.net.ServerSocket;
    import java.net.Socket;
    
    public class newClient extends JFrame {
        String windowsTitle;
        String userID;
        JTextField textField;
        JButton send;
        JPanel northPanel;
    
        JButton flush;
    
        String reciverID;
    
        public newClient(){}
    
    
        //窗口设置
        public void setWindows(){
            this.setSize(680 , 540);
            this.setTitle(windowsTitle);
            this.setResizable(false);
            this.setLocationRelativeTo(null);
            this.setDefaultCloseOperation(1);
        }
    
        public void layOut(){
            //消息发送面板
            JPanel southPanel = new JPanel();
            southPanel.setPreferredSize(new Dimension(510 , 120));
            textField = new JTextField(20);
            textField.setPreferredSize(new Dimension(300 , 45));
            southPanel.add(textField);
            send = new JButton("发送");
            send.setPreferredSize(new Dimension(80 , 30));
            southPanel.add(send);
    
            //刷新按钮设置
            flush = new JButton("刷新");
    //        flush.setPreferredSize(new Dimension(80 , 30));
            flush.setBounds(80 , 30 , 80 , 80);
            southPanel.add(flush);
            this.add(southPanel , BorderLayout.SOUTH);
        }
    
        //设置消息区域背景为白色
        public void messagePanelBackGround(){
            northPanel = new JPanel();
            northPanel.setBounds(5 , 5 , 370 , 330);
            northPanel.setBackground(Color.WHITE);
            this.add(northPanel);
        }
        
        //设置发送端消息显示，本质上是加入一个Lable
        public void setDisplayPanel(){
            JLabel msgLable = new JLabel("Test" , 2);
            msgLable.setForeground(Color.BLACK);
            msgLable.setBackground(Color.cyan);//高亮显示
            msgLable.setSize(50 , 25);
            msgLable.setOpaque(true);
    
            JPanel itemPanel = new JPanel();
            itemPanel.setPreferredSize(new Dimension(660 , 25));
            itemPanel.add(msgLable);
    
            FlowLayout layout = (FlowLayout) itemPanel.getLayout();
            layout.setAlignment(2);
        }
    
        public void buttonSet(){
            send.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    messageSend();
                }
            });
    
            flush.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                        shuffle();
                }
            });
        }
    
        //消息发送方法
        public void messageSend(){
            new DisplayPanel(textField.getText() , FlowLayout.RIGHT , northPanel).setVisible(true);
            //消息接收端显示
            new DisplayPanel("Test" , FlowLayout.LEFT , northPanel).setVisible(true);
            //设置发送后文本框内容清除
            textField.setText("");
        }
    
        public void shuffle() {
    
        }
    
        public void init(){
            setWindows();
            layOut();
            messagePanelBackGround();
            setDisplayPanel();
            buttonSet();
            this.setVisible(true);
        }
        
    
    }

//消息显示面板设置
     public void setDisplayPanel(){
            JLabel msgLable = new JLabel(message , align);
            msgLable.setForeground(Color.BLACK);
            msgLable.setBackground(Color.cyan);
            msgLable.setSize(50 , 25);
            msgLable.setOpaque(true);
    
            JPanel itemPanel = new JPanel();
            itemPanel.setPreferredSize(new Dimension(660 , 25));
            itemPanel.add(msgLable);
    
            FlowLayout layout = (FlowLayout) itemPanel.getLayout();
            layout.setAlignment(align);
            chatFramePanel.add(itemPanel);
            chatFramePanel.updateUI();//注意这里需要及时刷新
        }

效果如下：

![be699a9694384fda914b2ad1248b78d3.png][]

[125_ _Java Swing_1_swing_771_-CSDN]: https://blog.csdn.net/qq_64037280/article/details/127865335?spm=1001.2014.3001.5502
[21d815609fc2443d9701ef85cfc1a1fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/4e18941d2a3445f784e9bccf76d7e988.png
[efd5d4db4bb8461c8e305673a5807185.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/83bbc929e0ca4f09b788b5dc1f62e5d8.png
[be699a9694384fda914b2ad1248b78d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8119b00e09b84717a9acea5cd840c853.png