基於Java的Socket類Tcp網路程式設計實現實時聊天互動程式(一):QQ聊天介面的搭建

程式碼屆的小白發表於2020-11-22

首先把服務端和客戶端的聊天介面視窗搭建完成

效果可以看下圖:
在這裡插入圖片描述
主要包括:窗體、滾動條、皮膚、按鈕、文字框和文字域

這部分比較簡單,直接上程式碼:

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日

相關文章