Java及WebSocket开发网页聊天室.docVIP

Java和WebSocket开发网页聊天室 一、项目简介 WebSocket是HTML5一种新的协议，它实现了浏览器与服务器全双工通信，这里就将使用WebSocket来开发网页聊天室，前端框架会使用AmazeUI，后台使用Java，编辑器使用UMEditor。 网页前端（HTML+CSS+JS）和Java Tomcat 7 JDK 7 Eclipse JavaEE 现代浏览器 效果2 打开桌面上Eclipse JavaEE，新建一个名为Chat的Dynamic Web Project，然后导入处理JSON格式字符串所需要的包，把commons-beanutils-1.8.0.jar、commons- collections-3.2.1.jar、commons-lang-2.5.jar、commons-logging-1.1.1.jar、 ezmorph-1.0.6.jar和json-lib-2.4-jdk15.jar这几个包放在WebContent/WEB-INF/lib目录下， 最后把项目发布到Tomcat服务器上，到此空项目就搭建完成了。 在WebContent目录下新建一个名为index.jsp的页面，这里使用了AmazeUI框架，它是一个跨屏自适应的前端框架，消息输入框使用了UMEditor，它是一个富文本在线编辑器，能让我们的消息内容多姿多彩。 首先从AmazeUI官网下载压缩包，然后解压把assets文件夹拷贝到WebContent目录下，这样我们就能使用AmazeUI了。 再从UEditer官网下载Mini版的JSP版本压缩包，解压后把整个目录拷贝到WebContent目录下，接下来就可以编写前端代码了，代码如下（你可以按照自己的喜好编写）： 编写完成之后启动Tomcat服务器，然后访问http://localhost:8080/Chat/index.jsp ，会看到如下界面。 新建一个com.shiyanlou.chat的包，在包中创建一个名为ChatServer的类，从JavaEE 7开始就统一了WebSocket的API，因此无论是什么服务器，用Java写的代码都是一样的，代码如下： 后台写完了，前台要用WebSocket连接后台，需要新建一个WebSocket对象，然后就可以和服务器端进行交互，从浏览器发送消息给服务器端，同时要验证输入框的内容是否为空，然后接受服务端发送的消息，把它们动态地添加到聊天内容框中，在 之后添加代码如下： 到这步，简单的网页聊天室就完成了，你可以多开几个窗口或在局域网中邀请小伙伴们来一起测试。 本次项目课使用WebSocket实现了简单的网页聊天室，其实WebSocket不仅可以应用于浏览器，也可以应用于桌面客户端。 本次项目课只是简单的实现聊天室，其实还有很多功能可以增加，例如头像上传功能、一对一聊天功能等，让我们一起来完善聊天室吧。