基于Java的Socket类Tcp网络编程实现实时聊天互动程序(一)：QQ聊天界面的搭建

首先把服务端和客户端的聊天界面窗口搭建完成

效果可以看下图：

主要包括：窗体、滚动条、面板、按钮、文本框和文本域

这部分比较简单，直接上代码：

1.服务端代码

package Chat;

import javax.swing.*;
import java.awt.*;
//如果一个类需要有界面的显示，该类需要继承JFram
//1.定义JFram窗体中的组件
//2.在构造方法初始化窗体的组件
public class ServerChatMain extends JFrame {
    public static void main(String[] args) {
        //
        new ServerChatMain();//调用构造方法
    }
    //属性
    //文本域
    private JTextArea jta;
    //滚动条
    private JScrollPane jsp;
    //面板
    private JPanel jp;
    //文本框
    private JTextField jtf;

    //按钮
    private JButton jb;
    //行为

    //构造方法
    public ServerChatMain(){
        //初始化组件
        jta = new JTextArea();
        //设置文本与不可编辑
        jta.setEditable(false);
        //注意：需要将文本框添加到滚动条中，实现滚动效果
        jsp = new JScrollPane(jta);
        //面板
        jp = new JPanel();
        //文本框
        jtf = new JTextField(10);
        //按钮
        jb = new JButton("发送");
        //注意：需要将文本框与按钮添加到面板中
        jp.add(jtf);
        jp.add(jb);


        //注意：需要将滚动条与面板全部添加到窗体中
        this.add(jsp, BorderLayout.CENTER);//放在中间
        this.add(jp,BorderLayout.SOUTH);//放在最下面，上北下南

        //注意：需要设置标题，大小，位置，关闭，是否可见
        this.setTitle("QQ聊天服务端");
        this.setSize(300,300);
        this.setLocation(300,300);

        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);
    }
}

由于客户端和服务端效果是一样的，只需要复制一下到客户端即可，下图为在mac电脑上的效果图。

2.客户端代码

由于客户端和服务端的界面是一样的，复制后修改一下即可。

package Chat;

import javax.swing.*;
import java.awt.*;
//如果一个类需要有界面的显示，该类需要继承JFram
//1.定义JFram窗体中的组件
//2.在构造方法初始化窗体的组件
public class ClientChatMain extends JFrame {
    public static void main(String[] args) {
        //
        new ClientChatMain();//调用构造方法
    }
    //属性
    //文本域
    private JTextArea jta;
    //滚动条
    private JScrollPane jsp;
    //面板
    private JPanel jp;
    //文本框
    private JTextField jtf;

    //按钮
    private JButton jb;
    //行为

    //构造方法
    public ClientChatMain(){
        //初始化组件
        jta = new JTextArea();
        //设置文本与不可编辑
        jta.setEditable(false);
        //注意：需要将文本框添加到滚动条中，实现滚动效果
        jsp = new JScrollPane(jta);
        //面板
        jp = new JPanel();
        //文本框
        jtf = new JTextField(10);
        //按钮
        jb = new JButton("发送");
        //注意：需要将文本框与按钮添加到面板中
        jp.add(jtf);
        jp.add(jb);


        //注意：需要将滚动条与面板全部添加到窗体中
        this.add(jsp, BorderLayout.CENTER);//放在中间
        this.add(jp,BorderLayout.SOUTH);//放在最下面，上北下南

        //注意：需要设置标题，大小，位置，关闭，是否可见
        this.setTitle("QQ聊天客户端");
        this.setSize(300,300);
        this.setLocation(300,300);

        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);
    }
}

到这一步，聊天的界面也就搭建完成了。
下一步进行：Tcp通信的思路和代码实现（后续补上链接）

记录时间：2020年11月22日