Hello，今天给大家带来的是我的一个Web项目的开发过程的相关步骤，这个项目实现的功能是一个Web在线聊天室，简单的来说就是实现在网页版的聊天框，能够实现对于用户信息进行注册，登录，在网页上收发消息的功能。
这个项目也实现了我和别的小伙伴一起实现在线聊天的功能，这是我实现的Web聊天室网页链接地址：[http://47.100.138.17:8080/chatroom/index.html]
感兴趣的小伙伴可以注册登录呦在网上尝试一下聊天。
第一步：首先是第一步对于需求分析创建需要的数据库表单
对于用户使用Web聊天室实现来说，需要用户用自己的账号，密码登录，同时有自己设置的昵称信息，头像信息；在登录之后有聊天室需要提供频道来使用户在其中进行交流；在交流的时候需要用户去发送消息，不同的用户会在不同的时间发不同的消息内容。
因此呢，根据这些需求就设计了
User（用户表）、channel（频道表）、message（消息表）
三个表单信息：
三个表单的关系在navicat的EP图中表现是如下的：
第二步：创建一个Mavaen项目，将三个表单的实体类放在Model中
根据MySQL中数据库设计的信息在实体类中实现其属性，利用@Getter、@Setter、@ToString注解快速实现对于类相关方法的生产（需要导入lombok的依赖包）。
第三步：设计关键性的工具类：数据库操作的JDBC工具类；json和java对象转换，session操作的Web工具类
（1）对于JDBC的工具类
在JDBC工具类设计中提供连接连接数据库和释放数据库资源的关键方法。同时为保证线程安全部分功能使用懒汉式的双重校验锁的形式来实现。实现代码如下：
（2）对于Web工具类
在Web工具类设计中提供Java对象转为json字符串，json字符串转为Java对象，获取当前登录用户的session信息的功能。为保证线程安全，使用懒汉式的双重校验锁的写法。具体实现代码的如下：
第四步：实现用户的注册功能
（1）对于用户注册的前端处理实现
在前端中需要创建相应的标签来让用户将自己的用户名，密码，昵称等相关信息输入当中，在标签中设置required则表示必须填写的内容。
用户将需要填写的内容在浏览器上输入完毕之后由前端页面将用户信息获取保存， 将前端中标记好的相关用户信息，放在一个formdata表单中进行存储。创建好格式，调用一个ajax请求，将当前页面的信息进行上传后端，用callback函数做接收信息的处理，如果成功就返回到登录页面，如果是失败就跳提示注册失败的原因。
举例：对于头像文件信息，设置为一个event事件，将event事件传入下方中showHead中。通过获取其中的文件将其保存在vue框架中的head中，在将文件信息写入到body中发送。
实现代码如下：
（2）对于用户注册的后端处理实现
（tips：在写后端的响应之前做一个测试，利用抓包工具验证是否能够正常的发送请求和响应。）
接下来进行对于RegisterServlet的开发，首先设置Servlet注解获取前端传过来的formdata表单数据，在其次对于传过来的数据进行构造成一个实体类，存到数据库中。在针对于头像文件获取的时候，需要先获取存储照片的后缀名，将其保存下来创建一个时间戳相关的随机字符串构成重命名，最后形成新的文件保存在本地的文件中。
最后调用用户表的相关操作（封装在UserDao类中）将数据库的信息存储完毕之后就可以返回后续的响应，但是需要构造一个响应对象，需要设置JsonResult返回的对象类，设置好返回格式，返回信息。最后通过resp的相关API来实现对于响应数据的返回。
实现的代码如下：
第五步：对于数据库三个类的JDBC操作实现
（1）对于用户表的工具类实现
在实现数据存储到数据库中时需要去开发UserDao这个实体类用来存放用户信息到数据库，因此对于user用户表的查询，插入，修改操作是经常性的需要去进行完成。所以在这个user用户表的工具类中实现了对于插入、查询、修改的操作方法。
实现的代码如下：
（2）对于消息表的工具类实现
对于用户的发送的消息需要存储到数据库的消息表字段中，同时上线的用户也需要获取历史的消息，因此对于消息表需要实现插入和查询的方法。实现代码如下：
（3）对于频道表的工具类实现
用户在进入界面的时候能够获取到所有频道的信息，因此对于频道中所有频道需要实现查询的方法。实现代码如下：
第六步：对于登录功能的实现
（1）对于登录页面的前端实现
用户在登录页面登录自己的用户名和密码信息后，前端进行获取，前端获取后通过ajax发送到后端进行解析，通过回调函数来确定是否是注册账号，如果是就进行登录，如果不是就提示输入有误。
实现的代码如下：
（2）对于登录页面的后端实现
首先在后端是对于前端的登录页面发来的请求的进行获取信息，通过获取前端的json字符串的user信息查询数据库来实现对于用户信息的校验，如果存在就创建session保存用户信息，不存在就提示用户有错误。最后将查询的相关用户的信息返回到当前页面的响应中。实现的代码如下：
第七步：对于聊天页面的功能实现
（1）对于聊天页面的前端实现
前端处理：先构建频道信息，对于每个对话框进行设计，能够实现基础的点击对话框就能跳转到非当前对话框。同时在页面加载的时候，需要对于对话框的列表进行获取和返回。根据与后端传递过来的channel参数信息来设置前端的响应，对于Channel中的属性继续的进行实现。对于消息推送功能的实现，使用WebSocket的方式实现，之所以不用Http是因为Http对于客户端和服务端之间需要一发一收后才能进行下一步操作，不能实现客户端和服务端全双工的特性，而WebSocket则实现了该特性，对于WebSocket，则是基于TCP协议，首先发送Http请求建立连接（目的是双方确定后续使用的协议和秘钥），后续使用Websocket协议（在应用层使用相同的数据格式来发送、接收数据）来实现收发数据。在前端使用socket的相关api来完成对于消息的处理。
前端处理代码实现：
（2）对于聊天页面的后端实现
先对于ChannelList类进行设计，在后端返回响应之前需要对于用户信息的session进行确认，和查询的数据库信息进行比对，如果不同，则进行禁止访问的状态码设置。如果查询成功存在的话，查询数据库的所有信息返回到List中，再将数据写入Json字符串中，最后将数据写在响应中进行返回。
对于数据库查询所有的Channels信息用ChannelDao的一个方法来进行实现。然后对于后端messsage的功能实现，该功能是基于websocket实现所以需要导入Websocket的依赖包：
javax.websocket
javax.websocket-api
1.1
provided
接下来对于后端实现对于messageEndpoint的相关功能实现，构造能够保存在线用户信息的onlineUsers数据结构来，构造能够实现消息信息存储的数据结构，并创建线程不断的从消息队列中取出消息发给每一个用户，最后实现对于基于socket的注解的open 、close、error、message的方法实现。对于OnOpen方法需要判断用户是否登录，如果登录就需要踢掉上一个该账户的用户，来实现一个用户同时只能一个人来进行登录的情况，同时能够将之前的历史数据进行获取。对于OnClose方法在实现的时候需要去从在线用户中去除掉当前的用户信息同时，将数据库的用户退出时间做好记录，在此调用的是DBUtil中的修改用户退出时间的方法。对于OnError方法，表示出现错误，当前用户的登录信息被清除，重新进行登录。对于OnMessage方法，将用户发送的消息通过socket的连接发送过来进行接收，在这里将消息存储到消息队列中，同时将此条消息对于所有的在线用户进行推送过去。
具体的代码实现如下：
第八步：对于注销功能的实现
在页面上有一个注销按钮，用户点击后就能实现注销功能。实现该功能是前端发送一个请求，后端执行一个servlet响应即可，在响应前需要核对用户的信息是否存在，不存在就禁止访问。如果存在就删除当前的session信息同时从当前的在线用户中退出，记录下退出的时间在数据库中进行更新，以便下次能够获取未读的历史消息，最后重定向初始的登录页面，注销功能完成。
实现的代码如下：
以上就是今天的全部内容了，后续的源码连接我会发到评论区，如果需要源码的话可以进行查看。如果觉得有用的话就点个赞吧！感谢！！！