基於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日