使用前后端分离进行JavaWeb开发多用户在线聊天系统,前端由HTML5**、CSS、Javascript开发,后端系统以Java语言开发。后端系统在本地开发完成后打包放在腾讯云端centOS服务器上不间断运行,可实现任何终端都可访问聊天系统。
具体要使用的技术还有Nginx、redis、第三方框架等。笔者这里通过服务器IP地址进行访问,有需要也可设置通过域名访问系统,欢迎讨论交流。
前端的编写主要实现注册页面index.html和聊天页面chat.html,注册页面对账号和密码输入内容进行限制,可通过代码进行自定义限制:
前端数据通过webSocket与服务器进行通信,因此首先得有自己的服务器,服务器可在腾讯云或阿里云进行注册,本系统采用系统8080端口,云服务器为centOS系统,。有了自己的服务器之后在下面的index.html登录页面中需要把ip换成自己的服务器ip地址:
index.html
前端开发还使用到了element框架、vue框架,登陆页面index.html完整代码如下:
chat.html
聊天页面chat.html中也需要将ip地址换为自己服务器的ip地址:
聊天页面chat.html完整代码:
chat.css
完整代码如下:
images、assets图片文件
这里我将聊天背景图和注册页面图片分成了两个图片文件,分别是images文件夹和assets文件夹,如果需要修改图片可替换图片文件,并在index.html和chat.html中修改图片索引:
我的图片github地址:
https://github.com/letme5/letme5.github.io
后台使用java开发,使用了SpingBoot、WebSocket等框架。
分为config、controller、pojo三个package。
config
config下有三个类,CrossConfig用于跨域访问,RedisConfig用于后台数据管理,WebSocketConfig用于前后端交互连接。
CrossConfig类:
**RedisConfig类:
WebSocket类:
controller
ChatController类:
UserController类:
pojo
ResponseEntity类:
User类:
https://pan.baidu.com/s/1JL85E2h3sN_eUjLOPsceWg
提取码:1234
开启Redis服务
安装好Redis、Nginx之后,首先需要开启Redis服务,服务器上使用命令:
cd /usr/local/redis-3.2.9
redis-server redis.conf
开启Nginx服务
此时我们使用命令切换到Nginx安装目录的html目录下:
cd /usr/local/nginx/html
此时我们需要启动Nginx服务,使用命令:
cd /usr/local/nginx/sbin
https://blog.csdn.net/weixin_44773580/article/details/nginx
开启后台Java服务
接着我们要将Java项目使用Maven进行打包,打包完成后将jar包包拷贝至/usr/local路径下,此时使用命令在服务器运行后端服务:
java -jar tencent-0.0.1-SNAPSHOT.jar //前台运行
或
java -jar tencent-0.0.1-SNAPSHOT.jar & //后台运行
最后附上笔者的代码文件:
前端:https://github.com/letme5/letme5.github.io
后端:https://pan.baidu.com/s/1JL85E2h3sN_eUjLOPsceWg (提取码:1234 )
- 检查redis 数据库是否有打开:
redis-cli
如果显示127.0.0.1:6379表示redis成功打开;显示no connect 就代表redis没有启动,需要先启动redis数据库, 启动方式:
cd /usr/local/redis-3.2.9
redis-server redis.conf
- 检查java后台程序是否启动,服务器输入:
jps
查看是否有jar的进程,如果没有,通过命令cd进入到你放置jar包的目录下,启动java服务:
java -jar (name).jar
- 启动前端页面服务器,我们放置的在Nginx服务器中如果访问 http://xxx.xxx.xxx.xxx/显示无法访问,那么大概率没有启动Nginx,服务器使用命令开启Nginx服务:
cd /usr/local/nginx/sbin
https://blog.csdn.net/weixin_44773580/article/details/nginx
4.如果报错显示一个 /var/run/nginx/nginx.pid not found…这个代表启动的时候会在/var/run/nginx这个目录下生成一个进程ID文件,没有的话我们创建即可,使用命令:
mkdir -p /var/run/nginx
创建完成再次启动: