高仿的腾讯QQ设计实现
概述
其实这个设计在3个月前就已经完成了, 当时要求是基于sokect写一个TCP通信案例 作为一名痴迷UI的程序员 我可不满足 仅仅在小黑框抑或是Console里跑代码 我可是有追求的
于是乎, 有了这篇文章 , 这篇文章主要分享最终的成果 和部分特点代码(也正是基于此 我一举拿下设计课程的第一名)
实现
-
登录界面
-
主界面
聊天界面
如何? 老铁有没有毛病 至少市面上我还没看到有做到我这样高仿设计 (
我是说同龄Student 大牛请这边走)
通信
在这个设计中 有个优点是 我规定了服务端和客户端交互的通信协议 拿一份出来瞧瞧:
<xml>
<SendQQ>%1$s</SendQQ>
<ReceiveQQ>%2$s</ReceiveQQ>
<CreateTime>%3$s</CreateTime>
<MsgType>%4$s</MsgType>
<Content>%5$s</Content>
<MsgId>%6$s</MsgId>
</xml>
如果有过小程序开发经验的童鞋 就能看出来我是基于微信小程序的通信协议标准设计的 毕竟人家的香
后台通信截图
-
一对一
-
群聊
聊天的UI做的不够好 后续会继续更新
JavaFX集成Spring
这个设计采用Javafx 是因为它比Swing还要轻量级 而且控件做的更好看 , 以前不知道各位怎么使用SE写UI的 哪怕你用的是Swing 如果不进行分开管理UI 到最终你的代码臃肿无比
有了Spring 这还叫事吗? 讷
- 首先在Spring配置文件做如下配置
<bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basenames">
<list> <!--引用资源文件-->
<value>classpath:client</value>
<value>classpath:i18n</value>
</list>
</property>
<property name="fileEncodings" value="utf-8"/>
</bean>
<bean id="bundle" class="org.springframework.context.support.MessageSourceResourceBundle">
<constructor-arg name="source" ref="messageSource"/>
<constructor-arg name="locale">
<bean class="java.util.Locale" factory-method="getDefault"></bean>
</constructor-arg>
</bean>
- Spring 集成JavaFx 实际上就是将Javafx的控制器 交给Spring来管理
package qq.util;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.util.Callback;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import qq.main.AppMain;
import java.io.IOException;
import java.io.InputStream;
import java.util.ResourceBundle;
/**
* @description: spring加载fxml实现
* @author: 浮~沉
* @create: 2020-06-07 17:07
*/
@Component
public class SpringFxmlLoader2 extends FXMLLoader{
@Autowired
private ResourceBundle bundle;
public <T extends Node> T load(String url) {
try(InputStream inputStream = this.getClass().getResourceAsStream(url)) {
super.setLocation(this.getClass().getResource("/"));
super.setResources(bundle);
super.setControllerFactory(new Callback<Class<?>, Object>() {
@Override
public Object call(Class<?> param) {
return AppMain.applicationContext.getBean(param);
}
});
return this.load(inputStream);
} catch (IOException e) {
e.printStackTrace();
throw new RuntimeException("fxml文件加载异常");
}
}
}
By The Way
这个设计可以说你如果掌握了 不仅能让明白什么是TCP/IP的Socket通信 更能让你对JavaFx的使用轻车熟路, 另外这篇设计代码量在4000行左右 绝大部分是UI的代码 TCP/IP通信加起来不到500行 所以推荐有基础的童鞋使用
如果需要源码 请看留言要求