【2023】Kotlin教程第四篇项目实战第26章项目实战2：开发Kotlin版QQ聊天工具 26.5 任务4：客户端UI实现

àì夳堔傛蜴生んèń 2024-03-23 16:04 44阅读 0赞

### 【2023】Kotlin教程 ###

#### 文章目录 ####

*   *  【2023】Kotlin教程
     *   *  第四篇 项目实战
         *  第26章 项目实战2：开发Kotlin版QQ聊天工具
         *   *  26.5 任务4：客户端UI实现
             *   *  26.5.1 迭代4.1：登录窗口实现
                 *  26.5.2 迭代4.2：好友列表窗口实现
                 *  26.5.3 迭代4.3：聊天窗口实现

![在这里插入图片描述][33e07eb279e04069a3d9e2f48f066fbc.png_pic_center]

#### 第四篇 项目实战 ####

#### 第26章 项目实战2：开发Kotlin版QQ聊天工具 ####

##### 26.5 任务4：客户端UI实现 #####

从客观上讲，客户端U实现开发的工作量是很大的，有很多细节工作需要完成。

###### 26.5.1 迭代4.1：登录窗口实现 ######

客户端启动马上显示用户登录窗口，界面如下图所示，

![在这里插入图片描述][68315098fe5442228dd98add36edaf95.png_pic_center]

界面中有很多组件，但是本例中主要使用文本框、密码框和两个按钮。等用户输入QQ号码和QQ密码，单击“登录”按钮，如果输入的账号和密码正确，则登录成功进入好友列表窗口；如果输入的不正确，则弹出如下图所示的对话框。

![在这里插入图片描述][79e8a4d0c61c464dad438a98fd704758.png_pic_center]

用户登录窗口LoginFrame代码如下：

