[更新]:下面图片看不了 真是对不住大家
可参考源地址http://blog.sina.com.cn/s/blog_6b92dce10101jc24.html
还有问题请留言
最近笔者在做websocket的调研,本来以为很快就可以写一个demo出来,没想到一拖再拖,这么久了才写出一个demo。在网上找了很多例子,但是总觉得没说清楚。有的例子还很老了,是关于tomcat7的,但是tomcat7关于websocket的有些包已经启用,无法使之编译通过。还有的例子是关于jetty之类的其他服务器,由于tomcat使用比较广泛,所以在此笔者只调研了tomcat8的demo。我就这么迷茫的乱窜,经过两三周的努力,终于成功写出一个demo了。由于websocket还算比较新,用的不广泛,所以网上相关资料不多,而且都是点到为止,感觉那些写的人自己都不是很明白,在此找到我这篇文章的人你们有福了,我会很详细的给大家写这个入门篇,希望你们看完之后可以成功写出一个demo,并成功运行。
首先,关于websocket的什么协议啊,具体API啊,在此我不赘述,我就当你们对websocket有一定的了解了,想动手写一个demo了。
我的运行环境是:
eclipse:
Eclipse Java EE IDE for Web Developers.
Version: Kepler Service Release 1
Build id: 20130919-0819
apache-tomcat-8.0.5.tar.gz
这个地方千万注意了,我用的这个版本eclipse不支持tomcat8,最多支持到tomcat7。怎么办呢?可能你会说我可以直接用tomcat8里面的startup.bat,将要测试的工程打包到webapp,可是那样太麻烦,而且比较费时,笔者当时就是这么做的,结果还老遇到闪退的情况,根本没法查错。纠结死了。后来无意中发现一个简单解决办法。
下载一个WTP文件:http://www.eclipse.org/downloads/download.php?file=/webtools/downloads/drops/R3.6.0/I-3.6.0-20140213154746/wtp4x-I-3.6.0-20140213154746.zip
然后将里面的feature和plugin文件夹拷贝到eclipse里面,覆盖掉。再重启eclipse,你就可以安装tomcat8服务器了
![eclipse和tomcat8的websocket入门篇 eclipse和tomcat8的websocket入门篇_第2张图片](http://img.e-com-net.com/image/info8/754dfb7039ab46bea6ea7860ce2a9ccb.jpg)
第二步:解压tomcat8,安装tomcat8服务器,这个不用我仔细教了吧,大家自己去查别处怎么做了啊。
现在环境设置好了,我们接下来讲如何写一个demo了。
解压后的tomcat8,打开如下目录:\apache-tomcat-8.0.5\webapps\examples,META-INF和index.html先不用管他们,没太大用处。把websocket整个文件拷贝到新建的项目的webcontent下。在打开这个目录\apache-tomcat-8.0.5\webapps\examples\WEB-INF\classes\websocket,把这个websocket和util文件拷贝到项目的src文件。废话不多说了,看图吧!笔者只做了echo和chat两个例子,所以在这里只讲这两个例子。如图:
![eclipse和tomcat8的websocket入门篇 eclipse和tomcat8的websocket入门篇_第3张图片](http://img.e-com-net.com/image/info8/3d335f399a6946ebac2005159cf42baa.jpg)
导进去会报错,是因为找不到有些包,鼠标停在项目上,右击,build path->configure build path->add external jars,将tomcat8里面的tomcat-juli.jar和websocket-api.jar导入,报错解决。
第三步:这个地方很重要了,因为路径不对的话,出不来结果的。在chat.xhtml里,
![eclipse和tomcat8的websocket入门篇 eclipse和tomcat8的websocket入门篇_第4张图片](http://img.e-com-net.com/image/info8/2f4c312d97e0478eb98afff8b76a8aa9.jpg)
找到这段代码:把examples改为你自己的项目名称,我的项目名称叫做webtest,所以改为:
if (window.location.protocol == 'http:') {
Chat.connect('ws://' + window.location.host + '/webtest/websocket/chat');
} else {
Chat.connect('wss://' + window.location.host + '/webtest/websocket/chat');
}
好了,完事了。运行结果:
看完上面你可能会有些疑问,因为这个程序只有java代码和xhtml代码,没有其他的诸如web.xml文件的配置。是的,这个就是tomcat8的websocket强大的地方,更方便,更简单。不用配置web.xml文件的原因是:我们来看看 ChatAnnotation类
、
这里有个@ServerEndpoint,@ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址。正是因为这个的存在,所以我们可以不用web.xml配置。
xhtml和java代码对应起来是要看这个的:
chat例子java代码段:
@ServerEndpoint(value = "/websocket/chat")
xhtml代码段:if (window.location.protocol == 'http:') {
Chat.connect('ws://' + window.location.host + '/webtest/websocket/chat');
} else {
Chat.connect('wss://' + window.location.host + '/webtest/websocket/chat');
}
echo例子java代码段:
@ServerEndpoint("/websocket/echoAnnotation")
xhtml代码段:if (window.location.protocol == 'http:') {
document.getElementByIdx_x('target').value = 'ws://' + window.location.host + target;
} else {
document.getElementByIdx_x('target').value = 'wss://' + window.location.host + target;
}