当前位置：首页 >服务端 > WebSocket基于javaweb+tomcat的简易demo程序

WebSocket基于javaweb+tomcat的简易demo程序

服务端

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

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

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

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

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

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

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

客户端开启连接
客户端给服务器发送数据
服务器接收数据
服务器给客户端发送数据
客户端接收数据

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

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 {//扫描注解@Overridepublic Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scan) {System.out.println("scan WebSocket" + scan.size());//返回（起到过滤的作用，可以在返回前把里面部分类进行过滤）retu scan;}//实现接口@Overridepublic Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {// TODO Auto-generated method stubretu null;}}

接着创建第二个类，这个类用来处理WebSocket传送过来的数据（重点在于该类有@ServerEndpoint的注解）

package cn.test.websocket;import javax.websocket.OnClose;
import javax.websocket.CloseReason;
import javax.websocket.EndpointConfig;import javax.websocket.OnMessage;import javax.websocket.OnOpen;import javax.websocket.Session;import javax.websocket.server.ServerEndpoint;//注解规定了访问的URL@ServerEndpoint("/echo")public class EchoSocket {/** * 客户端有连接的时候就会调用这个方法 */@OnOpenpublic void open(Session session, EndpointConfig config){System.out.println(session.getId()+"#############");}/** * 客户端连接断开就会调用此方法 */@OnClosepublic void close(Session session,CloseReason reason){System.out.println(session.getId() + "连接关闭了");}/** * 接收到客户端的信息 * @param msg * @param last */@OnMessagepublic void message(Session session,boolean last,String msg){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 blocke.printStackTrace();}}

 /** *错误监听（当没有关闭socket连接就关闭浏览器会异常） */

@OnError
public void error(Session session, Throwable error){
String id = session.getId();
System.out.println("出错的session的id是" + id);
}

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");  retu;  }  //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>