package com.dingjiaxiong.client
    
    import com.beust.klaxon.JsonObject
    import com.beust.klaxon.json
    import java.awt.Color
    import java.awt.Font
    import java.awt.Toolkit
    import java.awt.event.WindowAdapter
    import java.awt.event.WindowEvent
    import java.net.DatagramPacket
    import java.net.InetAddress
    import javax.swing.*
    
    /**
     * @Projectname: QQ
     * @Classname: LoginFrame
     * @Author: Ding Jiaxiong
     * @Data:2023/4/7 14:47
     */
    
    class LoginFrame : JFrame() {
        
    
        // 获得当前屏幕的宽和高
        private val screenWidth = Toolkit.getDefaultToolkit().screenSize.getWidth()
        private val screenHeight = Toolkit.getDefaultToolkit().screenSize.getHeight()
    
        // 登录窗口宽和高
        private val frameWidth = 329
        private val frameHeight = 250
    
        // QQ号码文本框
        private var txtUserId = JTextField()
    
        // QQ密码框
        private var txtUserPwd = JPasswordField()
    
        // 蓝线面板
        private val paneLine: JPanel
            get() {
        
    
                val paneLine = JPanel().apply {
        
                    layout = null
                    setBounds(7, 54, 308, 118)
                    border = BorderFactory.createLineBorder(Color(102, 153, 255), 1)
                }
    
                with(JLabel()) {
        
                    //lblHelp
                    setBounds(227, 47, 67, 21)
                    font = Font("Dialog", Font.PLAIN, 12)
                    foreground = Color(51, 51, 255)
                    text = "忘记密码？"
                    paneLine.add(this)
                }
                with(JLabel()) {
        
                    //lblUserPwd
                    text = "QQ密码"
                    font = Font("Dialog", Font.PLAIN, 12)
                    setBounds(21, 48, 54, 18)
                    paneLine.add(this)
                }
    
                with(JLabel()) {
        
                    //lblUserId
                    text = "QQ号码↓"
                    font = Font("Dialog", Font.PLAIN, 12)
                    setBounds(21, 14, 55, 18)
                    paneLine.add(this)
                }
    
                txtUserId.setBounds(84, 14, 132, 18)
                paneLine.add(this.txtUserId)
    
                txtUserPwd.setBounds(84, 48, 132, 18)
                paneLine.add(this.txtUserPwd)
    
                with(JCheckBox()) {
        
                    //chbAutoLogin
                    text = "自动登录"
                    font = Font("Dialog", Font.PLAIN, 12)
                    setBounds(79, 77, 73, 19)
                    paneLine.add(this)
                }
                with(JCheckBox()) {
        
                    //chbHideLogin
                    text = "隐身登录"
                    font = Font("Dialog", Font.PLAIN, 12)
                    setBounds(155, 77, 73, 19)
                    paneLine.add(this)
                }
                return paneLine
            }
    
        init {
        
    
            /// 初始化当前窗口
            iconImage = Toolkit.getDefaultToolkit().getImage("images/QQ.png")
            title = "QQ登录"
            isResizable = false
            layout = null
            // 设置窗口大小
            setSize(frameWidth, frameHeight)
            // 计算窗口位于屏幕中心的坐标
            val x = (screenWidth - frameWidth).toInt() / 2
            val y = (screenHeight - frameHeight).toInt() / 2
            // 设置窗口位于屏幕中心
            setLocation(x, y)
    
            // 添加蓝线面板
            contentPane.add(paneLine)
    
            with(JLabel()) {
        
                icon = ImageIcon("images/QQll.JPG")
                setBounds(0, 0, 325, 48)
                contentPane.add(this)
            }
    
            // 初始化登录按钮
            val btnLogin = JButton().apply {
        
                setBounds(152, 181, 63, 19)
                font = Font("Dialog", Font.PLAIN, 12)
                text = "登录"
                contentPane.add(this)
            }
            // 注册登录按钮事件监听器
            btnLogin.addActionListener {
        
                // 先进行用户输入验证，验证通过再登录
                val userId = txtUserId.text
                val password = String(txtUserPwd.password)
    
                val user = login(userId, password)
                if (user != null) {
        
                    // 登录成功调转界面
                    println("登录成功调转界面")
                    FriendsFrame(user).isVisible = true
                    // 设置登录窗口可见
                    isVisible = false
                } else {
        
                    JOptionPane.showMessageDialog(null, "您QQ号码或密码不正确")
                }
            }
    
            // 初始化取消按钮
            val btnCancel = JButton().apply {
        
                setBounds(233, 181, 63, 19)
                font = Font("Dialog", Font.PLAIN, 12)
                text = "取消"
                contentPane.add(this)
            }
            // 注册取消按钮事件监听器
            btnCancel.addActionListener {
        
                // 关闭Socket
                socket.close()
                // 退出系统
                System.exit(0)
            }
    
            // 初始化【申请号码↓】按钮
            with(JButton()) {
        
                setBounds(14, 179, 99, 22)
                font = Font("Dialog", Font.PLAIN, 12)
                text = "申请号码↓"
                contentPane.add(this)
            }
    
            // 注册窗口事件
            addWindowListener(object : WindowAdapter() {
        
                // 单击窗口关闭按钮时调用
                override fun windowClosing(e: WindowEvent) {
        
                    // 关闭Socket
                    socket.close()
                    // 退出系统
                    System.exit(0)
                }
            })
        }
    
        // 客户端向服务器发送登录请求
        private fun login(userId: String, password: String): Map<String, Any>? {
        
    
            val address = InetAddress.getByName(SERVER_IP)
    
            var jsonObj = json {
        
                obj(
                    "command" to COMMAND_LOGIN,
                    "user_id" to userId,
                    "user_pwd" to password
                )
            }
            // 字节数组
            var buffer = jsonObj.toJsonString().toByteArray()
            // 创建DatagramPacket对象
            var packet = DatagramPacket(buffer, buffer.size, address, SERVER_PORT)
            // 发送数据
            socket.send(packet)
    
            // 接收数据
            // 准备一个缓冲区
            buffer = ByteArray(1024)
            packet = DatagramPacket(buffer, buffer.size, address, SERVER_PORT)
            socket.receive(packet)
    
            val jsonString = String(buffer, 0, packet.length)
            println("从服务器返回的消息：$jsonString")
            jsonObj = parser.parse(StringBuilder(jsonString)) as JsonObject
    
            //登录失败
            if (jsonObj.string("result") == "-1") return null
    
            return jsonObj as Map<String, Any>?
        }
    }

