java编写简单聊天界面(java简单聊天界面制作代码) 收藏 0

websocket实现一个聊天室

上次讲了websoket的基础知识和应用插件，今天我们来用websocket来实现一个聊天程序。先看几张界面截图：

聊天界面：

历史消息查看：

用户上线提醒：

在线体验地址：地址

功能结构图

可以看到，该聊天室主要分为三个部分：消息实时推送，聊天界面与交互实现，用户认证模块。下面讲讲这个3个模块的实现方式。

整体架构

前端：vue-cli搭建+websock客户端

后端：nodeJs+websock服务端+JWT认证

消息推送模块实现

主要用到了websock的双工通信功能： 服务端核心代码：

上面的代码不难看出，服务端定义了一个枚举：sendDataType来告诉客户端收到消息的类型，分别是:

客户端核心代码：

客户端向服务端推送消息同样定义了枚举来让服务端区分客户端的消息类型：

服务端和客户端相互约定好消息类型，根据不同的类型做出不同的响应，这样就能完成我们的第一个核心功能–实时通讯

客户端交互界面实现

该部分主要分为用户列表，用户交互，消息展示三个部分。主要是用vue来渲染的，样式部分没有用第三方的库，消息展示用到了localStorage,它们主要是：

因为本应用没有加入数据库，所以用h5的缓存技术来缓存一些用户信息,有了localStorage的功能，让我们的应用能展示历史消息。 消息通知的显示用到了一个push.js的库，比较轻量，可以结合:animate.css使用。

用户认证模块

本应用没有登录模块，所以需要实现一个用户认证模块，来保证用户篡改和唯一性，流程图如下：

这里用到了2个库，第一个是uuid用来生成唯一的用户id，第二个是jsonwebtoken。用来生成加密token，可以存储用户id,还可以用来校验是否被篡改和过期。 用户第一次打开的时候，服务端会返回分配的uuid和token。服务端会保存在本地，下次用户连入的时候，会将uuid和token发给服务器做验证，合法才让用户接入websocket服务，否则会被强制断开连接。

写在最后

本文主要介绍websocket实现一个简单的聊天室功能，没有接入数据库，所以是没法做持久化的，用户聊天记录和身份信息保存在用户本地，通信过程也没有加密，仅供参考。上面也提供了核心实现代码，感兴趣的小伙伴可以自己动手尝试尝试，该聊天小程序的功能会逐渐完善，可以持续关注。下期我会将这个简单的引用使用electron将该引用打包成一个桌面应用的安装程序。 electron可以使用JavaScript，HTML和CSS 构建跨平台的桌面应用程序。功能很强大，它相当于是将nodeJs和网页结合了，下次会做出具体介绍。

相关阅读：

一文看懂websocket

聊天应用在线体验

学习如逆水行舟，不进则退，前端技术飞速发展，如果每天不坚持学习，就会跟不上，我会陪着大家，每天坚持推送博文，跟大家一同进步，希望大家能关注我，第一时间收到最新文章。

个人公众号：

基于 SpringBoot + Vue 框架开发的网页版聊天室项目（有视频教程）

若依是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。

• 前端采用Vue、Element UI。
• 后端采用Spring Boot、Spring Security、Redis & Jwt。
• 权限认证使用Jwt，支持多终端认证系统。
• 支持加载动态权限菜单，多方式轻松权限控制。
• 高效率开发，使用代码生成器可以一键生成前后端代码。

• 用户管理：用户是系统操作者，该功能主要完成系统用户配置。
• 部门管理： 配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。关注Java项目分享
• 岗位管理： 配置系统用户所属担任职务。
• 菜单管理： 配置系统菜单，操作权限，按钮权限标识等。
• 角色管理： 角色菜单权限分配、设置角色按机构进行数据范围权限划分。
• 字典管理： 对系统中经常使用的一些较为固定的数据进行维护。
• 参数管理： 对系统动态配置常用参数。
• 通知公告： 系统通知公告信息发布维护。
• 操作日志： 系统正常操作日志记录和查询；系统异常信息日志记录和查询。
• 登录日志： 系统登录日志记录查询包含登录异常。
• 在线用户： 当前系统中活跃用户状态监控。
• 定时任务： 在线（添加、修改、删除)任务调度包含执行结果日志。
• 代码生成： 前后端代码的生成（java、html、xml、sql）支持CRUD下载 。
• 系统接口： 根据业务代码自动生成相关的api接口文档。
• 服务监控： 监视当前系统CPU、内存、磁盘、堆栈等相关信息。
• 缓存监控： 对系统的缓存信息查询，命令统计等。
• 在线构建器： 拖动表单元素生成相应的HTML代码。
• 连接池监视： 监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。

微言聊天室是基于前后端分离，采用SpringBoot+Vue框架开发的网页版聊天室。使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理，以WebSocket+Socket.js+Stomp.js实现消息的发送与接收，监听。搭建FastDFS文件服务器用于保存图片，使用EasyExcel导出数据，使用Vue.js结合Element UI进行显示弹窗和数据表格分页等功能，以及整个系统的界面进行UI设计，并且使用MyBatis结合数据库MySQL进行开发。最后使用了Nginx进行部署前后端分离项目。

功能实现：群聊，单聊，邮件发送，emoji表情发送，图片发送，用户管理，群聊记录管理，Excel的导出。关注Java项目分享

1. Spring Boot
2. Spring Security
3. MyBatis
4. MySQL
5. WebSocket
6. RabbitMQ
7. Redis

1. Vue
2. ElementUI
3. axios
4. vue-router
5. Vuex
6. WebSocket
7. vue-cli4 …

客户端界面-群聊主界面

客户端界面-私聊界面

管理端界面-用户管理

管理端界面-群聊消息管理

1. clone 项目到本地
2. 在本地 MySQL 中创建一个空的数据库 subtlechat，在该数据库中运行提供的数据库脚本subtlechat.sql,完成表的创建和数据的导入。
3. 提前准备好Redis，在项目中的mail模块的 application.yml 文件中，将 Redis 配置改为自己的。关注Java项目分享
4. 提前准备好RabbitMQ，在项目中的mail模块的 application.yml 文件中和web模块中的 application-dev.properties，将 RabbitMQ 的配置改为自己的。
5. 注册邮箱的授权码，在项目中的mail模块的 application.yml 文件中填入

1. 搭建fastdfs服务器，fastdfs-client.properties文件改成自己的。
2. 在 IntelliJ IDEA 中打开subtlechat项目，先启动 mail模块，再启动web模块。
3. 启动vue项目。

点赞转发本文后私信【0724】四个数字即可获取前后端代码和操作教学视频

前端代码

后端代码

操作视频

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com