javafx 聊天室WeChat

数据分析侠

2017-12-02

关注关注

[toc]

功能和特性

基于socket实现的c/s架构的的通信
服务器和客户心跳连接
gson实现的消息通信机制
注册及登录
支持私聊和群聊。
动态更新用户列表以及用户消息提示
支持emoji表情,以及emoji表情选择器
服务器端数据库用户记录
~~实现文件传输~~
~~文件记录~~

功能展示

login
chatroom
表情包
数据库

整体架构

使用了比较简单的worker-master架构。
- 由masterserve进行事件的分发
- 由workserver具体的管理单个用户的消息请求
- 相关模型链接 Master-Worker模式
消息机制
采用json作为通信载体，后期功能性的更改较为简单
通信命令字设计如下

public final static boolean SINGLE = true;
  public final static boolean GROUP = false;
  /**
   * status
   */
  public final static int SUCCESS = 0x01;
  public final static int FAILED = 0x02;

  /**
   * message
   */
  public static Integer  COMMAND = 0x10;
  public static Integer  TIME = 0x11;
  public static Integer  USERNAME = 0x12;
  public static Integer  PASSWORD = 0x13;
  public static Integer  SPEAKER = 0x14;
  public static Integer  RECEIVER = 0x15;
  public static Integer  CONTENT= 0x16;
  /**
   * command
   */
  public final static int COM_LOGIN = 0x20;
  public final static int COM_SIGNUP = 0x21;
  public final static int COM_RESULT = 0x22;
  public final static int COM_DESCRIPTION = 0x23;
  public final static int COM_LOGOUT =0x24;
  public final static int COM_CHATWITH = 0x25;
  public final static int COM_GROUP = 0x26;
  public final static int COM_CHATALL = 0x27;
  public final static int COM_KEEP = 0x28;
  public final static int COM_MESSAGEALL = 0X29;

基本响应流程概述
- Client->Server
- 请求注册（已注册用户请求登录），请求登录状态
- 聊天命令分为单人和多人群聊
- Server->Client
- 返回登录|注册成功反馈
- 返回登录|注册失败反馈，及失败原因（用户已经注册|用户尚未注册|密码错误|服务器连接失败等...）
- 每个用户登录广播用户集
- 提取数据仓发送消息给指定用户
- 广播信息
心跳连接
之前考虑上线下线方式的时候想到的一个办法是，下线的时候给服务器发送下线通知，后面考虑了出现断网等突发情况时这样的设计将出现问题。所以采用了心跳连接的方式。
server端采用了以时间差为判断方式的连接判断方式，通过具体的实践server端的实践差为2000ms较为合适.
client维持了500ms的心跳

Server

启动环节
服务器前先查询数据库，从中加载出用户列表到内存。
（注：这样的方式在数据较大时不合适，应该设计好数据库的消息存储机制，避免服务器端的数据量大时出现问题，这个小程序因为之前在设计的时候本来没有加上数据库的打算，后期加入后，也不想再次重构服务器端）
数据库已经封装成Dao层，使用双重锁的单例模式进行控制访问
用户信息存储及转发
用户信息存储仓的设置
serverUser的实体bean在设计时采用的是 ConcurrentLinkedQueue作为信息存储仓的数据结构，保证在多线程下的安全。
每次server端读取client端发送的comment将数据发送到对应user的warehouse（数据仓）中，接着读取其控制用户的warehouse，执行命令。

client

整体基本架构为MVC
model层通过control在login和chatroom界面进行数据交互。
基本界面切换
之前对javafx不熟悉，根据写andorid经验，总觉得Javafx的界面切换不是很方便。初期将界面写了出来，后期进行了界面切换方式的修改。
参考JavaFX - 实现管理多个Stage窗口及源码解析

一些值得注意的问题

gson的使用

gson 的好用不必多说,写的时候发现一个小问题gson 在使用时会将Integer以及int都会转为Double或者double类型
解决方案如下解决gson将Integer默认转换成Double的问题

javafx UI界面更新

类似于android在UI界面只能在UI线程中进行更改，在javafx中也是如此。不过之前Android知道其异步方式的实现
在javafx中查阅资料后总结下其更改界面的方法

Platform.runLater(new Task<String>() {
    @Override
    protected String call() throws Exception {
       //do UI operato
        return null;
    }
});

文件路径

在写图片的显示时发现了显示的问题，特地的查了这部分的材料，其中比较好的几篇
Java中文件的相对路径与绝对路径
Java中文件路径及其访问

emoji表情的实现

方案1 传统emoji的表情的实现
其实早在2010年，Unicode编码就已经纳入了700多个Emoji表情，所以是可以支持表情的，只要加载支持Emoji表情的字库即可链接How to support Emojis (Part1)

但是emoji的显示时要依赖于平台的，之前在Android端写过的emoji实现由于和ios端不统一也重新定制了一份

附上对比
Android

javafx

简直要丑哭了
实现方式
emoji 的编码方式

java中String 采用 UTF-16 编码方式存储所有字符, getBytes(String charsetName)也就是转为UTF-8 即可实现编码转换。将其输出即可显示emoji
方案2 之前在Android端通过对SpannableString 的处理实现添加任何的图片到文本中
根据这个思路参考EmojiOneJava实现了功能.
而且javafx的textArea不支持文字加图片，在java分fx中textflow可以存放子组件，所以显示界面使用textflow，输入界面使用textArea，显示的表情以表情简写表示