###### 26.5.2 迭代4.2：好友列表窗口实现 ######

任各户瑞用户登录成功之后，界面会挑转到好友列表口，界面如下图所示。

![在这里插入图片描述][fff1f90041bc43e18000c0f56cb24582.png_pic_center]

好友列表窗口类FriendsFrame代码如下：

package com.dingjiaxiong.client
    
    import com.beust.klaxon.JsonObject
    import com.beust.klaxon.json
    import javafx.scene.input.MouseEvent
    import kotlinx.coroutines.*
    import java.awt.BorderLayout
    import java.awt.GridLayout
    import java.awt.Toolkit
    import java.awt.event.MouseAdapter
    import java.awt.event.WindowAdapter
    import java.awt.event.WindowEvent
    import java.net.DatagramPacket
    import java.net.InetAddress
    import javax.swing.*
    
    /**
     * @Projectname: QQ
     * @Classname: FriendsFrame
     * @Author: Ding Jiaxiong
     * @Data:2023/4/7 14:50
     */
    
    class FriendsFrame(private val user: Map<String, Any>) : JFrame() {
        
    
        // 好友列表
        private val friends: List<Map<String, String>>
    
        // 好友标签控件列表
        private val lblFriendList = mutableListOf<JLabel>()
    
        // 获得当前屏幕的宽
        private val screenWidth = Toolkit.getDefaultToolkit().screenSize.getWidth()
    
        // 登录窗口宽和高
        private val frameWidth = 260
        private val frameHeight = 600
    
        //声明一个协程引用
        private var job: Job? = null
    
        // 协程运行状态
        private var isRunning = true
    
        init {
        
            /// 初始化当前Frame
            title = "QQ2006"
            setBounds(screenWidth.toInt() - 300, 10, frameWidth, frameHeight)
    
            iconImage = Toolkit.getDefaultToolkit().getImage(("images/QQ.png"))
    
            // 设置布局
            val borderLayout = contentPane.layout as BorderLayout
            borderLayout.vgap = 5
    
            /// 初始化用户列表
            friends = user["friends"] as List<Map<String, String>>
            val userId = user["user_id"] as String
            val userName = user["user_name"] as String
            val userIcon = user["user_icon"] as String
    
            with(JLabel(userName)) {
        
                horizontalAlignment = SwingConstants.CENTER
                val iconFile = "images/$userIcon.jpg"
                icon = ImageIcon(iconFile)
                contentPane.add(this, BorderLayout.NORTH)
            }
    
            val panel1 = JPanel()
            panel1.layout = BorderLayout(0, 0)
    
            with(JScrollPane()) {
        
                border = BorderFactory.createLineBorder(Color.blue, 1)
                setViewportView(panel1)
                contentPane.add(this, BorderLayout.CENTER)
            }
    
            with(JLabel("我的好友")) {
        
                horizontalAlignment = SwingConstants.CENTER
                panel1.add(this, BorderLayout.NORTH)
            }
    
            // 好友列表面板
            val friendListPanel = JPanel()
            friendListPanel.layout = GridLayout(50, 0, 0, 5)
            panel1.add(friendListPanel)
    
            // 初始化好友列表
            friends.forEach {
         friend ->
    
                val friendUserId = friend["user_id"]
                val friendUserName = friend["user_name"]
                val friendUserIcon = friend["user_icon"]
                // 获得好友在线状态
                val friendUserOnline = friend["online"]
    
                val lblFriend = JLabel(friendUserName).apply {
        
    
                    toolTipText = friendUserId
                    val friendIconFile = "images/$friendUserIcon.jpg"
                    icon = ImageIcon(friendIconFile)
                    // 在线设置可用，离线设置不可用
                    isEnabled = friendUserOnline != "0"
    
                    // 添加到列表集合
                    lblFriendList.add(this)
                    // 添加到面板
                    friendListPanel.add(this)
                }
    
                lblFriend.addMouseListener(object : MouseAdapter() {
        
                    override fun mouseClicked(e: MouseEvent) {
        
                        // 用户图标双击鼠标时显示对话框
                        if (e.clickCount == 2) {
        
                            stopCoroutine()
                            ChatFrame(this@FriendsFrame, user, friend).isVisible = true
                        }
                    }
                })
            }
    
            // 注册窗口事件
            addWindowListener(object : WindowAdapter() {
        
                // 单击窗口关闭按钮时调用
                override fun windowClosing(e: WindowEvent) {
        
                    // 当前用户下线
                    val jsonObj = json {
        
                        obj("command" to COMMAND_LOGOUT, "user_id" to userId)
                    }
    
                    val b = jsonObj.toJsonString().toByteArray()
                    val address = InetAddress.getByName(SERVER_IP)
                    // 创建DatagramPacket对象
                    val packet = DatagramPacket(b, b.size, address, SERVER_PORT)
                    // 发送
                    socket.send(packet)
                    // 关闭Socket
                    socket.close()
                    // 退出系统
                    System.exit(0)
                }
            })
            println("启动接收消息子协程")
            resetCoroutine()
        }
    
        // 刷新好友列表
        fun refreshFriendList(userIdList: List<String>) {
        
            // 初始化好友列表
            lblFriendList.forEach {
        
                val friendId = it.toolTipText!!
                //在线用户列表userIdList中存在friendId
                it.isEnabled = userIdList.contains(friendId)
            }
        }
    
        // 重新启动接收消息子协程
        fun resetCoroutine() = runBlocking<Unit> {
        
            isRunning = true
            // 创建并启动协程
            job = GlobalScope.launch {
        
                run()
            }
        }
    
        // 停止接收消息子协程
        fun stopCoroutine() = runBlocking<Unit> {
        
            isRunning = false
            //取消协程
            job?.cancelAndJoin()
        }
    
        //协程体执行的挂起函数
        suspend fun run() {
        
            // 准备一个缓冲区
            val buffer = ByteArray(1024)
            while (isRunning) {
        
    
                val address = InetAddress.getByName(SERVER_IP)
                /* 接收数据报 */
                val packet = DatagramPacket(buffer, buffer.size, address, SERVER_PORT)
                try {
        
                    // 开始接收
                    socket.receive(packet)
    
                    val stringObj = String(buffer, 0, packet.length)
                    println("客户端收到的消息：$stringObj")
    
                    val jsonObj = parser.parse(StringBuilder(stringObj)) as JsonObject
    
                    val cmd = jsonObj.int("command")
    
                    if (cmd != null && cmd == COMMAND_REFRESH) {
        
                        val userIdList = jsonObj["OnlineUserList"] as List<String>
                        // 刷新好友列表
                        refreshFriendList(userIdList)
                    }
                    delay(100L)
                } catch (e: Exception) {
        
                    //捕获超时异常，继续
                }
            }
        }
    
    }

