websocket是用来干什么的，具体的请自行百度。

本文实现一个简单的websocket的入门小例子，实现客户端发送一句换，服务器端返回。即一个简单的交互。

一、服务器端的实现

1.创建一个类实现ServerApplicationConfig接口

2.编写一个后台websocket服务类，使用@ServerEndpoint注解标注。

第一步代码：

/**
 * 该类在服务器启动时，会自动执行
 * 
 * @author huan
 *
 */
public class EchoConfig implements ServerApplicationConfig {
  private Logger log = Logger.getLogger(EchoConfig.class);
  /**
   * 基于注解的实现方式,<br />
   * classess 中的类是实现了有@ServerEndpoint标注的类
   */
  @Override
  public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> classes) {
    log.info("服务器启动...");
    for (Class<?> clazz : classes) {
      log.info("加载的websocket服务类:" + clazz.getName());
    }
    return classes;
  }

  /**
   * 基于接口的实现方式
   */
  @Override
  public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {
    return null;
  }
}

 第二步代码：

@ServerEndpoint("/echo4me")
public class EchoServer {
  private static Logger log = Logger.getLogger(EchoServer.class);
  public EchoServer() {
  }
  @OnOpen
  public void open(Session session) throws IOException {
    log.info("一个客户端建立连接: websocket session id -> " + session.getId());
    if (session.isOpen()) {
      session.getBasicRemote().sendText("欢迎建立连接.");
    }
  }
  @OnClose
  public void onClose() {
    log.info("websocket关闭.");
  }
  @OnMessage
  public void onMessage(Session session, String msg) {
    log.info("客户端发送的消息:" + msg);
    if (session.isOpen()) {
      try {
        session.getBasicRemote().sendText("服务器返回的数据："+msg);
      } catch (IOException e) {
        e.printStackTrace();
      }
    }
  }
}

注意：1、上面的类中必须要有一个无参数的构造器方法

           2、方法中的参数 session  并不是httpsession,而是websocket中的session

           3、@ServerEndpoint("/echo4me")标注的类不用再配置中配置，它表示一个websocket的服务端，echo4me表示访问的路径, 即访问路径为:http://localhost:端口/项目部署名/echo4me

           4、@OnMessage表示客户端发送消息过来时触发。

二、前台的写法：

1.创建websocket请求，

2.打开请求

3.发送数据

js部分：

<strong><script type="text/javascript">
  var ws = null;
  function openConnection(){
    var target = "ws://localhost:8080/study-websocket/echo4me"
    if ('WebSocket' in window) {
          ws = new WebSocket(target);
      } else if ('MozWebSocket' in window) {
          ws = new MozWebSocket(target);
      } else {
          alert('WebSocket is not supported by this browser.');
          return;
      }
    console.info('连接websocket成功.');
    ws.onopen = function(){
    }
    ws.onerror = function(e){
      console.info("发生错误:");
      console.warn(w);
    }
    ws.onmessage = function(e){
      $('#serverReturnData').val($('#serverReturnData').val()+e.data);
    }
    ws.onclose = function(e){
      console.info("websocket关闭");
      console.log(e);
    }
  }

  $(function(){
    /** 发送数据到服务器端 */
    $('#sendBtn').on('click',function(){
      var val = $('#sendData').val();
      if(val){
        if(ws){
          ws.send(val);
        }else{
          alert('请先创建websocket连接.')
        }
      }else{
        alert("请输入要发送给服务器端的数据.");
      }
    })
  });
</script></strong>

注意:此处的url为  echo4me为@ServerEndpoint注解中value属性的值

<strong>var target = "ws://localhost:8080/study-websocket/echo4me" 
</strong>

 html代码部分：

<strong><button id="openWebsocket" onclick="openConnection()">连接服务器：</button><br/>
  发送数据到服务器：<input id="sendData" /><input type="button" id="sendBtn" value="发送"/> <br/>
  服务器返回的数据：<input id="serverReturnData" style="width: 100%;color: red;"/></strong>

到此，前后台都实现。

前后台交互的图片