你的位置:首页 > Java教程

[Java教程]WebSocket基于javaweb+tomcat的简易demo程序

由于项目需要,前端向后台发起请求后,后台需要分成多个步骤进行相关操作,而且不能确定各步骤完成所需要的时间

倘若使用ajax重复访问后台以获取实时数据,显然不合适,无论是对客户端,还是服务端的资源很是浪费

这种情况下,WebSocket能够解决此问题

它不像普通的http请求或者ajax访问,返回相应的结果就关闭了连接

WebSocket在个人浅薄的知识看来是属于长连接,能保持连接,随时收发数据

所以对WebSocket进行了初步了解,并按照相关的教程尝试做了一个简易demo

 

首先需要了解的是,WebSocket的几个基本操作

  1. 客户端开启连接
  2. 客户端给服务器发送数据
  3. 服务器接收数据
  4. 服务器给客户端发送数据
  5. 客户端接收数据

 

其中,服务端和客户端都能监听三类基本事件:

1、onopen(打开连接) 2、onmessage(发送数据) 3、onclose(关闭连接)

本次的demo中使用了tomcat7.0作为服务端,据悉7.0以上的版本才支持WebSocket

 

首先使用eclipse创建一个web project

在工程根目录下的WEB-INF/lib目录中导入tomcat7.0的lib文件夹中的 tomcat7-websocket.jar 和 websocket-api.jar

然后在src目录下创建第一个类(重点在于继承ServerApplicationConfig)

package cn.test.websocket;import java.util.Set;import javax.websocket.Endpoint;import javax.websocket.server.ServerApplicationConfig;import javax.websocket.server.ServerEndpointConfig;public class ApplicationConfig implements ServerApplicationConfig {  //扫描注解  @Override  public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scan) {    System.out.println("scan WebSocket" + scan.size());    //返回(起到过滤的作用,可以在返回前把里面部分类进行过滤)    return scan;  }      //实现接口  @Override  public Set<ServerEndpointConfig> getEndpointConfigs(      Set<Class<? extends Endpoint>> arg0) {    // TODO Auto-generated method stub    return null;  }}

接着创建第二个类,这个类用来处理WebSocket传送过来的数据([email protected]

package cn.test.websocket;import javax.websocket.OnClose;import javax.websocket.OnMessage;import javax.websocket.OnOpen;import javax.websocket.Session;import javax.websocket.server.ServerEndpoint;[email protected]("/echo")public class EchoSocket {  /**   * 客户端有连接的时候就会调用这个方法   */  @OnOpen  public void open(Session session){        System.out.println(session.getId()+"#############");  }  /**   * 客户端连接断开就会调用此方法   */  @OnClose  public void close(Session session){    System.out.println(session.getId() + "连接关闭了");  }    /**   * 接收到客户端的信息   * @param msg   * @param last   */  @OnMessage  public void message(Session session,String msg,boolean last){    System.out.println("客户端说" + msg);    try {      session.getBasicRemote().sendText("ni hao too");      Thread.sleep(3000);//三秒后再发送一条信息,用于验证是否实现数据实时更新      session.getBasicRemote().sendText("ni hao too twice");    } catch (Exception e) {      // TODO Auto-generated catch block      e.printStackTrace();    }  }    public EchoSocket(){    System.out.println("Socket对象创建");    //通过对象的创建可以知道不同socket之间的通信不会共享成员变量  }}

本案例中,使用的是基于注解的方法,让ApplicationConfig扫描注解

(实际上还有实现接口实现的方法,同理可以让ApplicationConfig扫描实现接口的类)

 

 后台所需的类已经写好了,接下来就写一个简单的jsp页面

在工程下的index.jsp如下(实际上html也可以)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>  <title>WebSocket示例</title>  <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="description" content="This is my page"> </head>  <body>   <button onclick="subOpen();">open</button><br/>   <input type="text" name="msg" id="msg"><br/>   <button onclick="send();">发送</button>   <div id="div"></div>  </body>  <script type="text/javascript">   var ws; // 就是一个通信管道   var target = "ws://127.0.0.1:8080/WebSocket/echo";//服务端的url,注意以ws开头   function subOpen(){     //三个判断用于获取ws通信管道(浏览器兼容)     if('WebSocket' in window){       ws = new WebSocket(target);     }else if('MozWebSocket' in window){       ws = new MozMozWebSocket(target);     }else{       alert("WebSocket is not supported by this browse");       return;     }     //ws.onopen = function(){} 链接开启会执行方法     //ws.onclose = function(){} 断开连接会执行方法     //以上两个实际用处并不多,主要是下面的     //服务器又信息返回就执行方法     ws.onmessage=function(event){       //服务端一返回内容,就把该内容放到div标签当中       document.getElementById("div").innerHTML = event.data;              //方便在控制台查看返回内容的具体信息       console.info(event);     };   };      function send(){     //点击发送按钮就把输入框里的内容发送给服务器,并把输入框的内容清空     var msg = document.getElementById("msg").value;     ws.send(msg);     document.getElementById("msg").value = "";   };    </script> </html>

至此,demo已经编写完毕,将工程部署到tomcat7.0,启动tomcat并访问localhost:8080/WebSocket可看到以下简易页面


 


 

点击open按钮,发起websocket连接,服务端控制台会输出

Socket对象创建
0#############

在网页输入框输入“你好”后点击“发送”按钮

服务端控制台输出

客户端说你好

 网页端先显示"ni hao too",三秒后,又显示"ni hao too twice"

(三秒钟太短了懒得去截第一个效果的图片的,反正大家都懂的2333)


 


 

重复再网页输入信息点击发送后能重复展现同样的效果

显然,WebSocket非常灵活好用

 

(ps:第一篇随笔です,新人初来乍到,难免会有很多缺漏或者错误的地方,还请前辈们多多指点)