###### 26.5.3 迭代4.3：聊天窗口实现 ######

在客户端用户双击好友列表中的好友，会弹出好友聊天窗口，界面如下图所示，

![在这里插入图片描述][ff1ef24d3e944737b4572ebc2dd73ae2.png_pic_center]

在这里可以给好友发送聊天信息，可以接收好友回复的信息

聊天窗口类ChatFrame代码如下：

package com.dingjiaxiong.client
    
    import com.beust.klaxon.JsonObject
    import kotlinx.coroutines.*
    import java.awt.Color
    import java.awt.Toolkit
    import java.awt.event.WindowAdapter
    import java.awt.event.WindowEvent
    import java.net.DatagramPacket
    import java.net.InetAddress
    import java.text.SimpleDateFormat
    import java.util.*
    import javax.swing.*
    
    /**
     * @Projectname: QQ
     * @Classname: ChatFrame
     * @Author: Ding Jiaxiong
     * @Data:2023/4/7 14:53
     */
    
    class ChatFrame(// 好友列表Frame
        private val friendsFrame: FriendsFrame,
        user: Map<String, Any>,
        friend: Map<String, String>
    ) : JFrame() {
        
    
        // 当前用户Id
        private val userId = user["user_id"] as String
    
        // 聊天好友用户Id
        private val friendUserId: String
    
        // 聊天好友用户名
        private val friendUserName: String
    
        // 获得当前屏幕的高和宽
        private val screenHeight = Toolkit.getDefaultToolkit().screenSize.getHeight()
        private val screenWidth = Toolkit.getDefaultToolkit().screenSize.getWidth()
    
        // 登录窗口宽和高
        private val frameWidth = 360
        private val frameHeight = 330
    
        // 查看消息文本区
        private val txtMainInfo = JTextArea()
    
        // 发送消息文本区
        private val txtInfo = JTextArea()
    
        // 消息日志
        private val infoLog = StringBuffer()
    
        // 日期格式化
        private val dateFormat = SimpleDateFormat("yyyy-MM-dd HH:mm:ss")
    
        //声明一个协程引用
        private var job: Job? = null
    
        // 协程运行状态
        private var isRunning = true
    
        // 查看消息面板
        private val panLine1: JPanel
            get() {
        
                txtMainInfo.isEditable = false
    
                val panLine1 = JPanel().apply {
        
                    layout = null
                    setBounds(5, 5, 330, 210)
                    border = BorderFactory.createLineBorder(Color.blue, 1)
                }
                with(JScrollPane()) {
        
                    setBounds(5, 5, 320, 200)
                    panLine1.add(this)
                    setViewportView(txtMainInfo)
                }
    
                return panLine1
            }
    
        // 发送消息面板
        private val panLine2: JPanel
            get() {
        
                val panLine2 = JPanel().apply {
        
                    layout = null
                    setBounds(5, 220, 330, 50)
                    border = BorderFactory.createLineBorder(Color.blue, 1)
                    add(sendButton)
                }
                with(JScrollPane()) {
        
                    setBounds(5, 5, 222, 40)
                    panLine2.add(this)
                    setViewportView(txtInfo)
                }
    
                return panLine2
            }
    
        private val sendButton: JButton
            get() {
        
                val button = JButton("发送").apply {
        
                    setBounds(232, 10, 90, 30)
                }
                button.addActionListener {
        
                    sendMessage()
                    txtInfo.text = ""
                }
                return button
            }
    
        init {
        
    
            val userIcon = user["user_icon"]!!
            friendUserId = friend["user_id"]!!
            friendUserName = friend["user_name"]!!
    
            /// 初始化当前Frame
            val iconFile = "images/$userIcon.jpg"
            iconImage = Toolkit.getDefaultToolkit().getImage(iconFile)
            title = "与${
          friendUserName}聊天中..."
            isResizable = false
            layout = null
    
            // 设置Frame大小
            setSize(frameWidth, frameHeight)
            // 计算Frame位于屏幕中心的坐标
            val x = (screenWidth - frameWidth).toInt() / 2
            val y = (screenHeight - frameHeight).toInt() / 2
            // 设置Frame位于屏幕中心
            setLocation(x, y)
    
            // 初始化查看消息面板
            contentPane.add(panLine1)
            // 初始化发送消息面板
            contentPane.add(panLine2)
    
            // 注册窗口事件
            addWindowListener(object : WindowAdapter() {
        
                // 单击窗口关闭按钮时调用
                override fun windowClosing(e: WindowEvent) {
        
                    //停止协程
                    stopCoroutine()
                    isVisible = false
                    // 重启好友列表协程
                    friendsFrame.resetCoroutine()
                }
            })
            // 启动接收消息子协程
            resetCoroutine()
        }
    
        private fun sendMessage() {
        
    
            if (txtInfo.text != "") {
        
    
                // 获得当前时间，并格式化
                val date = dateFormat.format(Date())
    
                val info = "#$date#\n您对${
          friendUserName}说：${
          txtInfo.text}"
                infoLog.append(info).append('\n')
                txtMainInfo.text = infoLog.toString()
    
                val jsonObj = JsonObject()
                jsonObj["receive_user_id"] = friendUserId
                jsonObj["user_id"] = userId
                jsonObj["message"] = txtInfo.text
                jsonObj["command"] = COMMAND_SENDMSG
    
                val address = InetAddress.getByName(SERVER_IP)
                // 发送数据报
                val buffer = jsonObj.toJsonString().toByteArray()
                val packet = DatagramPacket(buffer, buffer.size, address, SERVER_PORT)
                socket.send(packet)
            }
        }
    
        // 重新启动接收消息子协程
        fun resetCoroutine() = runBlocking<Unit> {
        
            isRunning = true
            // 创建协程
            job = GlobalScope.launch {
        
                run()
            }
        }
    
        // 停止接收消息子协程
        fun stopCoroutine() = runBlocking<Unit> {
        
            isRunning = false
            //取消协程
            job?.cancelAndJoin()
        }
    
        //协程体执行的挂起函数
        suspend fun run() {
        
            // 准备一个缓冲区
            val buffer = ByteArray(1024)
            while (isRunning) {
        
    
                val address = InetAddress.getByName(SERVER_IP)
                /* 接收数据报 */
                val packet = DatagramPacket(buffer, buffer.size, address, SERVER_PORT)
                try {
        
                    // 开始接收
                    socket.receive(packet)
    
                    val stringObj = String(buffer, 0, packet.length)
                    // 打印接收的数据
                    println("从服务器接收的数据：$stringObj")
    
                    val jsonObj = parser.parse(StringBuilder(stringObj)) as JsonObject
    
                    val cmd = jsonObj.int("command")
                    //command不等于空值时候执行，不等于空值或是
                    if (cmd != null && cmd == COMMAND_REFRESH) {
        
                        // 获得好友列表
                        val userIdList = jsonObj["OnlineUserList"] as List<String>
                        // 刷新好友列表
    //                    friendsFrame.refreshFriendList(userIdList)
                    } else {
        
                        // 获得当前时间，并格式化
                        val date = dateFormat.format(Date())
                        val message = jsonObj.string("message")
                        if (message != null) {
        
                            val info = "#$date#\n${
          friendUserName}对您说：$message"
                            infoLog.append(info).append('\n')
    
                            txtMainInfo.text = infoLog.toString()
                            txtMainInfo.caretPosition = txtMainInfo.document.length
                        }
                    }
                    delay(100L)
                } catch (e: Exception) {
        
                    //捕获超时异常，继续
                }
            }
        }
    }

【提示】协程的使用原则，当前窗口中启动的协程，在窗口退出时、隐藏时是一定停止协程。

[33e07eb279e04069a3d9e2f48f066fbc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/30860f950f0849b4a33258399fdb7250.png
[68315098fe5442228dd98add36edaf95.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/5244b2bba85847c2a3d3f455879712b8.png
[79e8a4d0c61c464dad438a98fd704758.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/691181d0b1c04a68b2139eee629e14ac.png
[fff1f90041bc43e18000c0f56cb24582.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/f0bea2b8c34646dd9bfc6a397471ed12.png
[ff1ef24d3e944737b4572ebc2dd73ae2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/7e3929eef265424cae1e6c66bde1aada.png