Netty + JavaFx 实战：仿桌面版微信聊天

专栏亮点

• 以 DDD 领域驱动设计的分层模型结合 Netty，编写清晰简洁可扩展的框架结构，完成仿微信聊天核心功能项目开发。
• 使用 JavaFX 做 UI 窗体并且与业务代码分离的方式实现桌面版程序功能。在事件驱动与接口调用的方式中，使代码更加清晰、更加易于扩展。
• 清晰的设计，明确到位的落地，让理论与实践结合起来。快速上手掌握 Netty、JavaFx、架构、库表的设计与编码。

Netty 是互联网各种框架中以及物联网里都不可缺少的一部分技术栈技能，同时它也是非常重要的一个 Socket 框架。Netty 的应用非常广泛，无论在互联网、大数据以及通信和游戏行业中，都有 Netty 的身影。比如一线大厂阿里的 RPC 框架，Dubbo 协议默认使用 Netty 作为基础通信组件，用于各节点间的内部通信。

淘宝的消息中间件 RocketMQ 的消息生产者与消费者，也是采用 Netty 作为高性能、异步通信组件。除了阿里系、淘宝系，其他很多一线大厂也都在使用 Netty 构建高性能、分布式的网络服务。

前段时间写完 Netty 系列教程，看似系统，但是回顾起来还是零散，看完后一些读者反馈无法真实的上手业务，让我能否写一写关于 Netty 实际业务中的应用。那么为了更好的让自己和大家都能拿一个熟知又有趣的场景，最好的就是模仿 PC 端的微信聊天。之后这样不仅学习到了 Netty，还让 Java 程序员使用自己的语言技术栈开发了一款桌面聊天程序。

以上专栏内容请查看本专栏第一章节：专栏学习简述以及全套源码获取

说回来往往一个新知识点的学习到上手分为三个阶段；运行 HelloWord、熟练使用 API、和最终的落地应用。而这最后一步也是最重要的一步，只要将各个知识点与实际要实现的业务功能相结合，才能不断的提升自己的技能。

对一个技能最好的掌握方式就是使用自己熟悉的工具进行实践落地，通过一点点功能的实现和阅读的一堆堆的逻辑中，建设自己对代码的认知提升，对整个框架的深化理解。

为此我开始使用 Netty+JavaFx 以及 SpringBoot 等技术栈，开始搭建仿桌面版微信聊天程序，在这个过程当中显示梳理分析功能结构。这个过程可以使用 xmind 作为你的工具，整理自己的思路。接下来开始对我需要使用的技术栈做案例测试，验证核心功能是否可以满足我的需求。验证完成后开始做架构设计以及业务流程，直到最终的编码实现功能。

专栏介绍

本专栏是作者小傅哥使用 JavaFx、Netty4.x、SpringBoot、Mysql 等技术栈和偏向于 DDD 领域驱动设计方式，搭建的仿桌面版微信聊天工程实现通信核心功能。

本专栏会以三个大章节内容，逐步进行讲解：

第一部分 - UI 开发：使用 JavaFx 与 Maven 搭建 UI 桌面工程，逐步讲解登录框体、聊天框体、对话框、好友栏等各项 UI 展示及操作事件。从而在这一章节中让 Java 程序员学会开发桌面版应用；

第二部分 - 架构设计：在这一章节中我们会使用 DDD 领域驱动设计的四层模型结构与 Netty 结合使用，架构出合理的分层框架。同时还有相应库表功能的设计。相信这些内容学习后，你一定也可以假设出更好的框架；

第三部分 - 功能实现：这部分我们主要将通信中的各项功能逐步实现，包括；登录、添加好友、对话通知、消息发送、断线重连等各项功能。最终完成整个项目的开发，同时也可以让你从实践中学会技能。

界面展示

功能演示图

登陆页面

聊天页面

添加好友

消息提醒

多图解析

可以获得什么？

• 一整套可扩展的工程源代码，包括， JavaFx 开发的 UI 工程、Netty 客户端工程、DDD 结构模型的服务端工程以及专栏设计到的案例工程；
• 学会系统的架构设计能力，了解 DDD 领域驱动设计的优点，可以使用 DDD 的四层架构来在平时的业务开发中进行实际落地；
• Java 程序员掌握开发桌面版程序的能力，学会使用 JavaFx 开发出漂亮优秀的界面。学习这些内容；可以面试通关、满足工作需要、适合承接私活。

作者介绍

小傅哥，一线互联网后端工程师，CSDN 博客专家，精通 Java、Netty、Spring、SpringBoot 等技术栈，以及擅长中间件开发。

适宜人群

• Netty 爱好者；
• 处在刚接触 Netty 并希望以后从事此类技术工作的程序员；
• 需要使用 Netty 开发桌面版网络通信；
• 提升架构设计能力，写出干净整洁有章可循的代码。

购买须知

• 本专栏为图文内容，共计 25 篇。每周更新 3 篇，预计 3 月底更新完毕；
• 付费用户可享受文章永久阅读权限；
• 本专栏为虚拟产品，一经付费概不退款，敬请谅解；
• 本专栏可在 GitChat 服务号、App 及网页端 gitbook.cn 上购买，一端购买，多端阅读。

订阅福利

• 订购本专栏可获得专属海报（在 GitChat 服务号领取），分享专属海报每成功邀请一位好友购买，即可获得 25% 的返现奖励，多邀多得，上不封顶，立即提现。

• 提现流程：在 GitChat 服务号中点击「我 - 我的邀请 - 提现」。

• 购买本专栏后，服务号会自动弹出入群二维码和暗号。如果你没有收到那就先关注微信服务号「GitChat」，或者加我们的小助手「GitChatty6」咨询。（入群方式可查看 第 1 篇 文末说明）。

课程内容

登陆框体实现：结构定义、输入框和登陆

一、前言

从本章节开始我们会陆续实现各个框体的 UI 开发，内容会包括；框体拆解、工程结构、代码开发，以及最后编写事件和接口。

在 JavaFx 中，一个框体包含；窗口 (Stage)、场景(Scene)、布局(Pane)、控件(Button 等) 这四方面内容。而开发过程中可以使用 xml 和编码两种方式进行处理，一般一些预定好的会使用 xml 结构，如果是随着我们业务行为触达而产生的会开发到代码中来生成。

那么接下来我们的目标是开发一个登陆框体，样式如下；

二、登陆窗体分析

按照我们的 UI 开发诉求，将整个页面进行拆解，以方便清楚知道我们的各种类型元素放置位置；

序号	模块	宽 * 高	描述
1	整体框体	540 * 415	一个整体的 4px 的圆角面板, 去掉默认的标题和工具栏
2	背景图片	540 * 158	设置的一个背景图
3	最小化、退出	43 * 32	两个同样大小的 Button
4	用户 ID 输入框	250 * 45	明文输入框
5	用户密码输入框	250 * 45	密文输入框
6	登录按钮	250 * 45	登陆按钮 Button，鼠标进入时变换背景色，点击触发登陆
7	版本展示	400 * 25	透明的无背景可以调整，一般展示版本编号如；v1.0
8	头像	100 * 100	圆角头像图片，整个可以使用 Image 等元素开发
9	标头	200 * 15	展示名称，例如；憨憨·语约

• 以上就是我们整体窗体的一个拆解后的示意图，接下来开始按照整个示意图进行开发。
• 如果是个人开发的新项目，一般 UI 的设计可以先在草稿设计，最后在使用工具进行具体设计。如果是公司级别会有专门的设计来出所有的图稿。
• 关于设计中使用的元素可以从工程源码中获取，可以自己从矢量图仓库中寻找自己喜欢的；https://www.iconfont.cn

三、工程结构

itstack-naive-chat-ui-02└── src    ├── main    │   ├── java    │   │   └── org.itstack.navice.chat.ui    │   │       ├── view    │   │       │  └── Login.java    │   │       └── Application.java    │   └── resources    │       └── fxml.login    │           ├── css    │           │   └── login.css    │           ├── img    │           │   ├── close_0.png    │           │   ├── close_1.png    │           │   ├── head_default_100.png    │           │   ├── logo.png    │           │   ├── min_0.png    │           │   ├── min_1.png    │           │   └── show.png    │           └── login.fxml    └── test        └── java            └── org.itstack.test                └── ApiTest.java

• 工程结构上我们先从简单规划；启动层、展示层、资源配置层，三方面。后面在随着开发内容的增多会不断的优化结构
• fxml 是 JavaFx 开发的资源文件，可以设置界面展示，同时 xml 配置里可以引入 css 文件、设置元素大小等

四、代码讲解

1. login.fxml 配置

在 maven 管理下我们将配置文件放到资源文件夹下；fxml/login/login.fxml

整体外框 xml

<?import javafx.geometry.Insets?><?import javafx.scene.control.*?><?import javafx.scene.layout.Pane?><?import javafx.scene.text.Font?><Pane id="login" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="